jQuery 셀렉터로 기능 확장할 엘리먼트 선택하기

⊙ 자식셀렉터(child selector)

 

p > a

-부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분

-<p>엘리먼트의 바로 아래 자식 링크와 일치

 

⊙ 어트리뷰터 셀렉터(attribute selector)

 

a[href^=http://]

-http://로 시작하는 모든 링크와 일치

 

form[method]

-method어트리뷰트를 가지는 <form>엘리먼트와 일치

 

input[type=text]

-특정값을 일치시킨 형태

-셀렉터는 type이 text인 모든 input엘리먼트와 일치

 

⊙ 컨테이너셀렉터(container selector)

-다른 엘리먼트를 선택해야 할때 사용

 

li:has(a)

-<a>엘리먼트를 포함하는 모든 <li>엘리먼트와 일치

 

foo:not(bar:has(baz))          --한단계 중첩 허용

foo:not(bar:has(baz:eq(2)))  --여러단계 중첩은 허용되지 않음

 

※jQuery가 지원하는 기본CSS셀렉터

셀렉터

설명

*  E  E F  E>F  E+F  E~F  E:has(F)  E.C  E#I  E[A]  E[A=V]  E[A^=V]  E[A$=V]  E[A*=V]

모든 엘리먼트와 일치  태그명이 E인 모든 엘리먼트와 일치  E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치  E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치  E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치  E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치  태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치  클래스명 C를 가지는 모든 엘리먼트 E와 일치.E의 생략은 *.C와 동일함  아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함  어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치  값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치  값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치  값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치  값이 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

 

 

⊙ 위치기반셀렉터

※jQuery가 지원하는 고급 위치 기반 셀렉터.DOM에서 위치를 기반으로 엘리먼트 선택

셀렉터

설명

:first    :last    :first-child    :last-child    :only-child  :nth-child(n)    :nth-child(even|odd)    :nth-child(Xn+Y)      :even / :odd    :eq(n)  :gt(n)  :lt(n)

페이지에서 처음으로 일치하는 엘리먼트  li a:first는 리스트 아이템의 첫번째 링크를 반환  페이지에서 마지막으로 일치하는 엘리먼트  li a:last는 리스트 아이템의 마지막 링크를 반환  첫번째 자식 엘리먼트  li:first-child 는 각 리스트의 첫번째 아이템을 반환  마지막 자식 엘리먼트  li:last-child 는 각 리스트의 마지막 아이템을 반환  형제가 없는 모든 엘리먼트  n번째 자식엘리먼트  li:nth-child(2)는 각 리스트의 두번재 리스트 아이템 반환  짝수 또는 홀수 자식 엘리먼트  li:nth-child(even)은 각목록의 짝수번째 자식 엘리먼트를 반환  전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인경우 생략가능  li:nth-child(3n)은 3의 배수번째 아이템을 반환  li:nth-child(5n+1)은 5의 배수 +1번째 아이템을 반환  페이지 전체의 짝수/홀수 번째 엘리먼트  li:even은 모든 짝수번째 아이템을 반환  n번째 일치하는 엘리먼트  n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치  n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치

 

 

⊙ jQuery정의 셀렉터

jQuery정의 필터 셀렉터. 대상 엘리먼트를 식별해내는데 강력한 기능을 줌

셀렉터

설명

:animated  :button    :checkbox  :checked  :contains(foo)  :disabled  :enabled  :file  :header  :hidden  :image  :input  :not(filter)  :parent  :password  :radio  :reset  :selected  :submit  :text  :visible

현재 애니메이션이 적용되고 있는 엘리먼트 선택   모든 버튼 선택 (input[type=submit],input[type=reset],  input[type=button],button)  체크박스 엘리먼트만 선택 (input[type=checkbox])  선택된 체크박스나 라디오 버튼만 선택 (css에서 지원)  텍스트 foo를 포함하는 엘리먼트만 선택  인터페이스에서 비활성인 상태인 모든 폼 엘리먼트 선택(css에서 지원)  인터페이스에서 활성화 상태인 모든 폼 엘리먼트 선택(css에서 지원)  모든 파일 엘리먼트 선택(input[type=file])  헤더 엘리먼트만 선택 ex)<h1>부터 <h6>까지 엘리먼트 선택  감춰진 엘리먼트 선택  폼 이미지 선택 (input[type=image])  폼 엘리먼트 선택(input, select, textarea, button)  필터의 값을 반대로 변경  빈 엘리먼트를 제외하고 텍스트도 포함해서 자식 엘리먼트를가진 엘리먼트  패스워드 엘리먼트 선택 (input[type=password])  라디오 버튼 엘리먼트 선택 (input[type=radio])  리셋 버트을 선택 (input[type=reset]이나 button[type=reset])  선택된 엘리먼트만 선택  전송버튼을 선택(button[type=submit]이나 input[type=submit])  텍스트 엘리먼트만 선택(input[type=text])  보이는 (visible) 엘리먼트만 선택

 

:checkbox:checked:enabled

-활성화되고 체크된 체크박스 선택

 

:not 필터 사용하기

* 필터셀렉터와 찾기셀렉터의 차이점

 -필터셀렉터는 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나가고, 찾기셀렉터는 이미 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾음

-찾기셀렉터-자손셀렉터(공백문자), 자식셀렉터(>), 형제 셀렉터(+)

-:not은 셀렉터에는 적용할 수 있지만 찾기 셀렉터에는 적용하지 못함.

  div p:not(:hidden) -유효

  div ;not(p:hidden) - 유효하지 않음

-필터셀렉터는 모두 콜론문자(:)나 대괄호 문자([)로 시작

[출처] jQuery 셀렉터로 기능 확장할 엘리먼트 선택하기|작성자 꽁치