jQuery 03. 필터링 관련 선택자

1. 필터 관련 선택자 

$("태그명:first | last") : 동일한 태그중 첫번째| 마지막 요소 선택
$("태그명:even | odd") : 동일한 태그 중 짝수번째 | 홀수번째 인덱스행 선택

    <table border="1">
        <tr>
            <th>이름</th>
            <th>혈액형</th>
            <th>거주지</th>
        </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>
            <th colspan="2"> 총인원</th>
            <td>3명</td>
        </tr>
    </table>

     <script>
        $(function(){
            $("tr:first").css("backgroundColor","coral").css("color","white");
            $("tr:last").css({backgroundColor: "green",color: "white"});
            $("tr:even").css("backgroundColor","lightgray"); // even : 짝수번째 인덱스행 선택 
            $("tr:odd").css("backgroundColor","beige"); // odd : 홀수번째 인덱스행 선택

        })
     </script>

이름	혈액형	거주지
홍길동	A형	서울
김영희	B형	경기도
김상순	O형	부산
총인원		3명

 

2. 필터 관련 메소드 

 기준이 되는 요소들 중에서 특정 요소만을 걸러서 선택해주는 메소드 

first(), latst(), filter(), eq(인덱스), not()

<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").first().css("font-size","20px");
            $("h4").last().css("font-size","30px");
            $("h4").filter(".test").html("ㅋㅋㅋㅋㅋ"); //filter : 클래스가 test인 요소 
            $("h4").not(".test").css("color","red"); // not : class가 test가 아닌 요소 선택
            $("h4").eq(4).html("eq로 선택됨");

        })
     </script>

test-1

test-2

test-3

test-4

test-5

test-6