jQuery 전용 선택자 종류

 

 

📍 기본 필터 선택자(Basic Filter)

선택자	예제	설명
:odd	$("div:odd")	홀수 번째에 위치한 문서 객체를 선택함
:even	$("div:even")	짝수 번째에 위치한 문서 객체를 선택함
:first	$("div:first")	첫 번째 위치한 문서 객체를 선택함
:last	$("div:last")	마지막에 위치한 문서 객체를 선택함

 

 

선택자	예제	설명
:root	$("div:root")	document의 루트 요소 선택
:target	$("div:target")	document의 URL의 flagment 식별자로 지정된 대상 요소를 선택
:header	$("div:header")	h1, h2, h3 등과 같이 헤더인 모든 요소를 선택
:empty	$("div:empty")	자식이 없는 모든 요소(텍스트 노드 포함)를 선택
:parent	$("div:parent")	하나 이상의 하위 노드(요소 또는 텍스트)가 있는 모든 요소를 선택

​

📍 함수 필터 선택자(function Filter)

선택자	예제	설명
:eq(index)	$("div:eq(1)")	일치하는 집합 내의 인덱스 n에 있는 요소를 선택
:gt(index)	$("div:gt(2)")	일치하는 세트 내의 인덱스보다 큰 인덱스에서 모든 요소를 선택
:lang(language)	$("div:lang(en-us)")	지정된 언어의 모든 요소를 선택
:lt(index)	$("div:lt(4)")	일치하는 집합 내의 인덱스보다 작은 인덱스에서 모든 요소를 선택
:not(selector)	$("div:not(:checked)")	지정된 선택자와 일치하지 않은 모든 요소를 선택
:contains(text)	$("div:contains('Hello'")	지정된 텍스트를 포함하는 모든 요소를 선택
:has(selector)	$("div:has(p)")	지정한 선택자와 일치하는 요소를 하나 이상 포함하는 요소를 선택
:animated	$("div:animated")	선택자를 실행할 때 애니메이션 진행 상태에 있는 모든 요소를 선택 ":not(:animated)" => 애니메이션중이지 않은것

​

📍 입력 양식 폼(Form) 필터 선택자

선택자	예제	설명
:button	$(":button")	input 태그중 type 속성이 button인 문서 객체와 button 태그를 선택
:checkbox	$(":checkbox")	체크박스 유형의 모든 요소 선택
:checked	$(":checked")	체크되거나 선택된 모든 요소와 일치한 요소 선택
:disabled	$(":disabled")	비활성화된 모든 요소 선택
:enabled	$(":enabled")	활성화된 모든 요소 선택
:file	$(":file")	파일 유형의 모든 요소를 선택
:focus	$(":focus")	현재 포커스가 있는 요소 선택
:image	$(":image")	이미지 유형의 모든 요소 선택
:input	$(":input")	모든 input, textarea, select, button 요소 선택
:password	$(":password")	패스워드 유형의 모든 요소 선택
:radio	$(":radio")	라디오 유형의 모든 요소 선택
:reset	$(":reset")	reset 유형의 모든 요소 선택
:selected	$(":selected")	선택된 모든 요소 선택
:submit	$(":submit")	submit 유형의 모든 요소 선택
:text	$(":text")	text 유형의 모든 input 요소 선택

<select>
   <option>사과 </option>
   <option>딸기 </option>
   <option>수박 </option>
   <option>멜론  </option>
</select>

<script>
	$('select > option:selected').val();   // select 로 선택된 값이 찾기
</script>
출처: https://inpa.tistory.com/entry/jQuery-📚-제이쿼리-선택자-Selector-💯-정리 [Inpa Dev 👨‍💻:티스토리]

 

📍 가시성 필터 선택자 (Visibility Fileter)

선택자	예제	설명
:hidden	$("div:hidden")	hidden 된 모든 요소 선택
:visible	$("div:visible")	visible인 모든 요소 선택