[JS + jquery] 제이쿼리 탐색 선택자(위치 탐색 선택자)

1. 탐색 선택자 

탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중에서 원하는 요소를 한번 더 탐색해서 좀 더 정확하게 선택할 수 있다. 

탐색 선택자에는 배열의 인덱스를 사용해 선택하는 위치 탐색 선택자와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 속성 탐색 선택자가 있다. 

 

2. 위치 탐색 선택자 

 

1️⃣ first/last 선택자 

first 선택자는 선택된 요소 중 첫번 째 요소만 선택한다.

last 선택자는 선택된 요소 중 마지막 요소만 선택한다. 

$("요소 선택:first") or $("요소 선택").first() 

$("요소 선택:last") or $("요소 선택").last()

2️⃣ even/odd 선택자 

even 선택자는 선택한 요소 중 짝수 인덱스(즉 홀수 번째) 요소만 선택

odd 선택자는 선택한 요소 중 홀수 인덱스 (즉 짝수번째 ) 요소만 선택 

$("요소 선택 :even")

$("요소 선택:odd")

내용 1이 인덱스 0 

 

3️⃣ eq(index)/lt(index)/gt(index) 탐색 선택자 

eq(index) 탐색 선택자는 선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택한다.

lt(index) 탐색 선택자는 선택한 요소 중 지정한 인덱스보다 작은 인덱스를 참조하는 요소만 선택한다.

gt(index) 탐색 선택자는 선택한 요소 중 지정한 인덱스보다 큰 인덱스를 참조하는 요소만 선택한다. 

$("요소 선택 : eq(index)") or $("요소 선택").eq(index)

$("요소 선택: lt(index)")

$("요소 선택: gt(index)")

 

4️⃣ first-of-type/last-of-type 선택자 

first-of-type 선택자는 선택한 요소의 무리 중 첫번째 요소만 선택한다.

last-of-type 선택자는 선택한 요소의 무리 중 마지막 요소만 선택한다. 

$("요소 선택:first-of-type")

$("요소 선택:last-of-type")

 

5️⃣ nth-child(숫자n)/nth-last-of-type(숫자) 선택자 

nth-child(숫자n) 선택자는 선택한 요소의 무리 중 지정한 숫자의 요소를 선택한다. 

nth-last-of-type(숫자) 선택자는 선택한 요소의 무리 중 마지막에서 지정한 숫자의 요소를 선택한다. 

$("요소 선택:nth-child(숫자)")

$("요소 선택:nth-child(숫자n)")

$("요소 선택:nth-last-of-type(숫자)")

 

6️⃣ only-child/ slice(index) 선택자 

only-child 선택자는 선택한 요소가 부모요소에게 하나뿐인 자식 요소인 경우에 선택한다. 

slice(start index, last index)는 선택한 요소의 지정한 구간 인덱스의 요소를 선택한다. 

$("요소 선택:only-child")

$("요소 선택").slice(start index, last index) ex) slice(1,3) 1초과 3이하