[jQuery] DOM 요소 필터링 - 필터선택자

:button, :checkbox, :password  .  .  .           -> 이런식으로 요소별로 있음. 잘 안씀

 

- 위치기반

필터 선택자	설명
:first	첫 번째 요소 선택
:last	마지막 요소 선택
:first-child	첫 번째 자식 요소 선택
:last-child	마지막 자식 요소 선택
:only-child	형제가 없는 모든 요소 선택
:even	짝수 번째 요소 선택
:odd	홀수 번째 요소 선택

 

$(document).ready(function() {
		// #1. 짝수 번째 행 배경색(#ff66ff)
		$("#domTable tr:even").css("background", "#ff66ff");
		// #2. 홀수 번째 행 배경색(#33ffff)
		$("#domTable tr:odd").css("background", "#33ffff");
		// #3. 첫 번째 행 배경색(black), 글자색(white)
		$("#domTable tr:first").css("background", "black")
		.css("color", "white");
});

 

- 함수 기반

필터 선택자	설명
:not(filter)	filter가 아닌 모든 요소 선택
:contains(str)	텍스트 str을 포함하는 요소 선택
:nth-child(n)	n번째 자식 요소 선택
:eq(n)	n번째로 일치하는 요소 선택
:gt(n)	n번째 이후 요소 선택(n 제외)
:lt(n)	n번째 이전 요소 선택(n 제외)
:has(f)	f와 일치하는 하나 이상 요소 포함하는 요소 선택

$(document).ready(function() {
		$("tr:eq(0)").css("background","#000000").css("color", "white"); 
		$("td:nth-child(3n)").css("background", "#F9F9F9"); 
		$("td:nth-child(3n+1)").css("background", "#565656"); 
		$("td:nth-child(3n+2)").css("background", "#A9A9A9");
        	$("td:not(.myClass)").css("background", "#A9A9A9");
});