[JQuery] 탐색 선택자 / 속성 선택자

탐색 선택자

직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 선택할 때.

• 위치 탐색 선택자 : 요소의 위치를 기준으로 선택
• 속성 탐색 선택자 : 요소의 지정된 속성을 기준으로 선택.

위치 탐색 선택자 종류

요소의 위치나 인덱스 번호를 이용해 특정 요소를 좀 더 정확하게 선택.

종류	사용법	설명
$("요소 선택:first") $("요소 선택").first()	$("li:first") $("li").first()	전체 요소 중 첫번째 요소만 선택
$("요소 선택:last") $("요소 선택").last()	$("li:last") $("li").last()	전체 요소 중 마지막 요소만 선택
$("요소 선택:odd")	$("li:odd")	요소 그룹 중 홀수번째 요소만 선택
$("요소 선택:even")	$("li:even")	요소 그룹 중 짝수번째 요소만 선택
$("요소 선택:first-of-type")	$("li:first-of-type")	요소 무리 중 첫번째 요소만 선택
$("요소 선택:last-of-type")	$("li:last-of-type")	요소 무리 중 마지막 요소만 선택
$("요소 선택:nth-child(숫자)")	$("li:nth-child(3)")	요소 무리 중 n번째 요소만 선택
$("요소 선택:nth-child(숫자n)")	$("li:nth-child(2n)")	요소 무리 중 n의 배수 번째 있는 요소만 선택. (여기선 2의 배수 번째)
$("요소선택:nth-last-of-type(숫자)")	$("li:nth-last-of-type(2)")	요소 무리 중 마지막 위치로부터 n번째에 있는 요소만 선택. (맨 마지막에서 2번째것을 선택한다)
$("요소선택:only-child()")	$("li:only-child")	부모요소 내에 <li>요소가 1개뿐인 <li>요소만 선택
$("요소 선택:eq(숫자)") $("요소 선택").eq(숫자)	$("li:eq(2)") $("li").eq(2)	선택한 요소<li> 중 숫자에 참조하는 요소 선택
$("요소 선택:gt(숫자)")	$("li:gt(1)")	요소 중 숫자보다 큰 인덱스가 참조하는 요소 선택 (Grater Than ?)
$("요소 선택:lt(숫자)")	$("li:lt(1)")	요소 중 숫자보다 작은 인덱스가 참조하는 요소 선택
$("요소 선택"):slice(숫자)	$("li").slice(2)	요소 중 숫자부터 참조하는 요소 불러오기

first-of-type / last-of-type

선택한 요소의 무리 중 앞/뒤에서 첫 번째 요소만 선택

 

only-child : 지정한 요소가 부모요소에 오직 한 개만 존재할 때 선택

slice(index) : 선택한 요소에 지정한 인덱스부터 참조하는 요소만 선택

 

속성 탐색 선택자

선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택

종류	사용법	설명
$("요소선택[속성]")	$("li[title]")	<li>요소 중 title 속성이 포함된 요소만 선택
$("요소 선택[속성=값]")	$("li[title='찾기']")	<li>요소 중 title  속성값이 '찾기'인 요소만 선택
$("요소선택[속성^='텍스트']")	$(a[href^='http://']")	<li>요소 중 href  속성값이 'http://'로 시작하는 요소만 선택
$("요소선택[속성$=텍스트]")	$(a[href$='.com']")	<li>요소 중 href속성값이 .com 으로 끝나는 요소만 선택
$("요소선택[속성*=텍스트]")	$("a[href*='middle']")	<a>요소 중 href 속성값 중에서 'middle'을 포함하는 요소만 선택
$("요소선택:hidden")	$("li:hidden")	<li>요소 중 hidden 처리 (숨겨진) 된 것만 선택
$("요소선택:visible")	$("li:visible")	<li>요소 중 보이는 것만 선택
$(":text")	$(":text")	<input>요소 중 type 속성값이 "text"인 요소만 선택
$(":selected")	$(":selected")	selected속성이 적용된 요소만 선택
$(":checked")	$(":checked")	checked속성이 적용된 요소만 선택

$(":type속성 | (또는) 상태속성") 선택자

입력 요소의 type속성 또는 상태 속성값의 일치 여부 따져 입력 요소를 선택한다.