jQuery

• jQuery : javaScript 라이브러리
• 브라우저 종류 상관 없이 사용 가능

사용 목적

1. HTML 문서 탐색 및 조작
2. 이벤트 처리
3. 애니메이션
4. Ajax와 같은 작업
5. ...

연결 방법

• jQeury 다운로드 (링크)
  • 압축 - 대역폭을 절약하고 프로덕션 성능을 향상
    • jquery-3.6.0.min.js
  • 비압축 - 개발 또는 디버깅 중에 자주 사용
    • jquery-3.6.0.js
• CDN(Content Delivery Network)로 구글 라이브러리 같은 곳에서 로드하여 사용

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

기본 구문

$("jQeury Selector(선택자)").액션();

jQeury Wrapper

• $ (== jQuery == window.jQuery == window)
• 요소 객체나 제이쿼리 선택자(문자열)을 매개변수로 받음
• 요소 객체를 반환하여 그 대상이 하는 액션으로써 메소드들을 호출할 수 있게 함

1. jQeury Selector

• css 선택자보다 더 다양한 표현으로 선택자를 설정할 수 있음
• 문자열로서 요소 객체를 지칠할 수 있게 함

2. 액션(action())

• jQuer Wrapper에서 반환된 요소 객체가 어떤 작업을 하도록 하는 메소드

체이닝

• 한 요소 객체에 여러 속성이나 메소드를 이을 수 있따

$("div")
  .children("p.first") // div의 자식 요소 중 해당 선택자를 얻어옴
    .css({"color":"red"}) // 그 얻어온 요소의 css 속성을 바꿈
  .end() //.children("p.first") 체이닝 끊음
  .find("span") // div의  후손 요소 중 span 태크를 찾음
    .css({"color":"blue"})