🍵 탐색 선택자
기본 선택자보다 더 정확하게 요소를 한번 더 탐색해 선택한다.
위치 탐색 선택자 : 배열 인덱스 번호를 사용해 선택
속성 탐색 선택자 : 배열에 담긴 요소 중 지정 속성과 값으로 선택
🍵 위치 탐색 선택자
기본 선택자로 선택한 요소는 배열에 담긴다. ★
배열의 인덱스로 더 정확하게 선택한다.
[선택자 종류]
-
$('요소선택 : first') 또는 $('요소선택').first()
선택 요소 중 첫번째 -
$('요소선택 : last') 또는 $('요소선택').last()
선택 요소 중 마지막 -
$('요소선택 : odd'), $('요소선택 : even')
짝수, 홀수 번째 요소 선택 -
$('요소선택 : first-of-type'), $('요소선택 : last-of-type')
형제관계가 서로 다른 태그일 경우 첫번째 / 마지막 태그 선택 -
$('요소선택 : nth-of-type(숫자)'), $('요소선택 : nth-of-child(숫자)')
형제 중 특정 위치 형제 선택 -
$('요소선택 : only-child')
부모 내 자식이 하나일 때 그 자식 선택 -
$('요소선택 : eq(인덱스 번호)') 또는 $('요소선택').eq(인덱스 번호) ★
인덱스 번호에 해당하는 태그 선택 -
$('요소선택 : gt(인덱스 번호)'), $('요소선택 : lt(인덱스 번호)')
gt는 해당 인덱스보다 큰 번호를 참조하는 요소들 선택
lt는 해당 인덱스보다 작은 번호 참조 요소들 선택 -
$('요소선택').slice(인덱스 번호)
인덱스 번호부터 마지막까지 모든 요소를 잘라옴. slice(번호1, 번호2)로 범위를 제한할 수 있음.
🍵 컨텐츠 탐색 선택자
요소 또는 속성 포함 여부에 따라 특정 요소 선택
[선택자 종류]
-
$("요소선택:contains('텍스트')")
선택 요소 중 텍스트 포함 태그 불러옴 -
$("요소선택").contents()
선택 요소의 하위 요소 중 가장 가까운 요소 -
$("요소선택:has(요소명)") or $("요소선택").has('요소명')
선택한 요소 안에 '요소명'인 자식 태그가 있으면 선택 -
$("요서th선택:not(:'제외요소')") or $("요소선택").not(:'제외요소')
선택 요소 중 제외요소를 제외한 나머지 불러옴 -
$("요소선택").filter('필터 요소')
선택 요소 중 지정한 요소만 필터링 -
$("요소선택").find('찾을 요소')
선택 요소 안의 찾을 요소 찾아서 선택 -
$("요소선택").closest('요소선택2')
선택한 요소의 상위 요소 중 가장 가까운 부모 요소 선택 -
$("요소선택").탐색선택자().end() ★기능사 시험
바로 앞의 필터링 요소를 삭제
<script>
$(function () {
// #inner_1의 p태그 중 내용1이라는 컨텐츠 내용을 포함하는 태그 선택
$("#inner_1 p:contains(내용1)").css({ border: "1px solid salmon" });
// #outer_wrap의 하위 요소의 텍스트와 태그 노드 선택
$("#outer_wrap").contents().css({ border: "1px solid skyblue" });
// #inner_1의 p태그 중 strong태그 포함하는 p태그 선택
$("#inner_1 p:has(strong)").css({ color: "tomato" });
// #inner_2의 p태그 중 첫번째 요소 제외하고 선택
$("#inner_2 p:not(':first')").css({ color: "lightgreen" });
// #inner_2의 p태그 중 인덱스 번호 2번에 위치한 태그 선택
$("#inner_2 p").eq(2).css({ color: "blue" });
// end메서드가 앞의 .eq(2)를 취소한다. 결국 #inner_2안의 모든 p태그 색 변경
$("#inner_2 p").eq(2).end().css({ color: "pink" });
// #inner_3 안 요소 중 .txt1 요소 선택 (부모 안 자식)
$("#inner_3").find(".txt1").css({ backgroundColor: "skyblue" });
// #inner_3위 p태그 중 .txt2 요소 선택 (형제요소끼리)
$("#inner_3 p").filter(".txt2").css({ backgroundColor: "pink" });
$("#inner_4 p")
.filter(function (idx, obj) {
console.log(idx, obj);
// 짝수 인덱스 번호 찾기
return idx % 2 == 0;
})
.css({ color: "red" });
});
</script>🍵 is메서드
선택한 요소의 상태가 지정한 속성과 일치하면 true 아니면 false
주로 입력요소인 input과 같은 태그에 많이 사용
[기본형]
$("요소선택").is(":checked / :selected / :visible / :hidden / :animated")
- checked : 체크박스 또는 라디오 버튼이 체크되어 있으면 true
- selected : 셀렉트 박스의 옵션이 선택된 상태면 true
- visible : 선택 요소가 눈에 보이면 true
- hidden : 선택 요소가 숨겨진 상태면 true
- animated : 선택 요소가 애니메이션 동작 상태면 true
<script>
$(function () {
// #inner_1의 p태그 중 인덱스 0번 태그가 보이는지
let result1 = $("#inner_1 p").eq(0).is(":visible");
console.log(result1); // 화면에 보이므로 true
let result2 = $("#inner_1 p").eq(1).is(":visible");
console.log(result2); // 숨겨져 있으므로 false
// #chk1이 체크 상태인지 확인
let result3 = $("#chk1").is(":checked");
console.log(result3); // true
let result4 = $("#chk2").is(":checked");
console.log(result4); // false
});
</script>