[jQuery] 선택자(selector) 정리

 

-선택자

HTML 안의 대상 DOM객체를 조작하는 기능

엘리먼트의 id, class명, 태그명, 페이지 엘리먼트의 DOM계층 구조를 이용해 엘리먼트를 선택

 

$("CSS 선택자").css("스타일 속성", "값");

$("CSS 선택자").attr("속성명", "값");

 

직접 선택자

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

 

 

인접 관계 선택자

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

 

제이쿼리 탐색 선택자

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

 

속성 탐색 선택자

사용	설명
$("li[title]")	li 태그 요소 중 title 속성이 포함된 요소 선택
$("li[title='리스트]")	li 태그 요소 중 tilte 속성 값이 '리스트'인 요소만 선택
$("a[href^='http://']")	a 태그 요소 중 href 속성값이 'http://'로 시작하는 요소만 선택
$("a[href$='.com']")	a 태그 요소 중 href 속성값이 '.com'로 끝나는 요소만 선택
$("a[href*='chaeng']")	a 태그 요소 중 href 속성값 중에서 'chaeng'을 포함하는 요소만 선택
$("li:hidden")	li 태그 요소 중 숨겨져 있는 요소만 선택
$("li:visible")	li 태그 요소 중 보이는 요소만 선택
$(":text")	input 태그 요소 중 type 속성값이 "text"인 요소만 선택
$(":selected")	selected 속성이 적용된 요소만 선택
$(":checked")	checked 속성이 적용된 요소만 선택

 

콘텐츠 탐색 선택자

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