[jQuery] 선택자(Selector)

 

 

 

 

 

안녕하세요.

빅한입니다.

 

이번에는 jQuery에서 반드시 알아야만 하는 선택자(selector)에 관하여 알아보겠습니다.

특정 엘리먼트에 접근하여 이벤트를 적용하거나 속성을 변경하기 위해서는 selector를 통하여 접근을 하게 되는데요.

 

$("#id")

$(".class")

 

이러한 아이들 중에 ""안에 있는 것들을 우리는 선택자 또는 selector(셀렉터)라고 부르고 있습니다.

대부분 selector(셀렉터)로 표기를 많이 하지만 여기에서는 '선택자'라는 이름으로 부르도록 하겠습니다.

 

지금부터는 이벤트를 부여하거나 속성을 변경하기 위한 노드를 선택하는 선택자의 종류에 대하여 알아보겠습니다.

선택자는 CSS에서도 자주 사용되므로 익혀두면 좋습니다.

이 내용에 대해서는 주로 w3schools.com과 jQuery 홈페이지의 document를 참고합니다.

1. 기본 선택자 (Basic)

선택자	예제	설명
*	$("*")	모든 요소를 선택
.class	$(".class")	지정한 클래스를 가지는 모든 요소를 선택
element	$("element")	지정된 태그명을 가지는 모든 요소를 선택
#id	$("#id")	지정한 ID 속성을 가지는 하나의 요소를 선택
,	$("selector1, selecotr2")	모든 지정한 선택자들의 결과들을 결합하여 선택

예제 : 기본 선택자 예제

2. 속성 선택자 (Attribute)

선택자	예제	설명
[attribute|='value']	$("[name|='value']")	지정된 속성을 가진 요소를 지정된 문자열과 동일한 값 또는 해당 문자열로 시작하여 하이픈(-)으로 선택
[attribute*='value']	$("[name*='value']")	주어진 하위 문자열을 포함하는 값으로 지정된 속성을 갖는 요소를 선택
[attribute~='value']	$("[name~='value']")	공백으로 구분된 주어진 단어를 포함하는 값으로 지정된 속성을 갖는 요소를 선택
[attribute$='value']	$("[name$='value']")	주어진 문자열로 정확히 끝나는 값으로 지정된 속성을 갖는 요소를 선택 비교는 대소 문자를 구분함.
[attribute='value']	$("[name='value']")	특정 값과 정확히 일치하는 값으로 지정된 속성을 갖는 요소를 선택
[attribute!='value']	$("[name!='value']")	지정된 속성을 갖지 않거나 지정된 속성을 갖지만 특정 값을 갖지 않는 요소를 선택
[attribute^='value']	$("[name^='value']")	주어진 문자열로 정확히 시작하는 값으로 지정된 속성을 갖는 요소를 선택
[attribute]	$("[name]")	임의의 값으로 지정된 속성을 갖는 요소를 선택
[attribute='value'][attribute2='value2']	$("[name='value'][name2='value2']")	지정된 모든 속성 필터와 일치하는 요소들을 선택

예제 : 속성 선택자 예제

3. 기본 필터 선택자(Basic Filter)

선택자	예제	설명
:animated	$("div:animated")	선택자를 실행할 때 애니메이션 진행 상태에 있는 모든 요소를 선택
:eq(index)	$("div:eq(1)")	일치하는 집합 내의 인덱스 n에 있는 요소를 선택
:even	$("div:even")	일치하는 집합 내의 인덱스가 0을 포함한 짝수 요소를 선택
:first	$("div:first")	첫 번째로 일치하는 DOM 요소를 선택
:focus	$("div:focus")	현재 포커스가 있는 요소를 선택
:gt(index)	$("div:gt(2)")	일치하는 세트 내의 인덱스보다 큰 인덱스에서 모든 요소를 선택
:header	$("div:header")	h1, h2, h3 등과 같이 헤더인 모든 요소를 선택
:lang(language)	$("div:lang(en-us)")	지정된 언어의 모든 요소를 선택
:last	$("div:last")	마지막으로 일치하는 요소 선택
:lt(index)	$("div:lt(4)")	일치하는 집합 내의 인덱스보다 작은 인덱스에서 모든 요소를 선택
:not(selector)	$("div:not(:checked)")	지정된 선택자와 일치하지 않은 모든 요소를 선택
:odd	$("div:odd")	홀수 번째 요소를 선택
:root	$("div:root")	document의 루트 요소 선택
:target	$("div:target")	document의 URL의 flagment 식별자로 지정된 대상 요소를 선택

예제 : 기본 필터 선택자

4. 자식 필터 선택자 (Child Filter)

선택자	예제	설명
:first-child	$("div:first-child")	부모의 첫 번째 자식인 모든 요소를 선택
:first-of-type	$("div:first-of-type")	동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택
:last-child	$("div:last-child")	부모의 마지막 하위 요소인 모든 요소를 선택
:last-of-type	$("div:last-of-type")	동일한 name 요소의 형제 중 마지막 요소인 모든 요소를 선택
:nth-child(index/even/odd/equation)	$("div:nth-child(2)")	부모의 n 번째 자식인 모든 요소를 선택
:nth-last-child(index/even/odd/equation)	$("div:last-child(2)")	마지막 요소에서 첫 번째 요소까지 계산하여 부모의 n 번째 자식인 모든 요소를 선택
:nth-last-of-type(index/even/odd/equation)	$("div:nth-last-of-type(2)")	마지막 요소부터 첫 번째 요소까지 같은 name 요소를 가진 형제와 관련하여 부모의 n 번째 자식인 모든 요소 선택
:nth-of-type(index/even/odd/equation)	$("div:nth-of-type(2)")	동일한 name 요소를 갖는 형제와 관련하여 부모의 n번째 자식인 모든 요소 선택
:only-child	$("div:only-child")	부모의 유일한 자식인 모든 요소를 선택
:only-of-type	$("div:only-of-type")	동일한 name 요소를 갖는 형제 노드가 없는 모든 요소 선택

예제 : 자식 필터 선택자(Child Filter)

5. 내용 필터 선택자 (Content Filter)

선택자	예제	설명
:contains(text)	$("div:contains('Hello'")	지정된 텍스트를 포함하는 모든 요소를 선택
:empty	$("div:empty")	자식이 없는 모든 요소(텍스트 노드 포함)를 선택
:has(selector)	$("div:has(p)")	지정한 선택자와 일치하는 요소를 하나 이상 포함하는 요소를 선택
:parent	$("div:parent")	하나 이상의 하위 노드(요소 또는 텍스트)가 있는 모든 요소를 선택

예제 : 내용 필터 선택자(Content Filter)

6. 형식 선택자 (Form)

선택자	예제	설명
:button	$(":button")	버튼 요소의 모든 요소와 버튼 유형의 요소 선택
:checkbox	$(":checkbox")	체크박스 유형의 모든 요소 선택
:checked	$(":checked")	체크되거나 선택된 모든 요소와 일치한 요소 선택
:disabled	$(":disabled")	비활성화된 모든 요소 선택
:enabled	$(":enabled")	활성화된 모든 요소 선택
:file	$(":file")	파일 유형의 모든 요소를 선택
:focus	$(":focus")	현재 포커스가 있는 요소 선택
:image	$(":image")	이미지 유형의 모든 요소 선택
:input	$(":input")	모든 input, textarea, select, button 요소 선택
:password	$(":password")	패스워드 유형의 모든 요소 선택
:radio	$(":radio")	라디오 유형의 모든 요소 선택
:reset	$(":reset")	reset 유형의 모든 요소 선택
:selected	$(":selected")	선택된 모든 요소 선택
:submit	$(":submit")	submit 유형의 모든 요소 선택
:text	$(":text")	text 유형의 모든 input 요소 선택

예제 : 준비중....

7. 계층 선택자 (Hierarchy)

선택자	예제	설명
> :: parent > child	$("ul > li")	"parent"로 지정된 요소의 "child"로 지정된 모든 직접 자식 요소 선택
(공백) :: ancestor descendant	$("form input")	지정된 조상의 자손인 모든 요소 선택
+ :: prev + next	$("label+input")	형제 "prev"가 바로 앞에 오는 "next"와 일치하는 다음 요소 모두 선택
~ :: prev~siblings	$("#prev~div")	"prev"요소 다음에 오는 모든 형제 요소를 선택하고, 상위 요소가 같으며 필터링 "siblings" 선택자와 일치하는 요소

예제 : 준비중....

8. jQuery 확장 선택자 (jQuery Extensions)

선택자	예제	설명
:animated	$("div:animated")	선택자를 실행할 때 애니메이션 진행 상태에 있는 모든 요소를 선택
[name|='value']	$("[name|='value']")	지정된 속성을 가진 요소를 지정된 문자열과 동일한 값 또는 해당 문자열로 시작하여 하이픈(-)으로 선택
:button	$(":button")	버튼 요소의 모든 요소와 버튼 유형의 요소 선택
:checkbox	$(":checkbox")	체크박스 유형의 모든 요소 선택
:eq(index)	$("div:eq(1)")	일치하는 집합 내의 인덱스 n에 있는 요소를 선택
:file	$(":file")	파일 유형의 모든 요소를 선택
:first	$("div:first")	첫 번째로 일치하는 DOM 요소를 선택
:gt(index)	$("div:gt(2)")	일치하는 세트 내의 인덱스보다 큰 인덱스에서 모든 요소를 선택
:has(selector)	$("div:has(p)")	지정한 선택자와 일치하는 요소를 하나 이상 포함하는 요소를 선택
:header	$("div:header")	h1, h2, h3 등과 같이 헤더인 모든 요소를 선택
:hidden	$("div:hidden")	hidden 된 모든 요소 선택
:image	$(":image")	이미지 유형의 모든 요소 선택
:input	$(":input")	모든 input, textarea, select, button 요소 선택
:last	$("div:last")	마지막으로 일치하는 요소 선택
:lt(index)	$("div:lt(4)")	일치하는 집합 내의 인덱스보다 작은 인덱스에서 모든 요소를 선택
:odd	$("div:odd")	홀수 번째 요소를 선택
:parent	$("div:parent")	하나 이상의 하위 노드(요소 또는 텍스트)가 있는 모든 요소를 선택
:password	$(":password")	패스워드 유형의 모든 요소 선택
:radio	$(":radio")	라디오 유형의 모든 요소 선택
:reset	$(":reset")	reset 유형의 모든 요소 선택
:selected	$(":selected")	선택된 모든 요소 선택
:submit	$(":submit")	submit 유형의 모든 요소 선택
:text	$(":text")	text 유형의 모든 input 요소 선택
:visible	$("div:visible")	visible인 모든 요소 선택

예제 : 준비중....

9. 가시성 필터 선택자 (Visibility Fileter)

선택자	예제	설명
:hidden	$("div:hidden")	hidden 된 모든 요소 선택
:visible	$("div:visible")	visible인 모든 요소 선택

예제 : 준비중....

 

종류별로 모든 선택자를 확인해 보았습니다.

모두를 알면 좋겠지만 개인적으로 이것만 알아도 되는 것들만 색상을 추가하였습니다.

하지만 적절한 효과를 위해서는 모든 것을 알면 좋겠지요?

저도 jQuery의 Document를 보면서 몰랐던 API가 있어서 조금 놀랐습니다.

그만큼 공부를 안 하고 있었단 사실.. -_-

아직은 예제를 올리지는 않았지만 시간이 나면 예제 또한 만들어서 링크하도록 하겠습니다.

 

여기까지 읽어 주셔서 감사드립니다.