본문 바로가기

jQuery - 탐색선택자 본문

jQuery

jQuery - 탐색선택자

개발자로 거듭나기 2022. 8. 30. 19:25
반응형

jQuery 탐색 선택자

jQuery의 탐색 선택자를 소개해드릴게요. 탐색선택자는 원하는 요소를 탐색하는 선택자 입니다.


jQuery 기본 탐색 선택자

선택자 종류 설명
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 요소들을 선택합니다.

결과

See the Pen jQuery by kim-0617 (@kim-0617) on CodePen.


반응형

jQuery 기타 탐색 선택자

선택자 종류 설명
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요소가 맞습니다.");
}

결과

is() 예제는 콘솔에 출력되는거 아시죠?

See the Pen Untitled by kim-0617 (@kim-0617) on CodePen.

반응형

'jQuery' 카테고리의 다른 글

jQuery - 클래스 메서드  (6) 2022.09.03
jQuery - 속성 선택자  (7) 2022.08.30
jQuery - 기본 선택자  (6) 2022.08.30
jQuery - 필터 선택자  (8) 2022.08.30
jQuery 연결하기  (15) 2022.08.29
Comments