[jQuery] 필터링과 관련된 선택자 및 메소드

필터링 관련 선택자

<table border="1">
    <tr>
        <td>이름</td>
        <td>혈액형</td>
        <td>거주지</td>
    </tr>
    <tr>
        <td>박지원</td>
        <td>B</td>
        <td>파주</td>
    </tr>
    <tr>
        <td>남이</td>
        <td>B</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>4명</td>
    </tr>
</table>

<script>
    $(function(){
        $("tr:first").css("backgroundColor", "lightblue").css("color", "white");
        $("tr:last").css({backgroundColor:"lightyellow", color:"purple"});
        $("tr:even").css("backgroundColor", "lightgrey");
        $("tr:odd").css("backgroundColor", "lightpink");
    });
</script>

 

 

 

 

필터링 관련 메소드

   : 기준이 되는 요소 중 특징 요소만 걸러서 선택해준다.

  - first(), last(), 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");  // test-1에 해당
        $("h4").last().css("font-size", "30px"); // test-6에 해당
        $("h4").filter(".test").html("선택받았다."); 
        // h4 요소들 중 클래스명이 test인 요소들만 html 변경(test-5만 제외)
        $("h4").not(".test").css("backgroundColor", "lightblue");
        // h4 요소들 중 클래스명이 test가 아닌 요소(test-5에 해당)
        $("h4").eq(2).text("eq로 선택되었다."); 
        // h4 요소 중 2번째 요소 선택(0부터 시작)(test-3에 해당)
        // .text(): innerText와 관련된 기능
    });
</script>