필터 선택자에 대해 알아보자! 무야호~~~~!

jQuery : 필터 선택자?

필터 선택자란 선택자에 ":"이 붙은 선택자를 필터 선택자로 명명하고 있어요!

---

필터 선택자 종류

선택자 종류	설명
: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요소를 선택하며, index는 0번이 첫 번째 요소입니다.
: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")	움직이는 요소를 선택합니다.

예시용 jquery 코드

$(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 darked");
});

예시용 코드펜