jQuery - 탐색 선택자

탐색 선택자

JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다.

기본 탐색 선택자종류

선택자 종류	설명
children()	$('div').children()	div 요소의 자식 요소를 선택합니다.
parent()	$('p').parent()	p 요소의 부모 요소를 선택합니다.
parents()	$('p').parents('div')	p요소의 부모가 되는 모든 div요소를 선택합니다.
closest()	$('p').closest('div')	p요소의 부모가 되는 첫번째 div요소를 찾습니다.
next()	$('div.m').next()	div.m요소의 다음 요소를 선택합니다.
nextAll()	$('div.m').nextAll()	div.m요소의 다음 요소들을 모두 선택합니다.
nextUntil()	$('div.m').nextUntil('p')	div.m 다음 요소부터 p 요소 전까지의 요소를 선택합니다.
prev()	$('div.m').prev()	div.m 요소의 이전 요소를 선택합니다.
prevAll()	$('div.m').prevAll()	div.m 요소의 이전 요소들을 모두 선택합니다.
prevUntil()	$('div.m').prevUntil()	div.m 요소의 이전 요소부터 p요소 다음 요소까지를 선택합니다.
siblings()	$('div').siblings('p')	div 요소의 형제 요소 중 p요소를 선택합니다.
find()	$('div').find('span')	div 요소의 하위 요소 중 span 요소를 선택합니다.
filter()	$('div').filter('.m')	div 요소 중 class가 m인 요소를 선택합니다./td>
not()	$('div').not('.m')	div 요소 중 class가 m이 아닌 요소를 선택합니다./td>
has()	$('div').has('span')	div 요소 중 span 요소를 포함하고 있는 요소를 선택합니다./td>
eq()	$('div').eq(0)	div 요소 중 index가 0인 요소들을 선택합니다. index 0번은 첫 번째 요소입니다./td>
gt()	$('div').gt(0)	index가 0보다 큰 div 요소들을 선택합니다.
lt()	$('div').lt(3)	index가 3보다 작은 div 요소들을 선택합니다.

---

예시

---

기타 탐색 선택자

자식 필터 선택자는 기존 css에서 하셨던 nth child 방식과 흡사합니다.

선택자 종류	설명
add()	$('div').add('p') div 요소와 p 요소를 선택합니다.
addBack()	$('div').children('p').addBack() p 요소와 이전 선택요소 div를 선택합니다.
end()	$('div').find('span').css(...).end().find("em").css(...) $('div').find('span').css(...)의 실행이 끝나면 처음 선택자 $('div')로 다시 돌아와 $('div').find('em').css(...)가 실행됩니다.
is()	선택한 요소를 판별해 주는 선택자로 보통 if 문의 조건식에 사용됩니다. if("div").children().is("p")) { console.log("p요소가 맞습니다."); }

---

예시