jquery 기본 CSS 선택자

http://wickedmagic.tistory.com/trackback/251

01) 기본 CSS 선택자

 -. DOM API부분 중 document.querySelector( ), querySelectorAll( ) 메서드와 같은 기본 CSS 선택자와 필터 등을 이용할 수 있다.

     (jQuery만의 고유한 선택자도 지원)

선택자	설                  명
*	-. 모든 엘리먼트를 선택한다.
E	-. 태그 이름이 E인 모든 엘리먼트를 선택한다.
E F	-. E의 자손이면서 태그 이름이 F인 모든 엘리먼트를 선택한다.
E > F	-. E의 바로 아래 자식이면서 태그 이름이 F인 모든 엘리먼트를 선택한다.
E + F	-. E의 형제 엘리먼트로 바로 다음에 나오는 모든 엘리먼트 F를 구한다.
E ~ F	-. E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F를 구한다.
E:has(F)	-. 태그 이름이 F인 자손을 하나 이상 가지는 태그 이름이 E인 모든 엘리먼트를 선택한다.
E.C	-. 클래스 이름이 C를 가지는 모든 엘리먼트 E를 선택한다. (E를 생략하면 *.C와 같다.
E#I	-. 아이디가 I인 엘리먼트 E를 선택한다. E를 생략하면 *.#I와 같다.
E[A]	-. 속성 A를 가지는 모든 엘리먼트 E를 선택한다.
E[A=V]	-. 값이 V인 속성 A를 가지는 모든 엘리먼트 E를 선택한다.
E[A~=V]	-. 값이 V로 끝나는 속성 A를 가지는 모든 엘리먼트 E를 구한다.
E[A*=V]	-. 값에 V를 포함하는 속성 A를 가지는 모든 엘리먼트 E를 선택한다.

 

02) 위치기반 선택자(필터)

 -. 선택자를 이용해 위치를 정해주게 되면 손쉽게 위치를 기반으로 하여 선택할 수 있을 뿐 아니라 모든 엘리먼트를 검색하지 않아도 된다.

    (페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관도니 관계를 기반으로 엘리먼트를 선택해야 한다.)

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

 

03) 정의 필터 선택자

 -. CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 할 경우 사용한다.

선택자	설                  명
:animated	-. 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.
:button	-. 모든 버튼을 선택한다.      <input [type = submit]>, <input [type = reset]>, <input [type = button]>, <button>
:checkbox	-. 확인란 엘리먼트만 선택한다.      <input [type = checkbox]>
:checked	-. 선택된 확인란이나 라디오 버튼만을 선택한다.(CSS에서 지원)
:contains(foo)	-. 텍스트 foo를 포함하는 엘리먼트만 선택한다.
:disabled	-. 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
:enabled	-. 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.
:file	-. 모든 엘리먼트를 선택한다.      <input [type = file]>
:header	-. 헤더 엘리먼트만 선택한다.      (예를 들어 <h1>부터 </h6>까지의 엘리먼트를 선택한다.
:hidden	-. 감춰진 엘리먼트만 선택한다.
:image	-. 폼 이미지를 선택한다.      <input [type = image]>
:input	-. 폼 엘리먼트만 선택한다.      <input>, <select>, <textarea>, <button>
:not(selector)	-. selector가 아닌 것을 선택한다.  -. 괄호 안의 조건이 아닌 것을 선택한다.
:parent	-. 빈 엘리먼트를 제외하고 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
:password	-. 비밀번호 엘리먼트만 선택한다.      <input [type = password]>
:radio	-. 라디오 버튼 엘리먼트만 선택한다.      <input [type = radio]>
:reset	-. 리셋 버튼을 선택한다.      <input [type = reset]>이나 <button [type = reset]>
:selected	-. 선택된 엘리먼트만 생각한다.
:submit	-. 전송 버튼을 선택한다.     <button [type = submit>이나 <input [type = submit]>
:text	-. 텍스트 엘리먼트만 선택한다.     <input [type = text]>
:visible	-. 보이는(visible) 엘리먼트만 선택한다.