jQuery - 탐색선택자 본문
반응형
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() 예제는 콘솔에 출력되는거 아시죠?
반응형
'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