[jQuery] 탐색 선택자 (1) - 위치 탐색 선택자

탐색 선택자

탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색하여 좀 더 세밀하게 선택할 수 있다

 

위치 탐색 선택자

기본 선택자로 요소(태그)를 선택했을 경우 배열에 담기게 된다, 이때 배열의 인덱스(index)를 사용하면 특정 요소를 더 세밀하게 선택할 수 있는데 위치 탐색 선택자는 바로 이 인덱스를 활용하여 특정 요소를 선택하게 된다

구분	종류	사용법	설명
위치 탐색 선택자	first 선택자	$("선택 요소:first") $("선택 요소").first()	선택된 요소 중 첫번째 요소를 선택
	예시	$("#menu li:first") $("#menu li").first()
	last 선택자	$("선택 요소:last") $("선택 요소").last()	선택된 요소 중 마지막 요소를 선택
	예시	$("#menu li:last") $("#menu li").last()
	even 선택자	$("선택 요소:even")	선택한 요소 중 짝수 요소만 선택
	예시	$("#menu li:even")
	odd 선택자	$("선택 요소:odd")	선택한 요소 중 홀수 요소만 선택
	예시	$("#menu li:odd")
	eq(index) 탐색 선택자	$("선택 요소:eq(index)") $("선택 요소").eq(index)	선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택
	예시	$("#menu li:eq(2)") $("#menu li").eq(2)
	it(index) 탐색 선택자	$("선택 요소:lt(index)")	선택한 요소 중 지정한 인덱스보다 작은 (less than) 요소만 선택
	예시	$("#menu li:lt(2)")
	gt(index) 탐색 선택자	$("선택 요소:gt(index)")	선택한 요소 중 지정한 인덱스보다 큰 (greater than) 요소만 선택
	예시	$("#menu li:gt(2)")
	first-of-type 선택자	$("선택 요소:first-of-type")	선택한 요소의 무리 중 첫번째 요소만 선택
	예시	$("li:first-of-type")
	last-of-type 선택자	$("선택 요소:last-of-type")	선택한 요소의 무리 중 마지막 요소만 선택
	예시	$("li:last-of-type")
	nth-child(n) 선택자	$("선택 요소:nth-child(n)")	선택한 요소의 무리 중 n번째 요소를 선택
	예시	$("#menu li:nth-child(2)")
	nth-child(Nn) 선택자	$("선택 요소:nth-child(Nn)")	선택한 요소의 무리 중 지정한 숫자(N)의 배수 요소를 선택
	예시	$("#menu li:nth-child(2n)")
	nth-last-of-type(n) 선택자	$("선택 요소:nth-last-of-type(n)")	선택한 요소의 무리 중 마지막에서 지정한 숫자의 요소를 선택
	예시	$("#menu li:nth-last-child(2)")
	only-child 선택자	$("선택 요소:only-child")	선택한 요소의 부모 요소에게 하나뿐인 자식이라면 선택
	예시	$("li:only-child")
	slice(index) 선택자	$("선택 요소").slice(start idx, end idx)	지정 구간 인덱스(start idx ~ end idx)의 요소를 선택,
	예시	$(".list").slice(1, 3)

 

 

---

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

 

참조 서적:

자바스크립트 + 제이쿼리 입문 : 정인용