본문 바로가기
jQuery

필터 선택자

by 코딩대원 2022. 8. 30.

jQuery 필터 선택자

jQuery 필터 선택자에 대해 알아보는 시간을 가지도록 하겠습니다.
필터 선택자에는 자식 필터 선택자, 콘텐츠 필터 선택자, 폼 필터 선택자, 가시성 필터 선택자가 있습니다.
선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다.

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. 예제

{
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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 darked");
            });
        </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>
}

01-2. 결과물

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-type $("div > span:only-type") div의 자식 요소에서 span 요소가 하나만 있는 span 요소를 선택합니다.

02-1. 예제

{
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자식 필터 선택자</title>
    <style>
        span {
            margin: 5px;
            display: inline-block;
        }
    </style>
    <script src="jquery-3.3.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>
</head>
<body>
    <div id="m1">
        <span>내용1_1</span>
        <span>내용1_2</span>
        <span>내용1_3</span>
    </div>
    <div id="m2">
        <strong>내용2_1</strong>
        <span>내용2_2</span>
        <strong>내용2_3</strong>
        <span>내용2_4</span>
    </div>
    <div id="m3">
        <span>내용3_1</span>
        <span>내용3_2</span>
        <span>내용3_3</span>
    </div>
    <div id="m4">
        <strong>내용4_1</strong>
        <span>내용4_2</span>
        <strong>내용4_3</strong>
        <span>내용4_4</span>
        <strong>내용4_5</strong>
        <span>내용4_6</span>
    </div>
    <div id="m5">
        <span>내용5_1</span>
    </div>
    <div id="m6">
        <strong>내용6_1</strong>
        <span>내용6_2</span>
    </div>
</body>
</html>
}

02-2. 결과물

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. 예제

{
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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>
}

03-2. 결과물

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")
:focus $("input:focus") 현재<input>에 포커스가 있는 요소를 선택합니다.
:disabled $("input:disabled") <input>요소에 disabled 속성이 있는 요소를 선택합니다.
:enabled $("input:enabled") <input> 요수 중 disabled가 아닌 요소를 선택합니다.

04-1. 예제

{
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>필터 선택자</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>확인</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" rows="5" disabled="disabled">javascript</textarea>
        </div>
    </body>
    </html>
}

04-2. 결과물

05. 폼 필터 선택자

선택자 종류 설명
:hidden div:hidden div 요소 중 hidden인 요소를 선택합니다.
:visible div:visible div 요소 중 visible인 요소를 선택합니다.

05-1. 예제

{
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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>
}

05-2. 결과물

'jQuery' 카테고리의 다른 글

jQuery 클래스 메서드  (3) 2022.09.03
탐색 선택자  (4) 2022.08.30
속성 선택자  (4) 2022.08.30
기본 선택자  (4) 2022.08.30
jQuery 기본 개념  (6) 2022.08.29

관련글

댓글

HTML

HTML

자세히 보기
CSS

CSS

자세히 보기

JAVASCRIPT

자세히 보기

티스토리툴바