기본 필터 선택자
필터는 선태자 앞에 :(콜론)을 붙어 표현을 하며, 필터를 사용해 다양한 조건에 따라 선택할 수 있습니다.
기본 필터 선택자(Basic Filters)
기본 필터 선택자
| 종류 | 설명 |
|---|---|
| :animated | 선택된 집합에서 show, hide, slideDown, slideUp등의 애니메이션 태그를 선택합니다. |
| :eq(index) | 선택된 태그들의 인덱스 번호를 통해 선택합니다. |
| :gt(index) | 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 선택합니다. |
| :lt(index) | 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 선택합니다. |
| :header | 선택된 집합에서 제목 요소(h1~h6)들을 선택합니다. |
| :first | 선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다. |
| :last | 선택된 요소 중에서 마지막 번째 요소를 찾아 선택합니다. |
| :odd | 선택된 요소 중에서 홀수 번째 요소를 찾아 선택합니다. |
| :even | 선택된 요소 중에서 짝수 번째 요소를 찾아 선택합니다. |
| :not() | 선택된 요소 중에서 현재 선택한 요소의 반대 요소를 선택합니다. |
| :root() | 문서의 가장 기본 루트 요소를 선택합니다. |
| :lang() | 선택된 요소 중에서 언어 속성 요소를 선택합니다. |
Sample1
기본 필터 선택자 예제입니다.
결과
기본 필터 선택자
- :eq()
- :gt()
- :lt()
- :header
- :first
- :last
- :odd
- :even
- :not()
- :root()
- :lang()
jquery
$(".list li:eq(4)").addClass("rLine");
$(".list li:gt(4)").addClass("rLine");
$(".list li:lt(4)").addClass("rLine");
$(".list li:first").addClass("rLine");
$(".list li:odd").addClass("rLine");
$(".list li:even").addClass("rLine");
$(".list li:not(:eq(4))").addClass("rLine");
html
<h3>기본 필터 선택자</h3>
<div class="list">
<ul>
<li>:eq()</li>
<li>:gt()</li>
<li>:lt()</li>
<li>:header</li>
<li>:first</li>
<li>:last</li>
<li>:odd</li>
<li>:even</li>
<li>:not()</li>
<li>:root()</li>
<li>:lang()</li>
</ul>
</div>Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
.choice a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>기본 필터 선택자</h3>
<div class="list">
<ul>
<li>:eq()</li>
<li>:gt()</li>
<li>:lt()</li>
<li>:header</li>
<li>:first</li>
<li>:last</li>
<li>:odd</li>
<li>:even</li>
<li>:not()</li>
<li>:root()</li>
<li>:lang()</li>
</ul>
</div>
<div class="choice">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 <em>:eq(4)</em>를 선택합니다.</a>
<a href="#" class="btn2">클릭하면 <em>:gt(4)</em>를 선택합니다.</a>
<a href="#" class="btn3">클릭하면 <em>:lt(4)</em>를 선택합니다.</a>
<a href="#" class="btn4">클릭하면 <em>:first</em>를 선택합니다.</a>
<a href="#" class="btn5">클릭하면 <em>:last</em>를 선택합니다.</a>
<a href="#" class="btn6">클릭하면 <em>:odd</em>를 선택합니다.</a>
<a href="#" class="btn7">클릭하면 <em>:even</em>를 선택합니다.</a>
<a href="#" class="btn8`">클릭하면 <em>:not</em>를 선택합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice .off1").on("click", function(e){
e.preventDefault();
$(".list li").removeClass("rLine");
});
$(".choice .btn1").on("click", function(e){
e.preventDefault();
$(".list li:eq(4)").addClass("rLine");
});
$(".choice .btn2").on("click", function(e){
e.preventDefault();
$(".list li:gt(4)").addClass("rLine");
});
$(".choice .btn3").on("click", function(e){
e.preventDefault();
$(".list li:lt(4)").addClass("rLine");
});
$(".choice .btn4").on("click", function(e){
e.preventDefault();
$(".list li:first").addClass("rLine");
});
$(".choice .btn5").on("click", function(e){
e.preventDefault();
$(".list li:last").addClass("rLine");
});
$(".choice .btn6").on("click", function(e){
e.preventDefault();
$(".list li:odd").addClass("rLine");
});
$(".choice .btn7").on("click", function(e){
e.preventDefault();
$(".list li:even").addClass("rLine");
});
$(".choice .btn8").on("click", function(e){
e.preventDefault();
$(".list li:not(:eq(4))").addClass("rLine");
});
</script>
</body>
</html>
