[JAVASCRIPT] jQuery 선택자

 

속성 선택자

- [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 : 부모요소 선택

- :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 상태 요소 선택