Selector

From. jQuery in Action
http://www.bibeault.org/jqia2/
http://www.bibeault.org/jqia2/chapter2/lab.selectors.html

jQuery에서 지원하는 기본 CSS 셀렉터

jQuery 기본 셀렉터
예제 설명
* 모든 엘리먼트와 일치.
E 태그명이 E인 모든 엘리먼트와 일치.
E F E의 자손이면서 태그명이 F인 모든 엘리먼트.
E > F E의 바로 아래 자식이면서 태그명이 F인 엘리먼트와 일치.
E + F E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치.
E ~ F E의 형제 엘리먼트로 바로 다음에 나오는 모든 엘리먼트 F와 일치.
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와 일치.
E[A!=V] 값이 아예 없거나 값이 V가 아닌 어트리뷰트 A를 가진 모든 엘리먼트 E와 일치.
E[A*=V] 값이 V를 포함하는 어트리뷰트 A를 가진 모든 엘리먼트 E와 일치.

jQuery가 지원하는 위치 기반 셀렉터

jQuery가 지원하는 위치 기반 셀렉터
셀렉터 설명
:first 컨텍스트에서 처음 일치하는 엘리먼트와 일치. li a:first는 리스트 아이템의 자손 중 첫번째 링크를 반환한다.
:last 컨텍스트에서 마지막으로 일치하는 엘리먼트와 일치. li a:last는 리스트 아이템의 자손 중 마지막 링크를 반환다.
:first-child 컨텍스트에서 첫 번째 자식 엘리먼트와 일치. li:first-child는 각 리스트의 첫 번째 리스트 아이템을 반환한다.
:last-child 컨텍스트에서 마지막 자식 엘리먼트와 일치. li:last-child는 각 리스트의 마지막 리스트 아이템을 반환한다.
:only-child 형제가 없는 모든 엘리먼트를 반환한다.
:nth-child(n) 컨텍스트에서 n번째 자식 엘리먼트와 일치. li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환한다.
:nth-child(even|odd) 컨텍스트에서 짝수와 홀수 자식 엘리먼트와 일치. li:nth-child(even)은 각 리스트의 짝수 번째 리스트 아이템을 반환한다.
:nth-child(Xn+Y) 전달된 공식에 따른 n번째 자식 엘리먼트와 일치. Y가 0인 경우 생략가능하다. li:nth-child(3n)은 3의 배수인 리스트 아이템을 반환한다. li:nth-child(5n+1)은 5의 배수 + 1번째 리스트 아이템을 반환한다.
:even 컨텍스트에서 짝수 번째 엘리먼트와 일치. li:even은 모든 짝수 번째 리스트 아이템을 반환한다.
:odd 컨텍스트에서 홀수 번째 엘리먼트와 일치. li:odd는 모든 홀수 번째 리스트 아이템을 반환한다.
:eq(n) n번째로 일치하는 엘리먼트와 일치
:gt(n) n번째 엘리먼트를 포함하지 않은 이후의 엘리먼트와 일치
:lt(n) n번째 엘리먼트를 포함하지 않은 이전의 엘리먼트와 일치

CSS와 jQuery 정의 필터 셀렉터

CSS와 jQuery 정의 필터 셀렉터
셀렉터 설명
:animated 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.
:button 버튼 엘리먼트만 선택한다. (input[type=submit], input[type=reset], input[type=button], button)
:checkbox 체크박스 엘리먼트만 선택한다.(input[type=checkbox])
:checked 선택된 체크박스 또는 라디오 버튼만 선택한다.
:contains(food) 텍스트 food를 포함하는 엘리먼트만 선택한다.
:disabled 비활성화 상태인 엘리먼트만 선택한다.
:enabled 활성화 상태인 엘리먼트만 선택한다.
:file 파일 타입 엘리먼트만 선택한다.(input[type=file])
:has(selector) 셀렉터와 일치하 최소 한 개 이상의 엘리먼트를 포함하는 엘리먼트만 선택한다.
:header 헤더 엘리먼트만 선택한다. 예를 들어 h1~h6까지의 엘리먼트를 선택한다.
:hidden 감춰진 엘리먼트만 선택한다.
:image 이미지 타입의 엘리먼트만 선택한다.(input[type=image])
:input 폼 엘리먼트만 선택한다.(input, select, textarea, button)
:not(selector) 셀렉터의 값을 반대로 변경한다.
:parent 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
:password 패스워드 엘리먼트만 선택한다.(input[type=password])
:radio 라디오 엘리먼트만 선택한다.(input[type=radio])
:reset 리셋 버튼만 선택한다.(input[type=reset]이나 button[type=reset])
:selected 선택된 상태의 옵션(<option>) 엘리먼트만 선택한다.
:submit 전송 버튼만 선택한다.(button[type=submit]이나 input[type=submit])
:text 텍스트 타입 엘리먼트만 선택한다.(input[type=text])
:visible 보이는(visible) 엘리먼트만 선택한다.

다른 HTML DOM 엘리먼트의 관계를 통해 새로운 확장 집합을 얻을 수 있는 메서드

http://www.bibeault.org/jqia2/chapter2/lab.operations.html

다른 HTML DOM 엘리먼트의 관계를 통해 새로운 확장 집합을 얻을 수 있는 메서드
메서드 설명
children([selector]) 확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환한다.
closest([selector]) 존재할 경우, 전달된 표현식과 일치하는 가장 가까운 조상 하나로 구선된 확장 집학을 반환한다.
contents() 확장 집합에서 엘리먼트의 콘텐츠로 구선된 확장 집합을 반환한다. 여기에는 텍스트 노드도 포함되며 주로 <iframe>엘리먼트의 콘텐츠를 얻고자 사용한다.
next([selector]) 확장 집합의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환한다.
nextAll([selector]) 확장 집합의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환한다.
nextUntil([selector]) 확장 집합의 각 확장 엘리먼트 다음에 나오는 모든 형제부터 셀렉터와 일치하는 엘리먼트 전까지의 확장 집합을 반환한다. 셀렉터와 일치하는 엘리먼트가 없거나 셀렉터가 생략되면 모든 형제 엘리먼트가 선택된다.
offsetParent() 확장 집합에 상대 혹은 절대적으로 가장 가까이 위치한 첫 번째 엘리먼트의 부모로 구성된 확장 집합을 반환한다.
parent([selector]) 확장 집합에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환한다.
parents([selector]) 모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환한다. 바로 위 부모와 상위의 모든 조상이 포함되지만 문서 루트(document root)는 포함되지 않는다.
parentUntil([selector]) 확장 집합에 있는 엘리먼트의 모든 조상부터 셀렉터와 일치하는 엘리먼트 전까지의 확장 집합을 반환한다. 셀렉터와 일치하는 엘리먼트가 없거나 셀렉터가 생략되면 모든 조상 엘리먼트가 선택된다.
prev([selector]) 확장 집합의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합을 반환한다.
preAll([selector]) 확장 집합의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환한다.
preUntil([selector]) 확장 집합 내에 있는 엘리먼트의 모든 이전 형제부터 셀렉터와 일치하는 엘리먼트 전까지의 확장 집합을 반환한다. 셀렉터와 일치하는 엘리먼트가 없거나 셀렉터가 생략되면 모든 이전 형제 엘리먼트들이 선택된다.
siblings([selector]) 확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환한다.

사용자 정의 필터 셀렉터 만들기

jQuery.expr[':'] 개체의 밑으로 jQuery의 셀렉터 식을 확장할 수 있는데, 이는 Sizzle.Selectors.filters에 대한 별칭이기도 합니다. 각각의 새로운 필터 식은 아래와 같이 이 개체의 속성으로써 정의됩니다.

							jQuery.expr[':'].newFilter = function (elem, index, match) {
								return true; // filter() 메서드처럼 true/false를 반환.
							};
						

함수는 현재 컬랙션의 모든 요소에 대해 실행되고 true(컬렉션에서 요소를 유지) 또는 false(컬랙션에서 요소 제거)를 반환해야 할 것이다. 세 부분으로된 정보가 이 함수에 지정될 수 있는데 그들은 각각 대상 요소, 전체 컬렉션 중 현재 요소의 인덱스, 그리고 보다 복잡한 식을 위해 중요한 정보를 담고 있는 정규 표현식 매치로부터 반환되는 배열이 그것입니다.

예를 들어, 어떤 속성을 가지고 있는 모든 요소를 얻어내고자 한다고 가정해 봅시다. 다음 필터는 display가 inline인 모든 요소와 일치할 것입니다.

							jQuery.expr[':'].inline = function (elem) {
								return jQuery(elem).css('display') === 'inline';
							};
						

상기 소스코드처럼 사용자 정의 셀렉터를 만들었으므로 이제 이를 어떤 셀렉터 식으로든 사용할 수 있습니다.

							// 예제 1
							jQuery('div a:inline').css('color','red');

							// 예제 2
							jQuery('span').filter(':not(:inline)').css('color','blue');
						

jQuery의 사용자 정의 셀렉터(:radio, :hidden 등)도 이러한 방식으로 만들어 졌습니다.