JQUERY - 선택자(Selector) 요약 정리

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

[ 선택자(Selector) ]

1) 전체 선택자 $('*')

- 페이지에 있는 모든 객체를 선택

 

2) 태그 선택자 $('태그명')

- 해당 태그를 선택

 

3) ID 선택자 $('#ID명')

- 해당 ID를 선택

 

4) 클래스 선택자 $('.클래스명')

- 해당 클래스를 선택

 

5) 자손 선택자 $('부모요소 > 자손요소')

- 부모요소의 자손요소를 선택(인접 하위 요소)

- 예시

$('body > div') body의 하위에 위치한 div 태그만 선택

 

6) 후손 선택자 $('부모요소 후손요소')

- 부모요소의 후손요소를 선택(모든 하위 요소)

- 예시

$('body > div') : body의 하위에 위치한 모든 div 태그 선택

 

7) 속성 선택자

- 요소의 속성 조건에 맞는 요소를 선택

- 기본형태: 요소[속성=값]

- 예시

$('input[type="text"]') : input태그 중 type이 text인 요소만 선택

- 속성 선택 조건

[속성=A] : 값이 A인 경우

[속성|=A] : 값이 A로 시작하는 경우(- 하이픈으로 구분)

[속성~=A] : 값이 A로 시작하는 경우(띄어쓰기로 구분)

*위의 두 선택자는 하이픈 혹은 띄어쓰기가 없으면 선택되지 않음

[속성^=A] : 값이 A로 시작하는 모든 경우

[속성$=A] : 값이 A로 끝나는 경우

[속성*=A] : 값에 A가 포함되는 모든 경우

 

8) 입력 양식(form) 필터 선택자

- 입력 양식의 속성을 선택

- 형식: $(':input 타입or타입속성')

- 기본 타입: button checkbox, file, image, password, radio, reset, submit, text

- 타입 속성

checked 체크되어있는 입력 양식 선택

disabled: 비활성화된 입력 양식 선택

enabled: 활성화된 입력 양식 선택

focus: 초점이 맞춰진 입력 양식 선택

input: 모든 입력양식 선택

selected: option 객체 중 선택된 객체를를 선택

- 예시

$(':text').css('color', 'red') input 태그 중 type이 text인 요소의 색깔을 빨간색으로 변경

$(':selected').css('color', 'red') option 객체 중 선택된 객체를 빨간색으로 변경

 

9) 위치 필터 선택자

- 위치에 맞는 요소 선택

- 형식: $('요소:형태')

- 형태

odd: 홀수 객체 선택

even: 짝수 객체 선택

first: 첫 번째 객체 선택

last: 마지막 객체 선택

- 예시

$('tr:even').css('color', 'red') tr태그 중 짝수인 태그만 빨간색으로 변경

 

10) 함수 필터 선택자

- 함수를 이용해서 요소 선택

- 형태 $('요소:형태')

- 형태

contains(문자열) : 특정 문자열을 포함하는 객체 선택

eq(n) : n번째에 위치한 객체 선택

gt(n) : n번째 초과에 위치한 객체 선택

has(요소) : 요소를 가진 객체 선택

lt(n) : n번째 미만에 위치한 객체 선택

not(선택자) : 선택자를 제외하고 모든 선택

nth-child(3n+1) : 3n+1번째에 위치한 객체 선택(상황에 맞게 매개변수 수정 가능)