Animated Rainbow Nyan Cat
본문 바로가기
jQuery

필터 선택자

by 이유나1 2022. 8. 30.
728x90
반응형

 

jQuery 필터 선택자

선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다.
선택자 종류 설명
: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") 움직이는 요소를 선택합니다.

예제1

<!DOCTYPE html>
<html lang="ko">

<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.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", "lighthray");
            (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 요소를 선택합니다.

예제1

<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>

콘텐츠 필터 선택자

선택자 종류 설명
:contains() $("p:contains('html')") p 요소 중애서 'html' 텍스트를 포함하고 있는 p요소를 선택합니다.
:empty $("div:empty") div 요소 중에서 자식 요소가 없는 div 요소를 선택합니다.
:parent $("span:parent") span 요소 중에 자식 요소가 있는 span 요소를 선택합니다.
:has() $("section:has(article)") section 요소 중에서 article을 하위 요소로 가지고 있는 section 요소를 선택합니다.

예제1

<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>

폼 필터 선택자

선택자 종류 설명
: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> 요소중 enabled가 아닌 요소를 선택합니다.

예제1

<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>

가시성 필터 선택자

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

예제1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>vidibility 필터 선택자</title>
    <script src="jquery-3.6.1.min.js"></script>
    <style>
        #vis {
            display: none;
        }
    </style>
    <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>
728x90

'jQuery' 카테고리의 다른 글

클래스 관련 메서드  (1) 2022.09.03
탐색 선택자  (5) 2022.08.30
속성 선택자  (4) 2022.08.30
기본선택자  (4) 2022.08.30
jQuery  (3) 2022.08.29

관련글

댓글

/

JA
/

HTML
/

CSS
광고준비중입니다.

티스토리툴바