[jQuery] jQuery 선택자(Selector) 필터 총정리

jQuery 선택자(Selector) 필터

jQuery는 DOM 요소를 탐색할때 속성 값을 조건으로 하거나 순서(index) 및 상태를 조건으로 선택할 수 있는 표현식을 제공하는데 이러한 표현식을 필터라고 합니다.

 

 

속성 필터

속성을 조건으로 하는 선택자 필터입니다. 값을 조건으로 할때 공백이 들어간 경우에는 ""이나 ''으로 묶어 표현합니다.

 

 

특정 속성을 갖는 요소

특정 속성을 갖는 요소를 선택할때는 [속성명] 과 같이 사용합니다.

$('[data-value]') //data-value 라는 속성을 갖는 모든 요소 선택                                
$('td[class]') //class 속성을 갖는 모든 td 요소 선택

 

 

특정 속성의 값을 조건으로 선택하기

특정 속성의 값을 기준으로 선택하는 경우에는 [속성명=값] 형식으로 사용합니다.

$('input[data-value=first]') //data-value 속성의 값이 first인 input 요소 선택
$('input[data-value="first name"') //만약 값에 공백이 들어가는 경우 ""로 감싸 표현합니다.        

 

 

특정 속성의 값이 아닌 요소 선택하기

특정 속성의 값이 아닌 요소를 선택하는 경우에는 [속성명!=값] 형식으로 사용합니다.

$('input[data-value!=first]') //data-value 속성의 값이 first가 아닌 input 요소 선택
$('input[data-value!="first name"') //만약 값에 공백이 들어가는 경우 ""로 감싸 표현합니다.        

 

 

특정 속성의 값이 특정 값으로 시작하는 요소

특정 속성의 값이 특정 값으로 시작하는 요소를 선택하는 경우에는 [속성명^=값] 형식으로 사용합니다.

$('input[data-value^=first]') //data-value 속성의 값이 first로 시작하는 input 요소 선택
$('input[data-value^="first name"') //만약 값에 공백이 들어가는 경우 ""로 감싸 표현합니다.        

 

 

특정 속성의 값이 특정 값으로 끝나는 요소

특정 속성의 값이 특정 값으로 끝나는 요소를 선택하는 경우에는 [속성명$=값] 형식으로 사용합니다.

$('input[data-value$=first]') //data-value 속성의 값이 first로 끝나는 input 요소 선택
$('input[data-value$="first name"') //만약 값에 공백이 들어가는 경우 ""로 감싸 표현합니다.        

 

 

 

특정 속성의 값이 특정 값을 포함하는 요소

특정 속성의 값이 특정 값을 포함하는 요소를 선택하는 경우에는 [속성명*=값] 형식으로 사용합니다.

$('input[data-value*=first]') //data-value 속성의 값이 first를 포함하는 input 요소 선택
$('input[data-value*="first name"') //만약 값에 공백이 들어가는 경우 ""로 감싸 표현합니다.        

 

 

속성 필터 여러개를 동시에 만족하는 요소

속성 필터 조건 여러개를 동시에 만족하는 요소를 선택하는 경우에는 [조건][조건] 형식으로 사용합니다.

//data-value 속성의 값이 first를 포함하면서 data-name 속성의 값이 username인 요소 선택        
$('input[data-value*=first][data-name="username"]')

 

 

 

 

 

순서(Index) 조건 필터

요소들이 여러개일 때 순서를 조건으로 하는 필터가 있습니다. 예를들어 table 하위에 여러개의 td가 존재할 수 있는데 그 중 '세 번째 td ' 라는 식으로 선택이 가능합니다.

 

 

 

xx 번째의 요소 선택

만약 원하는 순서의 요소를 선택할때에는 :eq(index) 를 사용합니다. index는 0부터 시작합니다.

$('td:eq(0)').text() //첫번째 td의 text 추출 >>> 1                                            

 

 

끝에서 xx 번째의 요소 선택

만약 뒤에서부터 원하는 순서의 요소를 선택할때에는 :eq(-index) 를 사용합니다. index는 -1부터 시작합니다.

$('td:eq(-3)').text() //뒤에서 세번째 td의 text 추출 >>> 7                                    

 

 

index를 기준으로 홀수 번째 또는 짝수 번째 요소 선택

여러 요소들 중 홀수 번째 또는 짝수 번째 요소를 선택할때에는 :odd 또는 :even 을 사용합니다. 주의할 점 으로는 index 는 0부터 시작이라는 점을 잊어버리면 안된다는 것입니다.

$('td:odd') //td 요소들 중 홀수 번째 요소들만 선택 2, 4, 6, 8 td 선택
$('td:even') //td 요소들 중 짝수 번째 요소들만 선택 1, 3, 5, 7, 9 td 선택                        

 

 

 

 

필터 종류 정리

분류	구문	개요	예
기본	*	모든 요소 구하기	*
	#id	지정한 ID값의 요소 구하기	#myself
	.class	지정한 클래스(class 속성)의 요소 구하기	.book
	element	지정한 태그명의 요소 구하기	h2
	sel1, sel2, sel3	여러 개의 선택자의 하나에 매치되는 요소를 통합해서 구하기	#myself, h2
계층	ancestor descendant	요소 ancestor를 부모로 하는 자식 요소 descendant를 모두 구하기	.main span
	parent > child	요소 parent를 부모로 하는 자식 요소 child를 구하기	#myself > div
	prev + next	요소 prev의 다음 요소 next를 구하기	#myself + div
	prev ~ siblings	요소 prev 이후에 형제 요소 siblings를 구하기	#myself ~ div
필터 (기본)	:animated	애니메이션을 실행 중인 요소 모두 구하기	img:animated
	:checked	체크되어 있는 input 요소 구하기	input:checked
	:focus	포커스가 활성화 되어있는 input 요소 구하기	input:focus
	:first	최초의 요소 구하기	p:first
	:last	마지막 요소 구하기	p:last
	:not(exp)	선택자 exp에 일치하지 않는 요소 구하기	p:not(.main)
	:even	짝수 번째 요소 구하기	li:even
	:odd	홀수 번째 요소 구하기	li:odd
	:eq(index)	index 번째 요소 구하기	li:eq(3)
	:eq(-index)	끝에서부터 index 번째 요소 구하기	li:eq(-3)
	:gt(index)	index 번째 초과(<) 요소 구하기	li:gt(2)
	:lt(index)	index 번째 미만의 요소 구하기	li:lt(2)

 

분류	구문	개요	예
필터 (기본)	:header	헤더(<h1>, <h2>..) 요소 구하기	:header
	:lang(lang)	지정한 언어 요소 모두 구하기	:lang(ko)
	:root	문서의 루트 요소 구하기	:root
필터 (컨텐츠)	:contains(text)	지정한 text를 포함하는 요소 구하기	li:contains("봄")
	:empty	자식 요소를 갖지 않는 요소 구하기	div:empty
	:has(exp)	셀렉터 exp에 일치하는 자식 요소를 갖는 요소	div:has(a)
	:parent	자식 요소를 갖는 모든 요소 구하기	div:parent
필터 (속성)	[attr]	지정한 속성을 갖는 요소 구하기	input[type]
	[attr = value]	속성이 값 value에 같은 요소 구하기	input[type="number"]
	[attr != value]	속성이 값 value에 같지 않은 요소 구하기	input[type="!number"]
	[attr ^= value]	속성이 value로 시작하는 값을 가진 요소를 구하기	[lang^="en"]
	[attr $= value]	속성이 value로 끝나는 값을 가진 요소 구하기	[lang$="kr"]
	[attr *= value]	속성이 value를 포함한 값을 가진 요소 구하기	[lang*="ko"]
	[sel1][sel2][selN]	여러 개의 속성 필터 모두에 일치하는 요소 구하기	img[title][alt]
필터 (자식 요소)	:nth-child(index | even| odd)	인수(인덱스/짝수/홀수) 번째 자식 요소 구하기	li:nth-child(2)
	:nth-last-child(index | even | odd)	끝부터 인수(인덱스/짝수/홀수) 번째 자식 요소 구하기	li:nth-last-child(even)
	:nth-of-type(index | even | odd)	지정한 형제 요소 중에서 인수(인/짝/홀) 번째 요소 모두 구하기	div:nth-of-type(2)
	:nth-last-of-type(index | even | odd)	지정한 형제 요소 중에서 끝에서 인수(인/짝/홀) 번째 요소 모두 구하기	div:nth-last-of-type(2)
	:first-child	첫 자식 요소 구하기	div:first-child
	:last-child	마지막 자식 요소 구하기	div:last-child

 

출처: https://dololak.tistory.com/394 [코끼리를 냉장고에 넣는 방법:티스토리]