JQuery

JQuery

• JQuey(제이쿼리): 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리
• 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현 가능

JQuery 특징

• 웹페이지 상에서 엘리먼트를 쉽게 찾고 조작
• 거의 모든 웹브라우저에 대응할 정도로 호환성이 뛰어남
• 네트워크, 애니메이션 등 다양한 기능 제공
• 메소드 체이닝 등 짧고 유지관리가 용이한 코드 작성 지원
• 관련 플러그인들일 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장 가능
• 공식 웹사이트와 수많은 레퍼런스를 통해 쉽게 접근 가능

  ---

JQuery 사용법

JQuery 연결

• HTML에 제이쿼리 라이브러리를 연결

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

JQurey 문법

• 제이쿼리의 기본 문법은 $로 시작
• $는 제이쿼리의 별칭

$(selector).action();
/* selector : HTML의 요소 선택 */
/* action() : 선택된 요소에 적용될 작업(함수)  */

기본 선택자

• 제이쿼리는 CSS 선택자를 사용하여 HTML 요소를 쉽게 선택할 수 있다.

ID 선택자

• ID를 사용하여 특정 요소 선택

$(#id).action();

클래스 선택자

• 클래스를 사용하여 요소 그룹을 선택

$(".class").action();

요소 선택자

• 특정 타입의 모든 요소를 선택

$("p").action();

이벤트 핸들링

클릭 이벤트

$("p").click(function(){
  /* 클릭 이벤트 발생시 실행될 코드 */
});

문서 준비 이벤트

• 제이쿼리 코드는 대부분 '$(document).ready()'내부에 작성된다.
• 이는 문서의 모든 요소가 로드된 후 제이쿼리 고드가 실행되도록 보장

$(document).ready(function(){
  /* 페이지 로드 완료 후 실행될 코드*/
});

---

참고

제이쿼리 기본 문법 정리

제이쿼리 메소드 종류

제이쿼리 이벤트 종류