📖탐색 선택자
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색하여
더 정확하게 선택할 수 있다. 대표적인 탐색 선택자에는 배열의 index를 사용해 선택하는
'위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색
선택자'가 있다. 이 외에도 컨텐츠의 포함 여부로 다시 선택할 수 있는 '컨텐츠 탐색 선택자'와
'필터링 선택자'도 있다.
위치 탐색 선택자
기본 선택자로 태그요소를 선택하면 이 요소들은 배열에 담긴다.
이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있다.
1.first/last 선택자
first선택자는 선택된 요소 중 첫 번째 요소만 선택하고, last선택자는 요소 중 마지막 요소만 선택한다.
[기본형]
$('요소선택:first') 또는 $('요소선택').first() $('요소선택:last') 또는 $('요소선택').last()
2.even/odd 선택자(홀수/짝수)
even선택자는 선택한 요소 중 홀수번째에 위치한 요소를 선택하고
odd선택자는 선택한 요소 중 짝수번째에 위치한 요소를 선택할때 사용한다.
[기본형]
$('요소선택:even') :홀수번째(짝수 인덱스) $('요소선택:odd') :짝수번째(홀수 인덱스)
3.eq(index),lt(index),gt(index)선택자
eq(index)탐색자는 선택한 요소 중 지정한 인덱스가 참조하고 있는 요소만 선택한다.
lt(index)탐색자는 선택한 요소 중 지정한 인덱스보다 작은(less Than)인덱스를 참조하는
요소만 선택한다.
gt(index)탐색자는 선택한 요소 중 지정한 인덱스보다 큰(greater Than)인덱스를 참조하는
요소만 선택한다.
[기본형] 1. $("요소선택:eq(index)")또는 $("요소선택").eq(index) 2. $("요소선택:lt(index)") 3. $("요소선택:gt(index)")
*위의 이미지와 같이 eq탐색자를 사용할 경우에는 두가지 형태로 사용할 수 있다.
$('#menu li').eq(3).css( ) 과 $('#menu li:eq(3)').css( )은 동일하게 적용된다.
🔍css메서드에는 객체를 직접 참조할 수 있다.
위에 예시처럼 적용하고자 하는 css속성과 값을 변수에 따로 담아두고 변수명을 .css(변수명)
이런 식으로 적용할 수도 있고, 객체를 직접 넣어서 적용할 수 있다.
두 css적용의 차이점은 변수로 빼 둘 경우 다른 태그 요소에도 동일한 속성을 여러번 적용할 수 있고 직접 객체를 참조하는 방법은 해당 태그들에만 적용된다는 점이다.
4.first-of-type / last-of-type 선택자
선택한 요소의 무리 중 첫 번째 요소만 선택하거나 마지막 요소를 선택할 때 사용한다.
[기본형]
$("요소선택:first-of-type") $("요소선택:last-of-type")
5. nth-child(숫자n) / nth-last-of-type(숫자)선택자
nth-child(숫자n)는 선택한 요소 무리 중 지정한 숫자 번째에 있는 요소를 선택할 때 사용한다.
숫자 뒤에 n이 붙으면 '배수'를 의미한다. 2n = 2의 배수 = 짝수
nth-last-of-type(숫자)는 뒤에서 해당 숫자 번째의 요소를 선택할때 사용한다.
[ 기본형]
$("요소선택:nth-child(숫자n)") $("요소선택:nth-last-of-type(숫자)")
6.only-child선택자
부모요소에게 하나뿐인 자식요소를 선택할때 사용한다.
[기본형]
$("요소선택: only-child")
7.slice선택자
slice선택자는 선택자 요소의 지정 구간 인덱스의 요소를 선택한다.
slice는 시작 인덱스부터 끝 인덱스의 바로 앞 인덱스까지의 요소를 반환한다.
예를 들면 .slice(0,3)이라고 쓰면 0번부터 2번 인덱스까지만 반환한다.
[기본형]
$("요소선택").slice(start index,end index)
