제이쿼리(jQuery)는 자바스크립트 언어를 좀 더 편리하게 사용할 수 있도록 도와주는 라이브러리이다. 자바스크립트를 이용해 웹 페이지의 요소를 선택하거나, 이벤트를 처리하거나, 애니메이션 효과를 주는 등의 작업을 간단하게 할 수 있도록 도와준다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
해당 코드를 추가해야 제이쿼리를 사용할 수 있다.
1. 기본 문법
$(선택자).동작함수1().동작함수2()
$ : 제이쿼리에 접근할 수 있도록 도와주는 식별자
선택자 : 선택자를 활용해 원하는 HTML 선택
ID = $(”#ID”)
클래스 = $(”.클래스”)
요소 이름 = $('p')
2. 제이 쿼리 vs 자바스크립트 비교
2.1 인수를 전달받을 때
자바스크립트
document.getElementById('id')
제이쿼리
$("#id)
2.2 함수 비교
자바스크립트
function hideDisplay(){ let el = document.querySelector("#innerBox1"); el.style.display = "none"; }
제이쿼리
function hideDisplay() { $("#innerBox1").hide(); }
제이쿼리를 사용하면 코드가 훨씬
3. 이벤트 종류
- 클릭 이벤트:
click()메서드는 요소를 클릭했을 때 발생하는 이벤트를 처리
- 더블 클릭 이벤트:
dblclick()메서드는 요소를 더블클릭했을 때 발생하는 이벤트를 처리
- 마우스 이벤트:
mouseenter(),mouseleave(),mousedown(),mouseup(),hover()등의 메서드는 마우스 관련 이벤트를 처리
- 포커스 이벤트:
focus(),blur()메서드는 요소가 포커스를 얻었을 때와 잃었을 때 발생하는 이벤트를 처리
- 키보드 이벤트:
keypress(),keydown(),keyup()메서드는 키보드 관련 이벤트를 처리
- 폼 이벤트:
submit(),change(),select()등의 메서드는 폼 요소와 관련된 이벤트를 처리
- 문서/창 이벤트:
load(),resize(),scroll(),unload()등의 메서드는 문서나 창의 로딩, 크기 조절, 스크롤 등에 관련된 이벤트를 처리
이벤트는 웹 페이지에서 발생하는 여러 가지 동작들을 의미한다. 이 이벤트들은 자바스크립트를 통해 감지하고, 특정 이벤트가 발생했을 때 원하는 동작을 실행하는 이벤트 핸들러를 설정해 동적인 페이지를 만들 수 있다.
Share article