jQuery selector

jQuery(ver. 1.2.6)
- 출처 : “jQuery API활용(가메출판사:송인섭 저)”
■ CSS Selectors
jQuery는 CSS1, CSS2의 모든 selector 문법을 지원하며, CSS3에 있는 selector 문법을 부분적을 지원한다. 아래의 내용은 지원하는 CSS Selector이다.
*
모든 element를 의미한다. E
element의 태그명이 E인 element E:nth-child(n)
부모 element를 기준으로 n 번째에 위치한 E element E:first-child
부모 element를 기준으로 첫 번째에 위치한 E element E:last-child
부모 element를 기준으로 마지막에 위치한 E element E:only-child
부모 element를 기준으로 자식 element가 하나인 E element E:empty
Text 노드 값을 포함해 자식 element를 갖지 않은 E element E:enabled
Disabled 속성을 갖지 않은 E element E:diabled
Disabled 속성을 갖는 E element E:checked
Radio 버튼과 checkbox와 같은 element에서 checked 속성을 갖는 E element E:selected
Option element들에서 selected 속성을 갖는 E element E.warning
CSS class 속성 값으로 warning을 갖는 E element E#myid
Id 속성 값이 “myid”인 E element E:not(s)
Selector s를 제외한 E element E F
E element를 부모를 포함 상위 노드로 갖는 F element E > F
E element를 부모 노드로 갖는 F element E + F
앞의 위치에 E element를 갖는 F elemet E ~ F
아래 위치에 E element 를 갖는 F element E,F,G
모든 E element, F element, G element
■ 지원하며 다른 형태로도 사용 가능한 Selectors
아래의 내용은 Attribute(속성)에 관련된 selector들이다.
E[@foo]
속성 명으로 “foo”를 갖는 E element E[@foo=bar]
속성 명으로 “foo”를 갖고 “foo”의 속성 값으로 “bar”를 갖는 E element E[@foo^bar]
속성 명으로 “foo”를 갖고 “foo”의 속성 값이 “bar”로 시작되는 E element
E[@foo$=bar]
속성 명으로 “foo”를 갖고 “foo”의 속성 값이 “bar”로 끝나는 E element E[@foo*=bar]
속성 명으로 “foo”를 갖고 “foo”의 속성 값에 “bar”를 포함하는 E element E[@foo=bar] [@baz=bop]
속성 명으로 “foo”를 갖고 “foo”의 속성 값이 “bar”이고, 속성 명으로 “baz”를 갖고 “baz”의 속성 값이 “bop”인 E element
■ 지원하지 않는 Selector
jQuery는 Dom element를 선택하기 위한 selector 문법맊을 지원하므로 아래의 CSS Selector는 지원하지 않는다.
E:link
아직 클릭한 적이 없는 hyperlink인 a-element E:visited
클릭한 적이 있는 hyperlink인 a-element E:active
마우스로 클릭하는 순간의 E element E:hover
마우스가 over되었을 때의 E element E:focus
Focus를 갖고 있는 E element E:target
URI를 참조하고 있는 E element E:first-line
E element에서 첫 번째 줄을 선택하는 가상의 element E:first-letter
E element의 첫 번째 글자를 선택하는 가상의 element E:selection
사용자에 의해 선택된 E element E:before
E element 앞에 생성된 element E:after
E element 뒤에 생성된 element E:nth-last-child(n)
부모 element를 기준으로 마지막 element로부터 n번째 위치한 element E:nth-of-type(n)
같은 노드 레벨의 n번째에 위치한 E element E:nth-last-of-type(n)
같은 노드 레벨의 끝에서 n번째에 위치한 E element E:first-of-type
Type이 같고, 노드 레벨이 같은 E element E:last-of-type
같은 노드 레벨의 마지막에 위치한 E element
■ Custom Selectors
jQuery는 CSS와 XPath에는 없으나 굉장히 간편하고 유용한 selector를 제공한다.
:even
대상이 되는 element들 중에 짝수 번째에 해당하는 element를 검색한다. :odd
대상이 되는 element들 중에 홀수 번째에 해당하는 element를 검색한다. :eq(n) and :nth(n)
n번째에 해당하는 element를 검색한다. :gt(n)
n+1보다 큰 element를 검색한다.(n은 0부터 시작) :lt(n)
n+1보다 작은 element를 검색한다.(n은 0부터 시작) :first
:eq(0)과 같으며 대상 element들 중에 첫 번째 element를 검색한다.
:last
마지막에 위치하는 대상 element를 검색한다. :parent
대상 element의 부모 노드에 위치하는 element를 검색한다. :contains(„test‟)
Text 노드 값에 “test”문자열을 포함하는 element를 검색한다. :visible
Style 속성 값 중 display:none이 아닌 element들을 리턴한다. :hidden
Style 속성 값 중 display:none으로 설정된 element들을 리턴한다.
■ Form selectors
:input
Form과 관련된 element를 검색한다.(input, select, textarea, button) :text
Input-element 중 type 속성 값이 “text”인 element를 검색한다. :password
Input-element 중 type 속성 값이 “password”인 element를 검색한다. :radio
Input-element 중 type 속성 값이 “radio”인 element를 검색한다. :checkbox
Input-element 중 type 속성 값이 “checkbox”인 element를 검색한다. :submit
Input-element 중 type 속성 값이 “submit”인 element를 검색한다. :image
Input-element 중 type 속성 값이 “image”인 element를 검색한다. :reset
Input-element 중 type 속성 값이 “reset”인 element를 검색한다. :button
Input-element 중 type 속성 값이 “button”인 element를 검색한다. :file
Input-element 중 type 속성 값이 “file”인 element를 검색한다.

jQuery(Ver1.2.6).pdf