728x90
📎 jQuery : 필터 선택자란?
선택자에 ':'이 붙은 선택자
➰ 필터 선택자의 종류
| 선택자 종류 | 설명 | ||
|---|---|---|---|
| :even | $("tr:even") | tr 요소 중 짝수 행만 선택합니다. | |
| :odd | $("tr:odd") | tr 요소 중 홀수 행만 선택합니다. | |
| :first | $("tr:first") | 첫 번째 td 요소를 선택합니다. | |
| :last | $("tr: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") | 움직이는 요소를 선택합니다. | |
📎 jquery 필터 선택자 사용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>기본 필터 선택자</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #333;
}
li {
color: white;
margin: 5px;
}
</style>
<script src="jquery-3.3.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 darkred");
});
</script>
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<table>
<caption>기본 필터 선택자</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
<ul>
<li class="bg">내용1</li>
<li class="bg">내용2</li>
<li class="bg">내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
⭐️ 결과 ⭐️
➰ 자식 필터 선택자
: '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-type | $("div > span:only-of-type") | div의 자식 요소에서 span 요소가 하나만 있는 span 요소를 선택합니다. | |
📎 jquery 자식 필터 선택자 사용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>기본 필터 선택자</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #333;
}
li {
color: white;
margin: 5px;
}
</style>
<script src="jquery-3.3.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 darkred");
});
</script>
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<table>
<caption>기본 필터 선택자</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
<ul>
<li class="bg">내용1</li>
<li class="bg">내용2</li>
<li class="bg">내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
⭐️ 결과 ⭐️
➰ 콘텐츠 필터 선택자
| 선택자 종류 | 설명 | ||
|---|---|---|---|
| :contains() | $("p:contains('html')") | p 요소 중에서 'html'텍스트를 포함하고 있는 p요소를 선택합니다. | |
| :empty | $("div:empty") | div 요소 중에서 자식 요소가 없는 div 요소를 선택합니다. | |
| :parent | $("span:parent") | span 요소 중에서 자식 요소가 있는 span 요소를 선택합니다. | |
| :has() | $("section:has(article)") | section 요소 중에서 article을 하위 요소로 가지고 있는 section 요소를 선택합니다. | |
📎 jquery 콘텐츠 필터 선택자 사용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>콘텐츠 필터 선택자</title>
<style>
* {
margin: 5px;
}
#m1 > p:last-child{
height: 20px;
}
span {
display: inline-block;
height: 20px;
}
</style>
<script src="jquery-3.3.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>
</head>
<body>
<div id="m1">
<p>html, css, javascript</p>
<p>html5와 웹표준</p>
<p></p>
</div>
<div id="m2">
<span></span>
<span>내용1</span>
</div>
<div id="m3">
<section>
<article>내용2_1</article>
</section>
<section>
<div>
<article>내용2_2</article>
</div>
</section>
</div>
</body>
</html>
⭐️ 결과 ⭐️
➰ 폼 필터 선택자
| 선택자 종류 | 설명 | ||
|---|---|---|---|
| :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="techeckboxxt"> 요소를 선택합니다. | |
| :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가 아닌 요소를 선택합니다. | |
📎 jquery 폼 필터 선택자 사용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form 필터 선택자</title>
<script src="jquery-3.3.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>
</head>
<body>
<div><input type="text"></div>
<div><input type="password"></div>
<div><button>확인</div>
<div><input type="checkbox" id="css" checked="checked"><label for="css">css</label></div>
<div>
<select>
<option>과목선택</option>
<option>javascript</option>
<option selected="selected">jQuery</option>
</select>
<textarea cols="20" id="" rows="5" disabled="disabled">javascript</textarea>
</div>
</body>
</html>
⭐️ 결과 ⭐️
➰ 가시성 필터 선택자
| 선택자 종류 | 설명 | ||
|---|---|---|---|
| :hidden | div:hidden | div 요소 중 hidden인 요소를 선택합니다. | |
| :visible | div:visible | div 요소 중 visible 요소를 선택합니다. | |
📎 jquery 가시성 필터 선택자 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>visibility 필터 선택자</title>
<style>
#vis {
display: none;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
console.log($("div:hidden").text());
$("div:visible").css("background","orange");
});
</script>
</head>
<body>
<div id="vis">내용1</div>
<div>내용2</div>
</body>
</html>
⭐️ 결과 ⭐️
'jQuery' 카테고리의 다른 글
| 클래스 관련 메서드 (3) | 2022.09.04 |
|---|---|
| jQuery : 탐색 선택자 (12) | 2022.08.31 |
| jQuery : 속성 선택자 (16) | 2022.08.30 |
| jQuery : 기본 선택자 (14) | 2022.08.30 |
| jQuery (14) | 2022.08.29 |
댓글