본문 바로가기
jQuery

jQuery 탐색 선택자

by 코터틀 2022. 8. 30.
반응형

jQuery 탐색 선택자


탐색 선택자

선택자 종류 설명
children() $("div").children() div 요소의 자식 요소를 선택합니다.
parent() $("p").parent() p 요소의 부모 요소를 선택합니다.
parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다.
closet() $("p").closet("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("p") div.m 이전 요소부터 p 요소 다음 요소까지를 선택합니다.
siblings() $("div").siblings("p") div 요소의 형제 요소 중 p 요소를 선택합니다.
find() $("div").siblings("p") div 요소의 형제 요소 중 p 요소를 선택합니다.
filter() $("div").filter(".m") div 요소 중 class가 "m"인 요소를 선택합니다.
not() $("div").not(".m") div 요소 중 class가 "m"이 아닌 요소를 선택합니다.
has() $("div").has("span") div 요소 중 span 요소를 포함하고 있는 요소를 선택합니다.
eq() $("div").eq(0) div 요소중 index가 0인 요소들을 선택합니다.
index 0번은 첫 번째 요소입니다.
gt() $("div").gt(0) index가 0보다 큰 div 요소들을 선택합니다.
lt() $("div").lt(3) index가 3보다 작은 div 요소들을 선택합니다.

기타 탐색 선택자

선택자 종류 설명
add() $("div").add("p")
div 요소와 p 요소를 선택한다.
addBack() $("div").chlildren("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 요소가 맞습니다");
}
반응형

'jQuery' 카테고리의 다른 글

jQuery 속성 관련 메서드  (9) 2022.09.04
jQuery 클래스 관련 메서드  (10) 2022.09.04
jQuery 필터 선택자  (10) 2022.08.30
jQuery 속성 선택자  (6) 2022.08.30
jQuery 기본 선택자  (4) 2022.08.30

댓글


광고 준비중입니다.