📖 jQuery 선택자
- HTML 요소를 선택하여 가져옴; 선택한 요소의 디자인 속성을 '동적'으로 변경함
- jQuery 선택자 형식 : $("선택자")
1. 기본 선택자
- 가장 기본적으로 요소(태그)를 선택하는 방법
| 기본 선택자 종류 | 형식 | 설명 |
| 태그 선택자 | $("p") | p 요소를 선택 |
| id 선택자 | $("#gnb") | id = gnb 요소를 선택 |
| class 선택자 | $(".logo") | class = logo인 요소를 선택 |
| 자식 선택자 | $("#gnb > ul > li") | #gnb의 자식 요소 ul의 자식 요소 li를 선택 |
| 하위 선택자 | $("#gnb ul") | #gnb의 하위에 있는 모든 ul 요소를 선택 |
| 인접 선택자 | $("#visual + #content") | #visual 다음에 오는 #content 요소를 선택 (= 바로 다음에 오는 형제 선택자. #visual 다음에 #content 요소가 바로 안오고 중간에 다른 요소가 끼어있다면 활성화X) |
| 형제 선택자 | $("#visual ~ #footer") | #visual의 형제 요소 #footer를 선택 (= #footer인 모든 형제 선택자) |
| 종속 선택자 | $("div.util") | div 요소 중 class = util 인 요소를 선택 * $("div .util") : div의 자식요소 중 class = util인 요소를 선택 |
| 그룹 선택자 | $(".left, .right, #banner") | .left, .right, #banner 요소들을 선택 |
| 전체 선택자 | $("*") | 모든 요소들을 선택 |
2. 속성 선택자
- 요소에 설정되어 있는 속성을 통해 선택하는 선택자
- [ ] 안에 속성 이름과 값을 넣음
| 속성 선택자 종류 | 형식 | 설명 |
| 요소[속성] | $("span[class]") | span 요소 중 class 속성을 가지고 있는 요소를 선택 |
| 요소[속성='값'] | $("span[class='abc']") | span 요소 중 class가 'abc'인 요소를 선택 |
| 요소[속성!='값'] | $("span[class!='abc']") | span 요소 중 class가 'abc'가 아닌 요소를 선택 |
| 요소[속성~='값'] | $("span[class~='abc']") | span 요소 중 class가 'abc'를 포함하는 요소를 선택 - 'abc' 앞뒤로 연결된 문자가 없어야 함 - 'bg abc'는 선택되나 'bg_abc'는 선택되지 않음 |
| 요소[속성*='값'] | $("span[class*='abc']") | span 요소 중 class가 'abc'를 포함하는 요소를 모두 선택 - 'bg abc', 'bg_abc' 모두 선택 |
| 요소[속성|='값'] | $("span[class|='abc']") | span 요소 중 class가 'abc'나 'abc-'로 시작하는 요소를 선택 |
| 요소[속성^='값'] | $("span[class^='abc']") | span 요소 중 class가 'abc'로 시작하는 요소를 선택 |
| 요소[속성$='값'] | $("span[class$='abc']") | span 요소 중 class가 'abc'로 끝나는 요소를 선택 |
3. 필터 선택자
- 요소의 상태(순서, 태그의 현재 상태 등)에 따라 선택하는 선택자
- 선택자에 ':'이 붙음
1) 필터 선택자의 종류
| 필터 선택자 종류 | 형식 | 설명 |
| :even | $("tr:even") | tr 요소 중 짝수 행만 선택 |
| :odd | $("tr:odd") | tr 요소 중 홀수 행만 선택 |
| :first | $("td:first") | 첫 번째 td 요소를 선택 |
| :last | $("td:last") | 마지막 td 요소를 선택 |
| :header | $(":header") | 헤딩 (h1~h6) 요소를 선택 |
| :eq( ) | $("li:eq(0)") | index가 0인 li 요소를 선택 *index : 0번 = 첫 번째 요소 |
| :lt( ) | $("li:lt(2)") | index가 2보다 작은 li 요소들을 선택 *index = 2 인 li 요소(기준)는 제외, 그 왼쪽 요소들을 전체 선택 |
| :gt( ) | $("li:gt(0)") | index가 0보다 큰 li 요소들을 선택 *index = 0 인 li 요소(기준)는 제외, 그 오른쪽 요소들을 전체 선택 |
| :not( ) | $("li:not(.bg)") | li 요소들 중에서 class 명이 bg가 아닌 li 요소들을 선택 |
| :root | $(":root") | html을 의미 |
| :animated | $(":animated") | 움직이는 요소들을 선택 |
cf) eq = equal, lt = less than, gt = greater than
2) 자식 필터 선택자
- 'child'가 붙은 선택자 : 요소가 순차적으로 나열되어 있을 때 사용
- 'of-type'이 붙은 선택자 : 요소가 순차적으로 나열되어 있지 않아도 동일 요소면 선택이 가능
| 자식 필터 선택자 종류 | 형식 | 설명 |
| :first-child | $("span:first-child") | 자식요소 span 중 첫 번째 요소를 선택 |
| :last-child | $("span:last-child") | 자식요소 span 중 마지막 요소를 선택 |
| :first-of-type | $("span:first-of-type") | span 요소 중(자식X, 자기 자신O)에서 첫 번째 span 요소를 선택 |
| :last-of-type | $("span:last-of-type") | span 요소 중에서 마지막 span 요소를 선택 |
| :nth-child( ) | $("span:nth-child(2)") | 자식요소 span 중 두 번째 요소를 선택 *nth-child(2n) : 2, 4, 6, ...번째 요소를 선택 *nth-child(2n+1) : 1, 3, 5, ...번째 요소를 선택 |
| :nth-last-child( ) | $("span:nth-last-child(2)") | 자식요소 span 중 마지막에서 두번째 요소를 선택 |
| :nth-of-type( ) | $("span:nth-of-type(2)") | span 요소 중에서 두 번째 span 요소를 선택 |
| :nth-last-of-type( ) | $("span:nth-last-of-type(2)") | span 요소 중 마지막에서 두 번째 span 요소를 선택 |
| :only-child( ) | $("div > span:only-child") | div의 자식 요소에서 오직 span 요소가 하나만 있는 span 요소를 선택 *지정 요소가 부모의 유일한 자식 요소인 경우 (부모의 자식 요소가 지정 요소 하나만 있는 경우) |
| :only-of-child( ) | $("div > span:only-of-child") | div의 자식 요소에서 span 요소가 하나만 있는 span 요소를 선택 *지정 요소가 부모의 자식 요소중 동일한 타입이 없는 경우 (부모의 자식 요소 중 다른 타입의 형제 요소들은 있어도 상관없음) |
출처 : ⎡반응형 웹 실전 프로젝트 가이드 (김광수, 조혜경)⎦, https://ak-coding.tistory.com/22