jQuery 선택자

jQuery 선택자

jQuery 선택자란?

jQuery 선택자는 Html 요소와 관련된 기능구현이 많아 그만큼 css와 매우 밀접한 관계가 있습니다. 이런 이유로 그에 관한 선택자는 어떤것이 있는지 알아가도록 합시다.

1. 기본 선택자

선택자 종류	코드	설명
태그선택자	$(“p”)	p 요소를 선택합니다.
id 선택자	$(“#gnb”)	#gnb 요소를 선택합니다.
class 선택자	$(“.logo”)	logo인 요소를 선택합니다.
자식 선택자	$(“#gnb＞ul > li”)	#gnb의 자식 요소의 자식 요소 1i를 선택합니다.
하위 선택자	$(“#gnb ul”)	#gnb의 하위에 있는 모든 u 요소를 선택합니다.
인접 선택자	$( “#visual + #content”)	#visual 다음에 오는 #content 요소를 선택합니다.
형제 선택자	$ (“#visual ~ #footer”)	#visual의 형제 요소 #footer를 선택합니다.
종속 선택자	$(“ div.util”)	div 요소 중 class가 util인 요소를 선택합니다.
그룹 선택자	$(“.left, right, #banner”)	left, right, #banner 요소들을 선택합니다.
전체 선택자	$（”*“）	모든 요소를 선택합니다.

2.속성 선택자

선택자 종류	코드	설명
요소[속성]	$(“span[class]” )	span 요소 중 class 속성을 가지고 있는 요소를 선택합니다.
요소[속성=’값]	$(“span[class=’abc’]”)	span 요소 중 class가 abe인 요소를 선택합니다.
요소[속성!-‘값]	$(“ span[class!=’abc”])	span 요소 중 class가 abc가 아닌 요소를 선택합니다.
요소[속성~=’값]	$(“ span[class~=’abc’]”)	span 요소 중 class가 ‘abc’를 포함하는 요소를 선택합니다.abc 앞뒤로 연결된 문자가 없어야 합니다. bg abc’는 선택 되나 ‘bg_abc’는 선택되지 않습니다
요소[속성*=값]	$(“ span[class*=’abc’] )	span 요소 중 class가 ‘abc’를 포함하는 요소를 모두 선택합 니다. ‘og abc, “bgabc 모두 선택합니다
요소[속성ㅣ=값]	$(“span[class	=’abc’]” )	span 요소 중 class가 ‘abc’나 abe로 시작하는 요소를 선택합니다.
요소[속성^=’값]	$(“span[class^=’abc’]”)	span 요소 중 class가 ‘abc’로 시작하는 요소를 선택합니다.
요소[속성$=값] $(“span[class$=’abc’]”)	span 요소 중 class가 ‘abc’로 끝나는 요소를 선택합니다.

3. 필터 선택자

선택자에 ‘:’이 붙은 선택자를 필터 선택자라고 합니다.

선택자 종류	코드	설명
:even	$(“tr:even”)	tr요소 중 짝수 행만 선택합니다.
:odd	$(“tr:odd”)	tr요소 중 홀수 행만 선택합니다.
:first	$(“td:first”)	첫 번째 td요소를 선택합니다.
:last	$(“td:last”)	마지막 td요소를 선택합니다.
:header	$(“:header”)	헤딩(h1~h6)요소를 선택합니다.
:eq()	$(“li:eq(0)”)	index가 0인 li요소를 선택합니다. index는 0번이 첫번째 요소입니다.
:gt()	$(“li:gt(0)”)	index가 0큰 li요소를 선택합니다.
:lt()	$(“li:lt(2)”)	index가 2보다 작은 li요소를 선택합니다.
:not()	$(“li:not(.bg)”)	li요소 중에서 class명 bg가 아닌 li 요소를 선택합니다.
:root	$(“:root”)	html을 의미합니다.
:animated	$(“:animated”)	움직이는 요소를 선택합니다.

4. 자식 필터 선택자

자식 필터 선택자 중 ‘child’가 붙은 선택자는 요소가 순차적으로 나열되어 있을 때 사용하고 ‘of-type’이 붙은 선택자는 요소가 순차적으로 나열되어 있지 않아도 동일 요소이면 선택이 가능하다는 점을 이해한 후 내용을 살펴보면 자식 필터 선택자를 이해하는데 조금 도움이 될 것입니다.

선택자 종류	코드	설명
:first-chlid	$(“span:first-child”)	첫 번째 span 요소를 선택합니다.
:last-child	$(“span:last-child”)	마지막 span 요소를 선택합니다.
:first-of-type	$(“span:first-of-type”)	span 요소 중에서 첫 번째 span 요소를 선택합니다.
:last-of-type	$(“span:last-of-typed”)	span 요소 중에서 마지막 span 요소를 선택합니다.
:nth-last-child()	$(“span:nth-child(2)”)	두 번째 span 요소를 선택합니다. nth-child(2n)은 2,4,6…번째 요소를 선택하고, nth-child(2n+1)은 1,3,5…번째 요소를 선택합니다.
:nth-of-type()	$(“span:nth-of-type(2)”)	span요소 중에서 두번째 span 요소를 선택합니다.
:nth-lasf-of-type()	$(“span:nth-last-of-type(2)”)	span요소 중 마지막에서 두번째 span 요소를 선택합니다.
:only-child	$(“div > span:only-child”)	div의 자식 요소에서 오직 span 요소가 하나만 있는 span 요소를 선택합니다.
:onlt-of-type	$(“div > span:only-of-type”)	div의 자식 요소에서 span 요소가 하나만 있는 span 요소를 선택합니다.

5. 콘텐츠 필터 선택자

선택자 종류	코드	설명
:contains()	$(“p:contains(‘html’)”)	p 요소 중에서 ‘html’ 텍스트를 포함하고 있는 p요소를 선택합니다.
:empty	$(“div:empty”)	div 요소 중에서 자식 요소가 없는 div 요소를 선택합니다.
:parent	$(“span:parent”)	span 요소 중에서 자식 요소가 있는 span 요소를 선택합니다.
:has()	$(“section:has(article)”)	section 요소 중에서 article을 하위 요소로 가지고 있는 section 요소를 선택합니다.

6. 폼 필터 선택자

선택자 종류	코드	설명
:text	$(“input:text”)	input type =”text” 요소를 선택합니다.
:password	$(“input:password”)	input type =”password” 요소를 선택합니다.
:image	$(“input:image”)	input type =”image”>요소를 선택합니다.
:file	$(“input:file”)	input type =”file” 요소를 선택합니다.
:button	$(“:button”)	input type =”button”,
:checkbox	$(“input:checkbox”)	input type =”checkbox” 요소를 선택합니다.
:submit	$(“input:submit”)	input type =”submit”>요소를 선택합니다.
:reset	$(“input:reset”)	input type =”rest” 요소를 선택합니다.
:input	$(“:input”)	모든 input 요소를 선택합니다.
:checked	$(“input:checked”)	input>요소에 checked 속성이 있는 요소를 선택합니다.
:selected	$(“option:selected”)	요소에 selected 속성이 있는 요소를 선택합니다.
:focus	$(“input:focus”)	현재 input에 포커스가 있는 요소를 선택합니다.
:disabled	$(“input:disabled”)	input 요소 중 disabled 속성이 있는 요소를 선택합니다.
:enabled	$(“input:enabled”)	input 요소 중 disabled가 아닌 요소를 선택합니다.

7. 가시성 필터 선택자

선택자 종류	코드	설명
:hidden	div:hidden	div 요소 중 hidden인 요소를 선택합니다.
:visible	div:visible	div 요소 중 visible인 요소를 선택합니다.

8. 탐색 선택자

기본 탐색 선택자

선택자 종류	코드	설명
children()	$(“div”).children()	div 요소 중 자식 요소를 선택합니다.
parent()	$(“p”).parnet()	p요소의 부모 요소를 선택합니다.
parents()	$(“p”).parents(“div”)	P 요소의 부모가 되는 모든 div 요소를 선택합니다.
closest()	$(“p”).closest(“div”)	p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다.
next()	$(“div.m”).next()	div.m 요소의 다음 요소를 선택합니다.
nextAll()	$(“div.m”).nextAll()	div.m 요소 중 다음 요소들을 모두 선택합니다.
nextUntil()	$(“div.m”).nextUntil(“p”)	div.m 다음 요소부터 p 요소 전까지의 요소를 선택합니다.
prev()	$(“div.m)”.prev()	div.m 요소의 이전 요소를 선택합니다.
prevAll()	$(“div.m)”.prevAll()	div.m 요소의 이전 요소들을 모두 선택합니다.
prevUntil()	$(“div.m)”.prevUntil(“p”)	div.m 이전 요소부터 p 요소 다음 요소까지를 선택합니다.
siblings()	$(“div”).siblings(“p”)	div 요소의 형제 요소 중 p 요소를 선택합니다.
find()	$(“div”).find(“span”)	div 요소의 하위 요소 중 span 요소를 선택합니다.
filter()	$(“div”).filter(“.m”)	div 요소 중 class가 “m”인 요소를 선택합니다.
not()	$(“div”).not(“.m”)	div 요소 중 class가 “m”이 아닌 요소를 선택합니다.
has()	$(“div”).has(“span”)	div 요소 중 span 요소를 포함하고 있는 요소를 선택합니다.
eq()	$(“div”).eq(0)	div 요소 중 index가 0인 요소들을 선택합니다. index 0번은 첫 번쨰 요소입니다.
gt()	$(“div”).gt(0)	index가 0보다 큰 div 요소들을 선택합니다.
lt()	$(“div”).lt(3)	index가 3보다 작은 div 요소들을 선택합니다.

8. 기타 탐색 선택자

선택자 종류	코드	설명
add()	$(“div”).add(“p”)	div 요소와 p요소를 선택합니다.
addBack()	$(“div”).children(“p”).addBack()	p 요소와 이전 선택요소 div를 선택합니다.
end()	$(“div”).find(“span”).css(…).end().find(“em”).css(…)	$(“div”).find(“span”).css(…)의 실행이 끝나면 처음 선택자 $(“div”)로 다시 돌아와 $(“div”).find(“em”).css(…)가 실행됩니다.
is ()	if(“div”).children().is(“p”){console.log(“p 요소가 맞습니다.”);}	선택한 요소를 판별해 주는 선택자로 보통 if문의 조건식에 사용됩니다.

이상으로 다음시간에 뵙겠습니다!!

다음시간에 계속!