제이쿼리 : 필터 선택자

728x90

제이쿼리 : 필터 선택자

지난 시간에 이어 오늘은 필터 선택자에 대하여 알아보도록 하겠습니다. 필터 선택자는 선택자에 ':'이 붙은 선택자를 말합니다.

1. 기본 필터 선택자

선택자 종류	설명
: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 요소를 선택합니다.
: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")	움직이는 요소를 선택합니다.

<!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>
</head>
<body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <table>
        <caption>기본 필터 선택자</caption>
        <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>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></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>
</body>
</html>

2. 자식 필터 선택자

자식 필터 선택자는 다른 선택자에 비하여 약간 어려울 수 있습니다. 자식 필터 선택자 중 '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 요소를 선택합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자식 필터 선택자</title>
    <style>
        span {
            margin: 5px;
            display: inline-block;
        }
    </style>
</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>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></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>
</body>
</html>

3. 콘텐츠 필터 선택자

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>콘텐츠 필터 선택자</title>
    <style>
        * {
            margin: 5px;
        }
        #m1 > p:last-child {
            height: 20px;
        }
        span {
            display: inline-block;
            height: 20px;
        }
    </style>
</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>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></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>
</body>
</html>

4. 폼 필터 선택자

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼 필터 선택자</title>
    <style>
        * {
            margin: 5px;
        }
        #m1 > p:last-child {
            height: 20px;
        }
        span {
            display: inline-block;
            height: 20px;
        }
    </style>
</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>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></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>
</body>
</html>

728x90

저작자표시

'JQuery' 카테고리의 다른 글

제이쿼리 : 클래스 관련 메서드 (3)	2022.09.04
제이쿼리 : 탐색 선택자 (5)	2022.09.01
제이쿼리 : 속성 선택자 (7)	2022.08.30
제이쿼리 : 기본 선택자 (6)	2022.08.30
제이쿼리 : 연결 방법 (10)	2022.08.29

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

🦙코딩보다 알파카🦙

제이쿼리 : 필터 선택자

제이쿼리 : 필터 선택자

1. 기본 필터 선택자

2. 자식 필터 선택자

3. 콘텐츠 필터 선택자

4. 폼 필터 선택자

'JQuery' 카테고리의 다른 글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

제이쿼리 : 필터 선택자

제이쿼리 : 필터 선택자

1. 기본 필터 선택자

2. 자식 필터 선택자

3. 콘텐츠 필터 선택자

4. 폼 필터 선택자

'JQuery' 카테고리의 다른 글

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역