[jQuery] 기초 - 다양한 jQuery 셀렉터 사용하기

[jQuery] 기초 - 기본 다양한 셀렉터 사용하기 

 

 

오늘은 초심으로 돌아가서 공부하는 마음으로 , jQuery의 셀렉터를 포스팅 하기로 한다.

 

요즘 " jQuery in Action 프로그래밍 jQuery 2판 " 을 보고 있는데 ,

나만 보기 아까운 인터넷에도 뒤죽박죽 되어 있어서 찾기 불편한 부분이 있길래

결국 나를 위한 거지만 , 조금이라도 정리를 좀 해두려고 한다.

 

그건 바로 jQuery 셀렉터 !!

 

셀렉터란 , jQuery $() 함수로 DOM 엘리먼트를 선택하고 새로운 DOM 엘리먼트를 생성하는 기법을 말한다.

 

서론이 길면 본론에 힘이 빠지기 때문에 바로 본론으로 ! ^^

 

 

1. 간단한 몇 개의 CSS 셀렉터 

 

1. // 간단한 몇 개의 CSS 셀렉터 예제
2.  
3. a                          // 모든 앵커(<a>) 엘리먼트와 일치
4. #specialID                 // specialID를 id로 가진 엘리먼트와 일치
5. .specialClass              // specialClass를 클래스명으로 가진 모든 엘리먼트와 일치
6.  
7. a#specialID.specialClass  
8. // 앵커 태그에 specialClass를 클래스명으로 가지면서 specialID를 id로 가진 엘리먼트와 일치
9.  
10. p a.specialClass
11. // <p> 엘리먼트의 자손들 중에 specialClass를 클래스명으로 가진 모든 a 엘리먼트와 일치

2. jQuery에서 지원하는 기본 CSS 셀렉터 

 

1. // jQuery에서 지원하는 기본 CSS 셀렉터
2.  
3. *               // 모든 엘리먼트와 일치
4. E               // 태그명이 E인 모든 엘리먼트와 일치
5. E F             // E의 자손이면서 태그명이 F인 모든 엘리먼트
6. E>F             // E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
7. E+F             // E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
8. E~F             // E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
9. E.C             // 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일
10. E#I             // 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일
11. E[A]            // 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
12. E[A^=V]         // 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
13. E[A$=V]         // 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
14. E[A!=V]         // 값이 아예 없거나 값이 V가 아닌 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
15. E[A*=V]         // 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
16.  
17. 사용 예)
18.  
19. form[method]           // method 어트리뷰트를 가지는 <form> 엘리먼트와 일치
20. input[type=text]       // type이 text인 모든 input 엘리먼트와 일치
21. div[title^=my]         // title 어트리뷰트 값이 my로 시작하는 모든 <div> 엘리먼트를 선택
22. a[href$=.pdf]          // PDF 파일을 참조하는 모든 링크를 찾아오는 셀렉터
23. a[href*=jquery.com]    // jQuery 사이트를 참조하는 모든 <a> 엘리먼트와 일치
24.  

3. jQuery가 지원하는 위치 기반 셀렉터 

 

1. // jQuery가 지원하는 위치 기반 필터 셀렉터
2.  
3. :first          // 컨텍스트에서 처음 일치하는 엘리먼트와 일치
4.                 // li a:first 는 이스트 아이템의 자손 중 첫 링크를 반환
5. :last           // 컨텍스트에서 마지막으로 일치하는 엘리먼트와 일치
6.  
7. :first-child    // 컨텍스트에서 첫번째 자식 엘리먼트와 일치
8.                 // li:first-child 는 각 리스트의 첫번째 리스트 아이템을 반환
9. :last-child     // 컨텍스트에서 마지막 자신 엘리먼트와 일치
10.  
11. :only-child     // 형제가 없는 모든 엘리먼트를 반환
12.  
13. :nth-child(n)   // 컨텍스트에서 n번째 자식 엘리먼트와 일치
14.                 // li:nth-child(2)는 각 리스트의 두번째 리스트 아이템을 반환
15.  
16. :nth-child(even|odd)   // 컨텍스트에서 짝수 또는 홀수 자식 엘리먼트와 일치
17.                        // li:nth-child(even)은 각 리스트의 짝수 번째 리스트 아이템 반환
18.  
19. :nth-child(Xn+Y)       // 전달된 공식에 따른 n번째 자식 엘리먼트와 일치 (Y가 0인 경우 생략 가능)
20.                        // li:nth-child(3n)은 3의 배수인 리스트 아이템 반환
21.  
22. :even           // 컨텍스트에서 짝수 번쨰 엘리먼트와 일치
23. :odd            // 컨텍스트에서 홀수 번째 엘리먼트와 일치
24. :eq(n)          // n번째로 일치하는 엘리먼트와 일치
25. :gt(n)          // n번쨰 엘리먼트를 포함하지 않은 이후의 엘리먼트와 일치
26. :lt(n)          // n번째 엘리먼트를 포함하지 않은 이전의 엘리먼트와 일치

 

 

4. CSS와 jQuery 정의 필터 셀렉터 

 

1. // CSS와 jQuery 정의 필터 셀렉터
2.  
3. :animated        // 현재 애니메이션이 적용되고 있는 엘리먼트를 선택
4. :button          // 버튼 엘리먼트만 선택
5. :checkbox        // 체크박스 엘리먼트만 선택
6. :checked         // 선택된 체크박스 또는 라디오 버튼만 선택
7. :contains(food)  // 텍스트 food를 포함하는 엘리먼트만 선택
8. :disabled        // 비활성화 상태인 엘리먼트만 선택
9. :file            // 파일 타입 엘리먼트만 선택
10. :has(selector)   // 셀렉터와 일치한 최소 한 개 이상의 엘리먼트를 포함하는 엘리먼트만 선택
11. :header          // 헤더 엘리먼트만 선택 (<h1>에서 <h6>)
12. :hidden          // 감춰진 엘리먼트만 선택
13. :image           // 이미지 타입의 엘리먼트만 선택
14. :input           // 폼 엘리먼트만 선택
15. :not(selector)   // 셀렉터의 값을 반대로 변경
16. :parent          // 빈 엘리먼트를 제외하고 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트 선택
17. :password        // 패스워드 엘리먼트만 선택
18. :radio           // 라디오 엘리먼트만 선택
19. :reset           // 리셋 버튼만 선택
20. :selected        // 선택된 상태의 옵션(<option>) 엘리먼트만 선택
21. :submit          // 전송 버튼만 선택
22. :text            // 텍스트 타입 엘리먼트만 선택
23. :visible         // 보이는 엘리먼트만 선택
24.  
25. 사용 예)
26.  
27. input:not(checkbox)        // 체크박스가 아닌 <input> 엘리먼트와 일치
28.  
29. $('img:not([src*="dog"])') // 'dog' 텍스트를 포함하고 있는 src 어트리뷰트를 제외한 모든 이미지 선택
30.  
31. $('tr:has(img[src$="puppy.png"])')
32.  
33. // 이미지 src가 'puppy.png'로 끝나는 이미지 엘리먼트를 가지고 있는 tr 엘리먼트와 일치

 

에휴 ~ 보기좋게 정리한다고 시간 다 보냈네 ㅎ 아무튼 코딩하면서 보니까 공부도 좀 된듯 ! 

jQuery 셀렉터 다들 보시고 참고 하시길 바래요 ~~~ ^ㅡ^

이제 지쳐서 오늘 포스팅은 마무리 해야겠다 ㅎㅎ 
 

그럼 jQuery 기초 셀렉터 문법 포스팅 완료 !!

[ 자료 출처 : jQuery in Action 2/E 프로그래밍 2판 / 베어 바이볼트, 예후다 카츠 / 인사이트 2008 / 33,000원 ]

최종 출처 : http://blog.naver.com/jaeik714?Redirect=Log&logNo=140194008161