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 요소가 맞습니다"); } |