본문 바로가기

[jQuery] 주요 셀렉터 & 필터 셀렉터

인포꿀팁 발행일 : 2020-11-17

DOM의 요소(엘리먼트)를 선택하는 셀렉터

셀렉터 설명
$("*") 모든 요소를 선택
$("#ID") 아이디가 ID인 모든 요소 선택
$("T") 이름이 T인 모든 요소 선택
$("T t") 이름이 T인 요소의 자식 요소중 태그 이름이 t 인 모든 요소 선택
$("T > t") T 요소의 바로 아래 자식은 t요소와 일치
$("T1 + T2") T1요소의 바로 다음에 나오는 형제요소 T2와 일치
$("T1 ~ T2") T1요소의 다음에 나오는 모든 형제요소 T2와 일치
$("T [attr]")
attr 의 속성을 가지고 있는 모든 T 요소 선택
$("T [attr=val]") attr 의 속성에 대한 값이 val을 가지고 잇는 모든 T 요소 선택
$("T [attr^=val]") attr 의 속성에 대한 값이 val로 시작하는 모든 T 요소 선택
 $("T [attr$=val]") attr의 속성에 대한 값이 val로 끝나는 모든 T 요소 선택
$("T [attr*=val]") attr의 속성에 대한 값이 val을 포함하는 모든 T 요소 선택
$("[name*=txt]") name이 txt를 포함하는 모든 요소
$("[id*=txt]") id가 txt를 포함하는 모든 요소
$("[id^=txt]") id가 txt로 시작하는 모든 요소

 

필터 셀렉터

셀렉터 설명
:first 페이지 처음 선택된 엘리먼트 선택 
:last 페이지 마지막 선택된 엘리먼트 선택
:not(selector) 주어진 실렉터와 반대의 모든 엘리먼트 선택
:even 페이지의 짝수 번째 엘리먼트 선택(인덱스는 0부터 시작)
:odd 페이지의 홀수 번째 엘리먼트 선택(인덱스는 0부터 시작) 
:eq(index) 지정된 index 번째의 엘리먼트 선택 
:gt(index) 지정된 index 번째의 엘리먼트(포함되지 않음) 이후의 엘리먼트 선택
:lt(index) 지정된 index 번째의 엘리먼트(포함되지 않음) 이전의 엘리먼트 선택
:header 헤더 <h1> ~ <h6> 엘리먼트 선택
:animated 현재 애니메이션이 적용되고 있는 엘리먼트 선택

 

댓글