본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] 기본 필터 선택자

기본 필터 선택자

필터는 선태자 앞에 :(콜론)을 붙어 표현을 하며, 필터를 사용해 다양한 조건에 따라 선택할 수 있습니다.


기본 필터 선택자(Basic Filters)

기본 필터 선택자
종류 설명
:animated 선택된 집합에서 show, hide, slideDown, slideUp등의 애니메이션 태그를 선택합니다.
:eq(index) 선택된 태그들의 인덱스 번호를 통해 선택합니다.
:gt(index) 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 선택합니다.
:lt(index) 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 선택합니다.
:header 선택된 집합에서 제목 요소(h1~h6)들을 선택합니다.
:first 선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다.
:last 선택된 요소 중에서 마지막 번째 요소를 찾아 선택합니다.
:odd 선택된 요소 중에서 홀수 번째 요소를 찾아 선택합니다.
:even 선택된 요소 중에서 짝수 번째 요소를 찾아 선택합니다.
:not() 선택된 요소 중에서 현재 선택한 요소의 반대 요소를 선택합니다.
:root() 문서의 가장 기본 루트 요소를 선택합니다.
:lang() 선택된 요소 중에서 언어 속성 요소를 선택합니다.

Sample1

기본 필터 선택자 예제입니다.

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>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기