jQuery 선택자
태그 선택자
태그 요소 이름을 직접적으로 명시하여 요소를 선택합니다.
// 페이지의 모든 <p> 요소 선택
$('p')
id 선택자
특정 id를 가지는 요소를 선택합니다.
// id가 'userName'인 요소 선택
$('#userName')
class 선택자
특정 class를 가지는 요소를 선택합니다.
// 클래스명이 'user-group'인 요소 선택
$('.user-group')
자식 선택자
특정 요소의 1차 자식 요소를 선택합니다.
'요소A > 요소B'의 형태로 사용합니다.
// body 요소의 모든 직접 자식 요소 선택
$('body > *')
후손 선택자
특정 요소의 후손(모든 자식) 요소를 선택합니다.
'요소A 요소B'의 형태로 사용합니다.
// form의 자식 요소들 중 input에 해당하는 모든 자식 요소들 선택
$("form input")
속성 선택자
- 요소[속성 = 값] : 속성 안의 값이 정확히 특정 값인 요소 선택
- 요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 요소 선택
- 요소[속성 ~= 값] : 속성 안의 값이 특정 값을 단어로 시작하는 요소 선택
- 요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 요소 선택
- 요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 요소 선택
// text를 입력받는 input 요소 선택
$('input[type=text]')
위치 필터 선택자
- 요소:odd : 홀수 번째에 위치한 요소 선택
- 요소:even : 짝수 번째에 위치한 요소 선택
- 요소:first : 첫 번째에 위치한 요소 선택
- 요소:last : 마지막에 위치한 요소 선택
// target에서 가장 마지막에 위치한 요소 선택
$('#target:last')
함수 필터 선택자
- 요소:eq(idx) : idx번쨰 인덱스에 위치하는 요소 선택
- 요소:gt(idx) : idx번쨰 인덱스보다 큰 인덱스에 위치하는 모든 요소 선택
- 요소:lt(idx) : idx번쨰 인덱스보다 작은 인덱스에 위치하는 모든 요소 선택
- 요소:contains(text) : 지정한 text를 포함하는 모든 요소 선택
- 요소:has(selector) : 지정한 selector를 포함하는 모든 요소 선택
- 요소:not(selector) : 지정한 selector와 일치하지 않은 모든 요소 선택
// target에서 'Hello'를 포함하고 있는 모든 요소 선택
$('#target:contains('Hello')')
입력 양식 필터 선택자
- 요소:button : input 태그 중 type 속성이 button인 요소 선택
- 요소:checkbox : input 태그 중 type 속성이 checkbox인 요소 선택
- 요소:radio : input 태그 중 type 속성이 radio인 요소 선택
- 요소:text : input 태그 중 type 속성이 text인 요소 선택
- 요소:image : input 태그 중 type 속성이 image인 요소 선택
- 요소:checked : 체크되어 있는 모든 요소 선택
- 요소:selected : 선택되어 있는 모든 요소 선택
- 요소:disabled : 비활성화된 모든 요소 선택
- 요소:enabled : 활성화된 모든 요소 선택
- 요소:focus : 현재 포커스가 있는 요소 선택
- 요소:input : 모든 입력 양식 요소 선택
// checkbox로 입력받는 input 요소 중 체크되어 있는 모든 요소 선택
$('input[type=checkbox]:checked')
728x90
반응형
'Web > jQuery' 카테고리의 다른 글
[jQuery] jQuery 이벤트 처리 (0) | 2024.07.14 |
---|---|
[jQuery] JavaScript와 jQuery (0) | 2024.07.07 |