jQuery 셀렉터(선택자) : 원하는 노드를 얻는 방법

자주 쓰는 셀렉터 (글쓴이 기준)

$('a[href^="mailto:"]').addClass('linkA'); // html속성값이 "mailto:"로 시작하는 링크요소 $('a[href$=".html"]').addClass('linkB'); // html속성값이 ".html"로 끝나는 문자열을 갖는 링크 $('a[href*="mysite.com"]').addClass('linkC'); // "mysite.com"이 URL의 일부로 사용되는 링크 $('tr:odd').addClass('odd'); // 홀수번째 줄 $('tr:even').addClass('even'); // 짝수번째 줄 $('td:contains("퍼티6")').addClass('bold'); // "퍼티6"이라는 텍스트 $('div.box:eq(1)').addClass('Doc'); // "box"클래스를 가지는 div 집합 중에서 두 번째 항목 $('div:nth-child(1)').addClass('Doc'); // 부모 div의 첫 번째 자식에 해당하는 요소 $("div").not(".comm").addClass('Doc'); $("div").find("li").css(어트리뷰트속성); $(this).parent(); //부모 $(this).children(); //자식 $("li:nth-child(8n+1)").css("page-break-before", "always"); //8의 배수 + 1 번째 아이템을 반환, 다음페이지에 인쇄 //DOM 객체 $('.open', $('div#footer')); //div#footer가 소유하고 있는 '.open'만 찾음

위치 셀렉터

a:first	페이지에서 첫 번째 <a> 엘리먼트
p:odd	모든 홀수 번째 문단 <p> 엘리먼트
p:even	모든 짝수 번째 문단 <p> 엘리먼트
li:last-child	부모 엘리먼트의 마지막 자식 엘리먼트
:first	페이지에서 처음으로 일치하는 엘리먼트
:last	페이지에서 마지막으로 일치하는 엘리먼트
:first-child	첫 번째 자식 엘리먼트
:last-child	마지막 자식 엘리먼트
:only-child	형제가 없는 모든 엘리먼트를 반환한다
:nth-child(n)	n번째 자식 엘리먼트
:nth-child(even:odd)	짝수 또는 홀수 자식 엘리먼트
:nth-child(Xn+Y)	전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능.
:nth-last-child(2)	마지막에서 두번째 자식 엘리먼트
:nth-child(3n)	3의 배수 번째 아이템을 반환
:nth-child(5n+1)	5의 배수 + 1 번째 아이템을 반환
:even	페이지 전체의 짝수 번째 엘리먼트
:odd	페이지 전체의 홀수 번째 엘리먼트
:eq(n)	n번째로 일치하는 엘리먼트
:gt(n)	n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치.
:lt(n)	n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

n번째 자식 셀렉터는 CSS와 호환성을 유지하려고 인덱스를 1부터 시작.
jQuery 정의 셀렉터는 범용 프로그래밍 규약에 따라 인덱스를 0부터 시작.

정의 셀렉터

:button	모든 버튼을 선택 ( input[type=submit], input[type=reset], input[type=button], button )
:checkbox	체크박스 엘리먼트만 선택
:checked	선택된 체크박스나 라디오 버튼만 선택 (CSS에서 지원)
:contains(foo)	텍스트 foo를 포함하는 엘리먼트만 선택
:disabled	인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 (CSS에서 지원)
:enabled	인터페이스에서 활성화 상태인 모든 엘리먼트를 선택 (CSS에서 지원)
:file	모든 파일 엘리먼트를 선택 ( input[type=file] )
:header	헤더 엘리먼트만 선택 <h1>부터 <h6>까지 선택
:hidden	감춰진 엘리먼트만 선택
:image	폼 이미지를 선택 ( input[type=image] )
:input	폼 엘리먼트만 선택 ( input, select, textarea, button )
:not	not 필터 - 필터 결과가 반대로 나오게 함 - CSS 필터에서 지원 - jQuery 정의 셀렉터에서도 동작 - 필터 셀렉터에는 적용할 수 있지만 찾기 셀렉터에는 적용하지 못함 - 모두 콜론 문자(:)나 대괄호 문자([)로 시작
input:not(:checkbox)	체크박스가 아닌 <input> 엘리먼트 선택
: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	보이는 엘리먼트만 선택
:checkbox:checked:enabled	활성화되고 선택된 체크박스만 선택

필터 셀렉터 - 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나간다.
찾기 셀렉터 - 이미 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾는다. [ 자손 셀렉터(공백문자), 자식 셀렉터(>), 형제 셀렉터(+) ]가 있다.

커맨드 문법

size()	확장 집합의 엘리먼트 개수를 반환 예제) $('a').size() 설명) 모든 <a> 타입의 엘리먼트의 개수를 반환
get(index)	확장된 집합에서 하나 또는 모든 일치하는 엘리먼트. 매개변수가 명시되지 않았다면 모든 엘리먼트를 자바스크립트 배열로 반환 예제) $('img[alt]').get(0)
index(element)	확장 집합에서 전달된 엘리먼트를 찾고, 집합에서 찾은 엘리먼트의 인덱스를 반환. 집합에 해당 엘리먼트가 존재하지 않으면 -1을 반환 예제) var n = $('img').index($('img#findMe')[0]);
add(expression)	expression 매개변수로 명시한 엘리먼트를 확장 집합에 추가. 표현식에는 셀렉터, HTML, 코드, DOM 엘리먼트, DOM 엘리먼트 배열이 올 수 있음 예제1) $('img[alt]').add('img[title]') 예제2) $('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough') 설명2) alt 어트리뷰트를 가진 모든 <img>엘리먼트의 확장 집합을 생성한 뒤 두꺼운 테두리를 만드는 클래스를 적용. title 어트리 뷰트를 가진 <img> 엘리먼트를 추가하고, 마지막으로 투명도를 주는 클래스를 적용
not(expression)	expression 매개변수의 값에 따라서 일치하는 집합에서 엘리먼트를 제거 예제) $('img[title]').not('[title*=puppy]') 설명) title 어트리뷰트를 지닌 모든 <img> 엘리먼트를 선택할 때, title 어트리뷰트 값이 puppy를 포함하는 엘리먼트를 제외
filter(expression)	전달 받은 셀렉터 표현식이나 필터링 함수를 이용해서 확장 집합에서 엘리먼트를 필터링 예제) $('td').filter(function(){return this.innerHTML.match(/^\d+$/)}) 설명) 모든 <td> 엘리먼트로 구성된 확장 집합을 생성한 다음 엘리먼트 각각에 대해 filter() 메서드에 전달된 함수를 호출 호출된 함수를 this값으로 현재 순회 중인 엘리먼트를 이용 전달된 함수는 정규 표현식을 사용하여 숫자로 내용이 구성된 패턴을 만족하는지 검사 필터 함수를 호출한 결과로 false를 반환하는 엘리먼트가 모두 확장 집합에서 제거
slice(begin, end)	일치하는 집합에서 연속하는 일부분을 포함하는 새로운 확장 집합을 생성하고 반환 - begin : 반환되는 부분 집합에 포함될 첫 엘리먼트의 위치로, 0부터 시작 - end : 반환되는 부분 집합에 포함될 마지막 엘리먼트의 바로 다음 위치로, 0부터 시작하며, 생략하면 집합의 마지막까지 포함 예제1) $('*').slice(2,3); 설명1) 페이지에 있는 모든 엘리먼트를 선택한 다음 세 번째 엘리먼트를 담은 새로운 집합을 생성 예제2) $('*').slice(0,4); 설명2) 페이지에 있는 모든 엘리먼트를 선택한 다음 처음 네 개의 엘리먼트를 포함한 집합을 생성 예제3) $('*').slice(4); 설명4) 페이지의 모든 엘리먼트와 일치한 다음 처음 네 엘리먼트를 제외한 모든 엘리먼트의 집합을 반환 < 관계를 통해 새로운 확장 집합을 얻을 수 있는 메서드 > children() - 확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환 contents() - 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환. 텍스트 노드도 포함되며 주로 <iframe> 엘리먼트의 콘텐츠를 얻고자 사용 next() - 확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환 nextAll() - 확장 집합 내의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환 parent() - 확장 집합 내에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환 parents() - 모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환. 바로 위 부모와 상위의 모든 조상이 포함되지만 문서 루트(document root)는 포함되지 않음 prev() - 확장 집합 내의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합을 반환 prevAll() - 확장 집합 내의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환 siblings() - 확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환
find(selector)	원본의 모든 엘리먼트 중 전달된 셀렉터 표현식과 일치하는 엘리먼트로 구성된 새로운 확장 집합을 반환 예제) wrappedSet.find('p cite') 설명) 변수 wrappedSet에 할당된 확장 집합에서, 문단 <p>에 포함된 모든 인용문 <cite>로 구성된 확장 집합을 반환
is(selector)	확장 집합에 전달된 셀렉터 표현식과 일치하는 엘리먼트가 있는지 확인. 엘리먼트가 하나 이상 셀렉터와 일치하면 true를, 그렇지 않으면 false를 반환 예제) var hasImage = $('*').is('img'); 설명) 현제 페이지에 이미지 엘리먼트가 있으면 hasImage 변수의 값을 true로 설정
end()	jQuery 커맨드 체인에서 사용하며 이전 확장 집합으로 돌아감 예제) $('img').clone().appendTo('#somewhere').end().addClass('beenCloned'); 설명) 페이지의 모든 <img> 엘리먼트로 구성된 원본 확장 집합을 close() 메서드를 통해 복사본 확장 집합을 생성한 뒤, 복사본인 두 번째 확장 집합을 반환한다. 복사본 확장 집합에 appendTo() 커맨드를 수행한 뒤, end() 커맨드를 통해 현재 확장 집합(복사본 확장 집합)에서 앞으로 돌아가서 이전 확장 집합(원본 확장 집합)을 반환하고, 원본 확장 집합에 addClass() 커맨드를 수행
andSelf()	커맨드 체인에서 이전 확장 집합 두 개를 하나로 합침