[jQuery] 04_필터링 선택자

jQuery의 필터링 선택자에 대해 알아보자

잠깐!

들어가기 전에 파일이 바뀔 때마다 반드시 라이브러리 연결해 주기

<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="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <!-- 온라인 방식 -->
</head>

필터링 관련 선택자 및 메소드

필터 관련 선택자

👉🏻 선택자:first => 첫 번째
👉🏻 선택자:last => 마지막
👉🏻 선택자:even => 짝수 번째 (기준은 0번부터 시작점이 잡힌다!)
👉🏻 선택자:odd => 홀수 번째

    <!-- table>tr*5 + Enter -->
    <table border="1">
        <tr>
            <td>이름</td>
            <td>혈액형</td>
            <td>거주지</td>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>A형</td>
            <td>서울</td>
        </tr>
        <tr>
            <td>김영희</td>
            <td>B형</td>
            <td>경기도</td>
        </tr>
        <tr>
            <td>이순신</td>
            <td>O형</td>
            <td>부산</td>
        </tr>
        <tr>
            <td colspan="2">총인원</td>
            <td>3명</td>
        </tr>
    </table>

    <script>
        $(function () {

            $("tr:first").css("backgroundColor", "black").css("color", "white");
            $("tr:last").css({backgroundColor:"red", color:"white"});

            // 우리 눈에 속성명 컬럼은 1번째 같지만 컴퓨터 기준으로는 0번째로 잡힘 (시작점: 0)
            // 즉 0, 2, 4번째에 속성이 먹힌 것
            $("tr:even").css("backgroundColor", "lightgray");

            $("tr:odd").css("backgroundColor", "yellow");

        });
    </script>

필터링과 관련된 메소드

기준이 되는 요소 중에서 특정요소들만 걸러서 선택해 주는 메소드
👉🏻 태그명:first() : 태그 요소 중 첫 번째 것을 선택

👉🏻 태그명:last() : 태그 요소 중 마지막 것을 선택

👉🏻 태그명:filter() : 태그명일 뿐만 아니라 괄호() 안에 새로운 조건을 더해서 모두 충족하는 것만 선택

👉🏻 태그명:eq() : 괄호() 안에 인덱스를 제시하고 태그명의 인덱스 순번에 해당하는 것만 선택

👉🏻 태그명:not() : 태그명이 아닌 것만 선택

👉🏻 태그명.text() : 선택된 요소의 innerText와 관련된 기능을 수행

<!-- h4[class=test]{test-$}*6 + Enter -->
    <h4 class="test">test-1</h4>
    <h4 class="test">test-2</h4>
    <h4 class="test">test-3</h4>
    <h4 class="test">test-4</h4>
    <h4>test-5</h4>
    <h4 class="test">test-6</h4>

    <script>

        $(function() {

            // h4 요소들 중에서 가장 처음 것을 선택
            // $("h4:first").css("font-size", "20px"); 와 똑같음
            $("h4").first().css("font-size", "20px");

            // h4 요소들 중에서 가장 마지막 것을 선택
            //$("h4:last").css("font-size", "30px");
            $("h4").last().css("font-size", "30px");

            // 추가적인 조건을 제시하는 filter() 메소드
            // h4 요소들 중에서 클래스명이 test인 것들만 선택
            // $("h4[class=test]").html("ㅋㅋㅋㅋㅋ"); 와 똑같음
            $("h4").filter(".test").html("ㅋㅋㅋㅋㅋ");

            // 아닌 것만 선택하는 not()
            // h4 요소들 중에서 클래스명이 test가 아닌 것들만 선택
            $("h4").not(".test").css("color", "red");

            // 인덱스를 제시할 수 있는 eq() 메소드 => 0이 시작점
            // h4 요소들 중에서 2번째 요소를 선택
            $("h4").eq(2).text("eq로 선택됨");
            // .text(): 선택된 요소의 innerText와 관련된 기능을 수행하는 메소드

        });

    </script>