[JQuery] 선택자 시각적으로 정리

선택자

태그 선택자

div 태그  span 태그

$('div')

$('input')

$('span')

[위 코드에 마우스를 가져가세요]

아이디 선택자

id : div01  id : span01

$('#div01')

$('#input01')

$('#span01')

[위 코드에 마우스를 가져가세요]

클래스 선택자

class : divClass

 

class : spanClass class : spanClass class : spanClass

$('.divClass')

$('.inputClass')

$('.spanClass')

[위 코드에 마우스를 가져가세요]

자손 선택자 ('>') / 후손 선택자 (' ')

id: div0

id : div1

 

id : div2

span 태그 span 태그 span 태그

$('#div0 > *')

$('#div0 *')

$('#div0 span')

[위 코드에 마우스를 가져가세요]

입력 양식 필터 선택자 / 위치 필터 선택자

$(':button')

$(':text')

$(':file')

$(':password')

$(':focus')

$(':input')

$(':odd')

$(':even')

$(':first')

$(':last')

[위 코드에 마우스를 가져가세요]

그외, 함수 필터 선택자

선택자 형태	설명
:contains(문자열)	특정 문자열을 포함하는 문서 객체를 선택
:eq(n)	n번째에 위치하는 문서 객체를 선택
:gt(n)	n번째 초과에 위치하는 문서 객체를 선택
:has(h1)	h1 태그가 있는 문서 객체를 선택
:lt(n)	n번째 미만에 위치하는 문서 객체를 선택
:not(선택자)	선택자와 일치하지 않는 문서 객체를 선택
:nth-child(3n+1)	3n+1번째에 위치하는 문서 객체를 선택