[jQuery] jQuery 선택자(Selector) 목록 정리

이전글

[jQuery] jQuery DOM 계층 구조를 활용한 셀렉터(Selector) 사용법 

[jQuery] jQuery DOM 셀렉터(Selector) 기본 사용법 

jQuery 선택자(Selector) 목록 정리

jQuery는 DOM 요소를 탐색할때 CSS 선택자 표현식을 지원합니다. 이번글에서는 여러가지 선택자를 간단하게 정리합니다.

기본 선택자

가장 많이 사용하는 기본 선택자들입니다.

전체 선택자

document객체가 관리하는 문서내의 모든 요소를 선택합니다. * (Asterisk)를 사용합니다.

$('*') //모든 요소를 선택합니다.                                                                
$('body > *') //body 하위에 모든 요소를 선택합니다. 

id 선택자

HTML 태그의 ID속성값을 기준으로 하는 선택자입니다. ID값 앞에 #을 붙여 사용합니다. ID값을 중복되지 않는게 원칙이므로 가장 처음에 선택된 요소만 리턴됩니다.

$('#userinput') //id속성값이 userinput인 요소를 선택합니다.                                    

태그 선택자

HTML 태그의 태그명을 기준으로 하는 선택자입니다. 태그명을 그대로 사용하며, 동일한 태그가 여러개인 경우 배열 형태로 리턴됩니다.

$('table') //문서 내에 table 요소들을 선택합니다.                                                

클래스 선택자

HTML 태그의 class 속성값을 기준으로 하는 선택자입니다. class 속성값 앞에 .(점)을 붙여 사용합니다. 해당 클래스를 가진 모든 요소들을 반환합니다.

$('.account') //class 속성의 값이 account인 요소들을 선택합니다.
$('.account.money') //class 속성의 값이 account와 money 둘 다 포함되는 요소들을 선택합니다.(class="account money")

계층 구조에 따른 선택자

DOM 구조에서 자식이나 후손 요소에 대해 선택할 수 있습니다.

자식(Child) 선택자

parent 요소의 자식 요소 child 를 구하려면 > 를 사이에 넣어 표현합니다. 단 바로 하위의 자식들 중에서만 요소를 선택하며, 그 하위 자손 요소들은 선택하지 않습니다.

$('.parent > .child') //class 속성값이 parent 인 요소의 자식중에 class 속성값이 .child인 요소들을 선택합니다.

자식(Child) 및 후손 선택자

만약 바로 하위 자손뿐만 아니라 모든 후손들을 대상으로 선택하고 싶은 경우에는 공백을 넣어 표현합니다.

$('.parent .child') //class 속성값이 parent 인 요소의 하위에 있는 class 속성값이 .child인 모든 요소들을 선택합니다. 

다음에 오는 요소 선택

특정 요소 바로 다음에 오는 요소 하나만을 선택하는 경우에는 + 를 사용합니다. 주의할점으로는 바로 다음요소 하나만을 선택한다는 점입니다.

$('#prev + *') //id속성값이 prev인 요소의 바로 다음으로 요소 하나만 선택                        

다음에 오는 모든 형제 요소

특정 요소 다음으로 오는 모든 형제(siblings) 요소들을 선택할 때에는 ~ 를 사용합니다. 단 형제들만을 선택하며 형제들의 하위 요소까지는 선택하지 않습니다.

$('#first ~ *') //id 값이 first인 요소의 다음으로 존재하는 모든 형제 요소들을 선택