Language/JQuery
제이쿼리(jQuery) - 선택자 Selector
Jessi :D
2021. 3. 23. 23:17
속성
| [name] | name속성이 있는 요소를 선택 |
| [name="value"] [name2="value2"] |
name속성의 값이 value이고 name2 속성의 값이 value2 인 요소를 선택 |
| [name="value"] | name속성의 값이 value인 요소를 선택 |
| [name!="value"] | name속성의 값이 value가 아닌 요소를 선택 |
| [name^="value"] | name속성의 값이 value로 시작하는 요소를 선택 |
| [name|="value"] | name속성의 값이 value 이거나 value로 시작하는 요소를 선택 |
| [name*="value"] | name속성의 값에 value가 들어 있는 요소를 선택 |
| [name~="value"] | name속성의 값이 value를 포함하는, 쉼표로 구분된 문자열 요소를 선택 |
| [name$="value"] | name속성의 값이 value로 끝나는 요소를 선택 |
태그
| div | 태그명이 div인 모든 Element 선택 |
| div p | div 요소의 자식 요소중 태그명이 p인 요소 선택 |
| div, p | div 요소와 p 요소를 선택 |
| div > p | div 요소의 바로아래 자식 요소중 태그명 p인 요소 선택 |
| div + p | div의 형제 요소로 바로 다음에 나오는 요소 p인 요소 선택 |
| div ~ p | div의 형제 요소로 다음에 나오는 모든 요소 p인 요소 선택 |
| div:has(p) | 태그명이 p인 자손을 하나 이상 가지는 div 요소 선택 |
| div.code | 클래스명 code를 가지는 모든 div 요소 선택 |
| div#name | id가 name인 div 요소 선택 |
| div[A] | 속성 A를 가지는 모든 div 요소 선택 |
| div[A=B] | 값이 B인 A 속성 값을 가진 div 요소 선택 |
| div[A^=B] | 값이 B로 시작하는 값인 A 속성을 가진 div 요소 선택 |
| div[A$=V] | 값이 V로 끝나는 값인 A 속성을 가진 div 요소 선택 |
| div[A*=V] | 값에 V를 포함하는 값인 A 속성을 가진 div 요소 선택 |
선택자
| :animated | 움직이는 요소 |
| :header() | <h1>, <h2>, <h3> 등 제목 요소 |
| :input | input, textarea 모든 입력 컨트롤 |
| :text | <input type="text"> |
| :button | <input type="button"> |
| :radio | <input type="radio"> |
| :checkbox | <input type="checkbox"> |
| :password | <input type="password"> |
| :file | <input type="file"> |
| :hidden | <input type="hidden"> |
| :image | <imput type="image"> |
| :submit | <input type="submit"> |
| :reset | <input type="reset"> |
| :selected | <select>의 <option selected> |
| :checked | <input type="checkbox"> <input type="radio">의 체크된 요소 |
| :contains() | 해당 인자를 가지고 있는 요소 $('div:contains("text")'); ▶ div 요소중 "text"를 포함한 요소 |
| :visible | 눈에 보이는 요소 |
| :enabled | 활성화된 요소 |
| :disabled | 비활성화된 요소 |
| :empty | 해당 요소가 비어있는 요소(text도 포함) |
| :odd | 홀수 요소 |
| :even | 짝수 요소 |
| :parent | 부모요소 |
| :parents | 부모요소중에 |
| :first | 첫번째 요소 |
| :first-child | 첫번째 자식요소 |
| :last | 마지막 요소 |
| :last-child | 마지막 자식요소 |
| :nth-child() | 자식 요소 집합에서 인자의 위치한 자식 $('li:nth-child(1)') ▶ <li>의 첫번째 자식요소를 찾는다. (index:1, 2, 3) |
| :eq() | 인자의 순번에 있는 요소 $('td:eq(2)"); ▶ td 집합중 세번째 요소를 선택 (index:0, 1, 2) |
| :only-child | 형제가 없는 요소 |
| :gt() | 인자보다 큰 요소 $(":gt(index)"); ▶ index 값보다 큰 요소 |
| :lt() | 인자보다 작은 요소 선택 $(":lt(index)"); ▶ index 값보다 작은 요소 |
| :has() | 인자요소를 가지고 있는 요소 $('div:has(p)'); ▶ p를 자식으로 가지고 있는 div를 선택 |
| :not() | 인자의 조건이 아닌 요소 $(':not(div)'); ▶ div 가 아닌 요소를 선택 |
| :focus | focus 상태 요소 선택 |
반응형