728x90
필터 선택자
선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다.
01. 필터 선택자 종류
| 선택자 종류 | 설명 | |
|---|---|---|
| :even | $("tr:even") | tr 요소 중 짝수 행만 선택합니다. |
| :odd | $("tr:odd") | tr 요소 중 홀수 행만 선택합니다. |
| :first | $("td:first") | 첫 번째 td 요소를 선택합니다. |
| :last | $("td:last") | 마지막 번째 td 요소를 선택합니다. |
| :header | $(":header") | 헤딩(h1~h6) 요소를 선택합니다. |
| :eq() | $("li:eq(0)") | index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다. |
| :gt() | $("li:gt(0)") | index가 0보다 큰 li 요소들을 선택합니다. |
| :lt() | $("li:lt(2)") | index가 2보다 작은 li 요소들을 선택합니다. |
| :not() | $("li:not(.bg)") | li요소 중에서 class명 bg가 아닌 li 요소를 선택합니다. |
| :root() | $(":root") | html을 의미합니다. |
| :animated() | $(":animated") | 움직이는 요소를 선택합니다. |
01-1. 필터 선택자 예시
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background", "red");
$("tr:odd").css("background", "orange");
$("td:first").css("background", "yellow");
$("td:last").css("background", "green");
$(":header").css("background", "blue");
$("li:eq(0)").css("background", "navy");
$("li:gt(0)").css("background", "purple");
$("li:lt(3)").css("border", "4px solid gray");
$(":root").css("background", "lightgray");
(function upDown(){
$("h2").slideToggle(2000,upDown);
})();
$(":animated").css("border","4px solid darked");
});
</script>
02. 자식 필터 선택자
자식 필터 선택자 중 'child'가 붙은 선택자는 요소가 순차적으로 나열되어 있을 때 사용하고, 'of-type'이 붙은 선택자는 요소가 순차적으로 나열되어 있지 않아도 동일 요소이면 선택이 가능하다는 점을 이해한 후 내용을 살펴보면 자식 필터 선택자를 이해하는데 도움이 될 것입니다.
| 선택자 종류 | 설명 | |
|---|---|---|
| :first-child | $("span:first-child") | 첫 번째 span 요소를 선택합니다. |
| :last-child | $("span:last-child") | 마지막 span 요소를 선택합니다. |
| :first-of-type | $("span:first-of-type") | span 요소 중에서 첫 번째 span 요소를 선택합니다. |
| :last-of-type | $("span:last-of-type") | span 요소 중에서 마지막 span 요소를 선택합니다. |
| :nth-child() | $("span:nth-child(2)") | 두 번째 span 요소를 선택합니다. nth-child(2n)은 2, 4, 6, ...번째 요소를 선택하고, nth-child(2n+1)은 1, 3, 5, ...번째 요소를 선택합니다. |
| :nth-last-child() | $("span:nth-last-child(2)") | 마지막에서 두 번째 span 요소를 선택합니다. |
| :nth-of-type() | $("span:nth-of-type(2)") | span 요소 중에서 두 번째 span 요소를 선택합니다. |
| :nth-last-of-type() | $("span:nth-last-of-type(2)") | span 요소 중 마지막에서 두 번째 span 요소를 선택합니다. |
| :only-child | $("div > span:only-child") | div의 자식 요소에서 오직 span 요소가 하나만 있는 span 요소를 선택합니다. |
| :only-of-child | $("div > span:only-of-child") | div의 자식 요소에서 span 요소가 하나만 있는 span 요소를 선택합니다. |
02-1. 자식 필터 선택자 예시
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("#m1 > span:first-child").css("border", "2px solid red");
$("#m1 > span:last-child").css("border", "2px solid red");
$("#m2 > span:first-of-type").css("border", "2px solid orange");
$("#m2 > span:last-of-type").css("border", "2px solid orange");
$("#m3 > span:nth-child(1)").css("border", "2px solid yellow");
$("#m3 > span:nth-last-child(1)").css("border", "2px solid yellow");
$("#m4 > span:nth-of-type(1)").css("border", "2px solid green");
$("#m4 > span:nth-last-of-type(1)").css("border", "2px solid green");
$("#m5 > span:only-child").css("border", "2px solid blue");
$("#m6 > span:only-of-type").css("border", "2px solid navy");
})
</script>
03. 콘텐츠 필터 선택자
| 선택자 종류 | 설명 | |
|---|---|---|
| :contains() | $("p:contains('html')") | p 요소 중에서 'html' 텍스트를 포함하고 있는 p 요소를 선택합니다. |
| :empty | $("div:empty") | div 요소 중에서 자식 요소가 없는 div 요소를 선택합니다. |
| :parent | $("span:parent") | span 요소 중에서 자식 요소가 있는 span 요소를 선택합니다. |
| :has() | $("section:has(article)") | section 요소 중에서 article을 하위 요소로 가지고 있는 section 요소를 선택합니다. |
03-1. 콘텐츠 필터 선택자 예시
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("#m1 > p:contains('html')").css("border", "4px solid red");
$("#m1 > p:empty").css("border", "4px solid orange");
$("#m2 > span:parent").css("border", "4px solid yellow");
$("#m3 > section:has(article)").css("border", "4px solid green");
})
</script>
04. 폼 필터 선택자
| 선택자 종류 | 설명 | |
|---|---|---|
| :text | $("input:text") | <input type="text"> 요소를 선택합니다. |
| :password | $("input:password") | <input type="password"> 요소를 선택합니다. |
| :image | $("input:image") | <input type="image"> 요소를 선택합니다. |
| :file | $("input:file") | <input type="file"> 요소를 선택합니다. |
| :button | $(":button") | <input type="button">, <button> 요소를 선택합니다. |
| :checkbox | $("input:checkbox") | <input type="checkbox"> 요소를 선택합니다. |
| :radio | $("input:radio") | <input type="radio"> 요소를 선택합니다. |
| :submit | $("input:submit") | <input type="submit"> 요소를 선택합니다. |
| :reset | $("input:reset") | <input type="reset"> 요소를 선택합니다. |
| :input | $(":input") | 모든 <input> 요소를 선택합니다. |
| :checked | $("input:checked") | <input> 요소에 checked 속성이 있는 요소를 선택합니다. |
| :selected | $("option:selected") | <option> 요소에 selected 속성이 있는 요소를 선택합니다. |
| :focus | $("input:focus") | 현재 <input>에 포커스가 있는 요소를 선택합니다. |
| :disabled | $("input:disabled") | <input> 요소에 disabled 속성이 있는 요소를 선택합니다. |
| :enabled | $("input:enabled") | <input> 요소 중 disabled가 아닌 요소를 선택합니다. |
04-1. 폼 필터 선택자 예시
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("input:text").css("background", "red");
$("input:password").css("background", "orange");
$(":button").css("background", "yellow");
$("input:checked + label").css("background", "green");
$("option:selected").css("color", "blue");
$("textarea:disabled").css("background", "pink");
})
</script>
05. 가시성 필터 선택자
| 선택자 종류 | 설명 | |
|---|---|---|
| :hidden | div:hidden | div 요소 중 hidden인 요소를 선택합니다. |
| :visible | div:visible | div 요소 중 visible인 요소를 선택합니다. |
05-1. 가시성 필터 선택자 예시
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
console.log($("div:hidden").text());
$("div:visible").css("background", "orange");
});
</script>
728x90
반응형
'jQuery' 카테고리의 다른 글
| [jQuery]클래스 관련 메서드 (1) | 2022.09.02 |
|---|---|
| [jQuery]탐색 선택자 (3) | 2022.08.30 |
| [jQuery]속성 선택자 (3) | 2022.08.30 |
| [jQuery]기본 선택자 (2) | 2022.08.30 |
| [jQuery]소개 (5) | 2022.08.29 |
댓글