Jquery 선택자

기본 선택자

종류	사용법	설명
전체 선택자	$("*")	모든 요소를 선택
아이디 선택자	$("#아이디명")	id 속성에 지정한 값을 가진 요소 선택
클래스 선택자	$(".클래스명")	class속성에 지정한 값을 가진 요소 선택
요소 선택자	$("요소명")	지정한 요소명과 일치하는 요소들만 선택
그룹 선택자	$("선택1, 선택2, 선택3, 선택4, ...선택n")	선택1, 선택2, 선택3, 선택4, ...선택n에 지정된 요소들을 한번에 선택
종속 선택자	$("p.txt_1") $("p#txt_1")	<p> 요소 중 class값이 txt_1인 요소를 선택 <p> 요소 중 id 값이 txt_1인 요소를 선택

 

인접 관계 선택자

종류	사용법	설명
부모 요소 선택자	$("요소 선택").parent()	선택한 요소의 부모 요소를 선택
상위 요소 선택자	$("요소 선택").parents()	선택한 요소의 상위 요소를 모두 선택
가장 가까운 상위 요소 선택자	$("요소 선택").closest("div")	선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택
하위 요소 선택자	$("요소 선택 하위 요소")	선택한 요소에 지정한 하위 요소를 선택
자식 요소 선택자	$("요소 선택 > 자식요소")	선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택
자식 요소들 선택자	$("요소 선택").children()	선택한 요소의 모든 자식 요소를 선택
형(이전) 요소 선택자	$("요소 선택").prev()	선택한 요소의 바로 이전 요소를 선택
형(이전) 요소들 선택자	$("요소 선택").prevAll()	선택한 요소의 이전 요소 모두를 선택
지정 형(이전) 요소들 선택자	$("요소 선택").prevUntil("요소명")	선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택
동생(다음) 요소 선택자	$("요소 선택").next() $("요소 선택 + 다음 요소")	선택한 요소의 다음 요소를 선택
동생(다음) 요소들 선택자	$("요소 선택").nextAll()	선택한 요소의 다음 요소 모두를 선택
지정 동생(다음) 요소들 선택자	$("요소 선택").nextUntil("h2")	선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택
전체 형제 요소 선택자	$(".box_1").siblings()	class 값이 box_1인 요소의 형제 요소 전체를 선택

 

위치 탐색 선택자 종류

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

 

그 외의 선택자

종류	사용법	설명
$("요소 선택:contains(텍스트)")	$("li:contains('내용2)")	<li> 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택
$("요소 선택").contents()	$("p").contents()	선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택
$("요소 선택:has(요소명)") $("요소 선택").has(요소명)	$("li:has('span')") $("li").has('span')	<li> 요소 중 <span>을 포함하는 요소만 선택
$("요소 선택:not(:제외 요소)") $("요소 선택").not(:제외 요소)	$("li:not(:first)") $("li").not(:first)	<li> 요소 중 첫 번째 요소만 제외하고 선택
$("요소 선택").filter("필터 요소")	$("li").filter(".list2")	<li> 요소 중 class 값이 "list2"인 요소만 선택
$("요소 선택1").find(요소 선택2)	$("li").find("strong")	<li> 요소의 하위 요소인 <strong>만 선택
$("요소 선택1").closest("요소 선택2")	$("strong").closest("div")	<strong>을 감싸는 상위 <div> 요소 중 가장 가까운 상위 요소를 선택
end()	$("li").children("a").end()	필터링이 실행되기 이전의 요소인 <li>가 선택