JQuery_탐색 선택자

<탐색 선택자>

기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색

 

 

 

1. 위치 탐색 선택자

: 기본 선택자로 선택한 요소는 배열에 담기고 배열의 인덱스를 통해 특정 요소 선택

 

• $("요소선택:eq(index)")
• $("요소선택".eq(index) : 선택요소 중 지정한 인덱스가 참조하는 요소

$("#menu li").eq(2).css("background-color","coral"); //인덱스 2번

• $("요소선택".lt(index) : 지정한 인덱스보다 작은 인덱스를 참조하는 요소 (지정 인덱스 미포함)

$("#menu li:lt(2)").css("background-color","yellow"); //인덱스 2보다 작은애들

• $("요소선택".gt(index) : 지정한 인덱스보다 큰 인덱스를 참조하는 요소 

$("#menu li:gt(2)").css("background-color","green");

• $("요소선택 :first-of-type") :선택한 요소의 무리 중 첫번째 요소
• $("요소선택 :first-of-type") :선택한 요소의 무리 중 마지막 요소

$("li:first-of-type").css({"background-color":"red"});

 

• $("요소선택:nth-child(숫자)") : 선택한 요소 중 지정한 숫자에 위치한 요소

$("#menu1 li:nth-child(1)").css({"background-color":"blue"}); //인덱스 번호가 아님

 

• $("요소선택:nth-child(숫자n)") : 지정한 배수에 위치한 요소
• $("요소선택:nth-last-child(숫자)") : 마지막 위치에서 지정한 숫자에 위치한 요소

$("#menu2 li:nth-last-child(5)").css({"background-color":"blue"}); //뒤에서 부터 위치한 순서

 

• $("요소선택").slice(start index, end index) : 지정구간의 인덱스 요소 선택

 $("#menu1 li").slice(1,3).css({"background-color":"blue"});//1이상3제외

 

 

 

2. 속성 상태 선택자

: 기본 선택자로 선택한 요소는 배열에 담기고 배열의 인덱스를 통해 특정 요소 선택