[jQuery] 4. 필터링 관련 선택자 및 메소드

1. 필터 관련 선택자

 

    <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>A형</td>
            <td>경기</td>
        </tr>
        <tr>
            <td colspan="2">총 인원</td>
            <td>3명</td>
        </tr>
    </table>

    <script>
        $(function(){
            $("tr:first").css("background","black").css("color","white");   // tr태그 중 첫번째 요소
            // $("tr:first-of-type").css("background","black").css("color","white");
            // css에서는 first-of-type이었는데 ...jQuery에서는 first 로 바뀌었다!
        
            $("tr:last").css("backgroundColor", "red").css('color','white');  // 마지막 요소
            $("tr:even").css("backgroundColor","lightgray");   // 짝수만. // 시작이 0부터여서 첫번째 행도 짝수라고 침
            $("tr:odd").css("backgroundColor","yellow");  // 홀수번째...
        
        })
    </script>

 

▶ $("tr:first").css("background","black").css("color","white");

== $("tr:first-of-type").css("background","black").css("color","white");

 

☞ tr태그 중 첫번째 요소

☞ css 에서는 first-of-type이었는데 ...

☞ jQuery에서는 first로 바뀐다!

 

 

 

 

2. 필터링과 관련된 메소드

- 기준이 되는 요소중에서 특정 요소만을 걸러서 선택해주는 메소드
- 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>
        $("h4").first().css("font-size", "30px");
        $("h4").last().css("font-size", "20px");

        $("h4").filter(".test").html("ㅋㅋㅋ");  // <h4> 태그중 클래스가 test인 것
        $("h4").not(".test").css("color","red"); // <h4> 태그중 클래스가 test가 아닌것
        
        // jquery 방식
        $("h4").eq(2).text("eq로 변경");   // <h4>태그 중 2번째 요소 text 변경
        
        // $("h4")[2].text("eq로 변경"); //  => 오류발생. js 방식이라서 [2]=>js 방식. 그래서 오류한다.
    

        // js 방식
        // $("h4")[2].innerHTML = "js로 변경";

    </script>

 

▶ <h4> 태그 중 클래스가 test인 것을 화면에 출력하는 것을 "ㅋㅋㅋ"으로 변경

$("h4").filter(".test").html("ㅋㅋㅋ");

 

 

▶ <h4> 태그 중 클래스가 test가 아닌 것

$("h4").not(".test").css("color","red");

 

 

▶ js 방식으로 출력값 변경하기

$("h4")[2].innerHTML = "js로 변경";

 

☞ 반환형이 js 객체냐 반환형이 jquery 객체인지.

☞ jquery로 값을 꺼내왔으면 메소드 체이닝이 가능하다!

 

=> 이것을 메소드 체이닝을 활용하여 jquery 로 처리할 수 있다. 이 경우, eq로 써야한다.

 

 

 

▶ jquery 방식으로 출력값 변경하기

$("h4").eq(2).text("eq로 변경");   // <h4>태그 중 2번째 요소 text 변경        // $("h4")[2].text("eq로 변경");        //  => 오류발생. js 방식이라서 [2]=>js 방식. 그래서 오류난다.

 

☞ eq방식은 jquery객체로 반환하여 jquery객체의 메소드(.text)를 활용할 수 있다. (메소드 체이닝)

 

☞ 반면, $("h4")[2] 는 js 객체로 반환을 하기 때문에 jquery객체의 메소드(.text)를 활용할 수 없으므로 오류가 발생한다.