본문 바로가기
Javascript/jQuery

jQuery 알아보기 : 필터 선택자

by 코딩 척척학사 2022. 9. 1.
728x90

jQuery 필터 선택자 알아보기

jQuery 필터 선택자

분류 선택자 종류 설명 예제
필터
선택자
:even $("tr:even") tr 요소 중 짝수 행만 선택합니다. 보러
가기
:odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다.
:first $("td:first") 첫 번째 td 요소를 선택합니다.
:last $("td:last") 마지막 td 요소를 선택합니다.
:header $(":header") 헤딩(h1~h6) 요소를 선택합니다.
:eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다.
:gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다.
:lt() $("li:lt(2)") index가 2보다 작은 li 요소들을 선택합니다.
:not() $("li:not(.bg)") li 요소 중에서 class명이 bg가 아닌 li 요소를 선택합니다.
:root $(":root") html을 의미합니다.
:animated $(":animated") 움직이는 요소를 선택합니다.
자식 필터
선택자
:first-child $("span:first-child") 첫 번째 span 요소를 선택합니다. 보러
가기
:last-child $("span:last-child") 마지막 span 요소를 선택합니다.
:first-of-type $("span:first-of-type") span 요소 중에서 첫 번째 span 요소를 선택합니다.
:last-of-type $("span:last-of-type") span 요소 중에서 마지막 span 요소를 선택합니다.
:nth-child() $("span:nth-child(2)") 두 번째 span 요소를 선택합니다.
nth-child(2n)은 짝수 번째 요소를 선택하고, nth-child(2n+1)은 홀수 번째 요소를 선택합니다.
:nth-last-child() $("span:nth-last-child(2)") 마지막에서 두 번째 span 요소를 선택합니다.
:nth-of-type() $("span:nth-of-type(2)") span 요소 중에서 두 번째 span 요소를 선택합니다.
:nth-last-of-type() $("span:nth-last-of-type(2)") span 요소 중에서 마지막에서 두 번째 span 요소를 선택합니다.
:only-child $("div > span:only-child") div의 자식요소에서 오직 span 요소 하나만 있는 span 요소를 선택합니다.
:only-of-type $("div > span:only-of-type") div의 자식요소에서 span 요소가 하나만 있는 span 요소를 선택합니다.
콘텐츠 필터
선택자
:contains() $("p:contains('html')") p 요소 중에서 'html' 텍스트를 포함하고 있는 p 요소를 선택합니다. 보러
가기
:empty $("div:empty") div 요소 중에서 자식 요소가 없는 div 요소를 선택합니다.
:parent $("span:parent") span 요소 중에서 자식 요소가 있는 span 요소를 선택합니다.
:has() $("section:has(article)") section 요소 중에서 article을 하위 요소로 가지고 있는 section 요소를 선택합니다.
폼 필터
선택자
:text $("input:text") <input type="text"> 요소를 선택합니다. 보러
가기
:password $("input:password") <input type="password"> 요소를 선택합니다.
:image $("input:image") <input type="image"> 요소를 선택합니다.
:file $("input:file") <input type="file"> 요소를 선택합니다.
:button $("input:button") <input type="button">, <button> 요소를 선택합니다.
:checkbox $("input:checkbox") <input type="checkbox"> 요소를 선택합니다.
:radio $("input:radio") <input type="radio"> 요소를 선택합니다.
:submit $("input:submit") <input type="submit"> 요소를 선택합니다.
:reset $("input:reset") <input type="reset"> 요소를 선택합니다.
:input $(":input") 모든 <input> 요소를 선택합니다.
:checked $("input:checked") <input> 요소에 checked 속성이 있는 요소를 선택합니다.
:selected $("option:selected") <option> 요소에 selected 속성이 있는 요소를 선택합니다.
:focus $("input:focus") 현재 <input> 요소에 포커스가 있는 요소를 선택합니다.
:disabled $("input:disabled") <input> 요소에 disabled 속성이 있는 요소를 선택합니다.
:enabled $("input:enabled") <input> 요소에 disabled가 아닌 요소를 선택합니다.
가시성 필터
선택자
:hidden $("div:hidden") div 요소 중 hidden인 요소를 선택합니다. 보러
가기
:visible $("div:visible") div 요소 중 visible인 요소를 선택합니다.
728x90

댓글


HTML이 적힌 썸네일 이미지
CSS가 적힌 썸네일 이미지
JAVASCRIPT가 적힌 썸네일 이미지

JAVASCRIPT

자세히 보기