[jQuery] jQuery API (7/7) - 선택자[jQuery] jQuery API (7/7) - 선택자

Posted at 2013.10.07 15:47 | Posted in == Web ==/jQuery



facebook에 글올리기



[jQuery] jQuery API (7/7) - 선택자


- "*" : 전체 선택자


속성 선택자


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


[jQuery] jQuery API (1/7) - 제어 (선택, 삽입, 삭제, 변경, 변환, 확장)


[jQuery] jQuery API (2/7) - 속성(CSS), 추출


[jQuery] jQuery API (3/7) - 검증


[jQuery] jQuery API (4/7) - 효과


[jQuery] jQuery API (5/7) - Event


[jQuery] jQuery API (6/7) - Ajax


[jQuery] jQuery API (7/7) - 선택자



이웃추가
facebook에 글올리기
  1. jquery 관련해서 정말 깔끔하고 상세하게 정리하셨네요. 담아갑니다 ^^
  2. 비밀댓글입니다
  3. 정리가 잘되어있어 두고두고 보려고 스크랩합니다~!^^

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기