자바스크립트 - 제이쿼리(JQuery) 기본 문법

Feb 27, 2024

Contents

💡

제이쿼리(jQuery)는 자바스크립트 언어를 좀 더 편리하게 사용할 수 있도록 도와주는 라이브러리이다. 자바스크립트를 이용해 웹 페이지의 요소를 선택하거나, 이벤트를 처리하거나, 애니메이션 효과를 주는 등의 작업을 간단하게 할 수 있도록 도와준다.


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

해당 코드를 추가해야 제이쿼리를 사용할 수 있다.


$(선택자).동작함수1().동작함수2()

💡

$ : 제이쿼리에 접근할 수 있도록 도와주는 식별자 선택자 : 선택자를 활용해 원하는 HTML 선택 ID = $(”#ID”) 클래스 = $(”.클래스”) 요소 이름 = $('p')

자바스크립트


document.getElementById('id')

제이쿼리


$("#id)

자바스크립트


function hideDisplay(){
let el = document.querySelector("#innerBox1");
el.style.display = "none";
}

제이쿼리


function hideDisplay() {
   $("#innerBox1").hide();
     }

💡

제이쿼리를 사용하면 코드가 훨씬

마우스 이벤트: mouseenter(), mouseleave(), mousedown(), mouseup(), hover() 등의 메서드는 마우스 관련 이벤트를 처리

문서/창 이벤트: load(), resize(), scroll(), unload() 등의 메서드는 문서나 창의 로딩, 크기 조절, 스크롤 등에 관련된 이벤트를 처리

💡

이벤트는 웹 페이지에서 발생하는 여러 가지 동작들을 의미한다. 이 이벤트들은 자바스크립트를 통해 감지하고, 특정 이벤트가 발생했을 때 원하는 동작을 실행하는 이벤트 핸들러를 설정해 동적인 페이지를 만들 수 있다.

Contents

More articles