[jQuery] 선택자를 사용하는 방법

 

jQuery를 사용하여 DOM 객체를 선택하는 경우가 많은데 항상 헷갈리고 실전에서 많이 사용했던 선택자에 대해서 정리해 보았다. 

1. 자손 선택자 / 후손 선택자 

- 자손 선택자: 기준이 되는 태그 바로 하위에 위치한 선택자를 칭하며 '요소A > 요소B' 로 사용한다.

$("body > div").css("color", "red");

- 후손 선택자: '요소A 요소B' 로 사용하며 요소A의 후손을 범위로 선택한다. 

$("body *").css("color", "blue"); // body 태그 아래 모든 태그들을 범위로 칭한다. 

 

2. 속성 선택자 

- 요소[속성=값]: 속성과 값이 같은 문서 객체를 선택한다. 

- 요소[속성|=값]: 속성 안의 값이 특정 값과 같은 문서 객체를 선택한다. 

- 요소[속성~=값]: 속성 안의 값이 특정 값을 단어로 시작하는 문서 객체를 선택한다. 

- 요소[속성^=값]: 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택한다.

- 요소[속성$=값]: 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택한다. 

- 요소[속성*=값]: 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택한다. 

 

3. 입력 양식 필터 선택자 (input 태그)

- 요소:button : type 속성이 button인 문서 객체와 button 태그를 선택한다. 

- 요소:checkbox : type 속성이 checkbox인 문서 객체를 선택한다.

- 요소:file : type 속성이 file인 문서 객체를 선택한다.

- 요소:image : type 속성이 image인 문서 객체를 선택한다.

- 요소:password : type 속성이 password인 문서 객체를 선택한다.

- 요소:radio : type 속성이 radio인 문서 객체를 선택한다.

- 요소:reset : type 속성이 reset인 문서 객체를 선택한다.

- 요소:submit : type 속성이 submit인 문서 객체를 선택한다.

- 요소:text : type 속성이 text인 문서 객체를 선택한다.

- 요소:checked : 체크되어 있는 입력 양식을 선택한다.

- 요소:disabled : 비활성화된 입력 양식을 선택한다.

- 요소:enabled: 활성화된 입력 양식을 선택한다.

- 요소:focus: 초점이 맞추어져 있는 입력 양식을 선택한다.

- 요소:input: 모든 입력 양식은 선택한다. (textarea, select, button태그 포함)

- 요소:selected: option 객체 중 선택된 태그를 선택한다. (select box)