[JQuery-3.6.0] 제이쿼리의 기본 개념

* 제이쿼리(JQuery)?
- 자바스크립트 언어를 간편한게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리.
- 제이쿼리는 자바스크립트 DOM을 좀 더 쉽게 작업하기 위한 라이브러리 덩어리.
- 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있음.

 * 제이쿼리 사용 이유
- 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됨.
- 동적으로 HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용 가능.
- 생산성 있게 아주 짧고 간결하게 코딩이 가능하여 불필요한 소스를 줄일 수 있음.
- 애니메이션 효과나 대화형 처리를 간단하게 적용할 수 있음.
- 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있음.
- 다양한 플러그인과 참고할 수 있는 문서가 많이 존재함.
 오픈 라이센스를 적용하여 누구나 자유롭게 이용할 수 있음.
      
* 제이쿼리 사용 방법
- 제이쿼리 라이브러리를 다운을 받아서 사용하는 방법(http://code.jquery.com)
- 인터넷을 이용하여 파일을 연동시켜 사용하는 CDN 방식을 이용하는 방법
(CDN : Content Delivery Network - 사용자가 요청한 컨텐츠를 사용자와 가장 가까운 곳에 위치한 서버에게 전달해 주는 방식, https://code.jquery.com/jquery-3.6.9.js)

 

* 선택자 사용 방법
1. 직접 선택자
   - 전체 선택자 : $("*") ==> 모든 요소(태그)를 선택함.
   - 아이디 선택자 : $("#아이디이름") ==> id 속성에 지정된 값을 가진 요소를 선택함.
   - 클래스 선택자 : $(".클래스이름") ==> class 속성에 지정된 값을 가진 요소를 선택함.
   - 요소 선택자 : $("요소(태그)명") ==> 지정된 요소(태그)명과 일치하는 요소들만 선택함.
   - 그룹 선택자 : $("선택1, 선택2,.... 선택n") ==> 선택1, 선택2,.... 선택n 에 지정된 모든 요소를 한번에 선택함. 
    
2. 인접 관계 선택자
   - 부모 요소 선택자 : $("요소 선택").parent() ==> 선택한 요소의 부모 요소를 선택함.
   - 상위 요소 선택자 : $("요소 선택").parents() ==> 선택한 요소의 상위 요소들 모두를 선택함.
   - 하위 요소 선택자 : $("요소선택  하위요소") ==> 선택한 요소에 지정한 하위 요소를 선택함.
   - 자식 요소 선택자 : $("요소선택 > 자식요소) ==> 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택함.
   - 자식 요소들 선택자 : $("요소선택").children() ==> 선택한 요소의 모든 자식 요소를 선택함.
   - 형제(이전) 선택자 : $("요소선택").prev() ==> 선택한 요소의 바로 이전 요소를 선택함.
   - 형제(이전) 요소들 선택자 : $("요소선택").prevAll() ==> 선택한 요소의 바로 이전 요소 모두를 선택함.
   - 지정 형제(이전) 요소들 선택자 : $("요소선택").prevUntil("요소명") ==> 선택한 요소로부터 지정한 요소 이전까지의 요소 선택함.
   - 형제(다음) 요소 선택자 : $("요소선택").next() ==> 선택한 요소의 다음 요소를 선택함.
   - 형제(다음) 요소들 선택자 : $("요소선택").nextAll() ==> 선택한 요소의 다음 요소 모두를 선택함.

 

* 제이쿼리 탐색 선택자
  - 제이쿼리 탐색 선택자를 이용하면 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있음

* 탐색 선택자의 종류
  - 위치 탐색자 : 선택한 요소 중 위치를 기준으로 선택
  - 속성 탐색 선택자 : 요소의 지정된 속성을 기준으로 선택
  - 콘텐츠 탐색 선택자 : 요소 내에서 콘텐츠의 포함 여부를 따져서 선택
  - 필터링 선택자 : 선택한 요소를 한 번 더 필터링하여 선택
  
 1. 위치 탐색자
  1) 첫번째 요소 선택 : 전체 요소 중에서 첫번째 요소만 선택
    형식) $("요소선택:first"), $("요소선택").first()
  2) 마지막 요소 선택 : 전체 요소 중에서 마지막 요소만 선택
    형식) $("요소선택:last"), $("요소선택").last()

  3) 짝수 번째(홀수 인덱스) 요소 선택 : 전체 요소 중에서 짝수번째(홀수 인덱스) 요소만 선택
    형식) $("요소선택:odd")
  4) 홀수 번째(짝수 인덱스) 요소 선택 : 전체 요소 중에서 홀수번째(짝수 인덱스) 요소만 선택
     형식) $("요소선택:even")
  5) 전체 요소 중 특정 숫자 번째 요소만 선택
     형식) $("요소선택:nth-child(숫자)")
  6) 전체 요소 중 특정 배수의 요소만 선택
     형식) $("요소선택:nth-child(숫자n)")

 

2. 탐색 선택자
  1) eq(index) 선택자 : 지정한 인덱스가 참조하는 요소만 선택
  2) lt(index) 선택자 : 지정한 인덱스보다 작은(less then) 요소만 선택
  3) gt(index) 선택자 : 지정한 인덱스보다 큰(greater then) 요소만 선택

 

3. 속성 탐색 선택자 : 요소의 지정된 속성을 기준으로 선택함.
  1) 요소[속성] : 속성이 있는 요소 가져오기
  2) 요소[속성=값] : 속성과 값이 일치하는 요소 가져오기
  3) 요소[속성^=값] : 값으로 시작하는 요소 가져오기
  4) 요소[속성$=값] : 값으로 끝나는 요소 가져오기
  5) 요소[속성*=값] : 값을 포함하는 요소 가져오기
  6) 요소[속성=값][속성=값] : and 조건으로 조건 2개의 속성과 값을 모두 만족하는 요소 가져오기