jQuery selector

 

Selector	Example	Selects
*	$("*")	모든요소 선택
#id	$("#lastname")	아이디 lastname 요소 선택
.class	$(".intro")	클래스 intro 요소 선택
.class,.class	$(".intro,.demo")	클래스 intro, demo 요소 선택
element	$("p")	태그 p 요소 선택
el1,el2,el3	$("h1,div,p")	모든 <h1>, <div>, <p> 요소 선택
:first	$("p:first")	첫번째 <p> 요소 선택
:last	$("p:last")	마지막 <p> 요소 선택
:even	$("tr:even")	모든 <tr> 의 짝수 요소(0,2,4…) 선택
:odd	$("tr:odd")	모든 <tr> 의 홀수 요소(1,3,5…) 선택
:first-child	$("p:first-child")	모든 <p> 요소의 부모의 첫번째 자식요소 선택
:first-of-type	$("p:first-of-type")	모든 <p> 요소들 중에서 부모의 첫번째 <p> 요소 선택
:last-child	$("p:last-child")	모든 <p> 요소의 부모의 마지막 자식요소 선택
:last-of-type	$("p:last-of-type")	모든 <p> 요소들 중에서 부모의 마지막 <p> 요소 선택
:nth-child(n)	$("p:nth-child(2)")	모든 <p> 요소들 중에서 부모의 두번째 <p> 요소 선택
:nth-last-child(n)	$("p:nth-last-child(2)")	모든 <p> 요소들 중에서 부모의 뒤에서 두번째 <p> 요소 선택
:nth-of-type(n)	$("p:nth-of-type(2)")	모든 <p> 요소들 중에서 부모의 두번째 <p> 요소 선택
:nth-last-of-type(n)	$("p:nth-last-of-type(2)")	모든 <p> 요소들 중에서 부모의 끝에서 두번째 <p> 요소 선택
:only-child	$("p:only-child")	모든 <p> 요소들 중에서 <P> 요소가 유일한 자식이면 선택 (p요소가 하나라도 있으면 선택안함)
:only-of-type	$("p:only-of-type")	모든 <p> 요소들 중에서 <P> 요소가 유일한 타입이면 선택 (p아닌 요소가 포함되어도 p타입이 유일하면 선택))
parent > child	$("div > p")	<div> 요소의 직계 자식 인 모든 <P> 요소 선택
parent descendant	$("div p")	<div> 요소의 하위 모든 <P> 요소 선택
element + next	$("div + p")	각 <DIV> 요소 옆에 <p> 요소 선택
element ~ siblings	$("div ~ p")	<div> 요소의 모든 형제 <P> 요소 선택
:eq(index)	$("ul li:eq(3)")	목록의 네 번째 요소 (인덱스 0에서 시작) 선택
:gt(no)	$("ul li:gt(3)")	3보다 큰 인덱스 목록 요소 선택
:lt(no)	$("ul li:lt(3)")	3보다 적은 인덱스 목록 요소 선택
:not(selector)	$("input:not(:empty)")	비어 있지 않은 모든 입력 요소 선택
:header	$(":header")	모든 헤더 요소 <H1>, <H2> … 선택
:animated	$(":animated")	모든 animated 요소 선택
:focus	$(":focus")	현재 포커스가있는 요소 선택
:contains(text)	$(":contains('Hello')")	텍스트 "Hello"가 포함 된 모든 요소 선택
:has(selector)	$("div:has(p)")	<p> 요소가있는 모든 <DIV> 요소 선택
:empty	$(":empty")	모든 empty 요소
:parent	$(":parent")	다른 요소의 부모인 모든 요소 선택
:hidden	$("p:hidden")	모든 <P> 요소들을 숨김
:visible	$("table:visible")	모든 table 들을 보여줌
:root	$(":root")	문서의 루트 요소 선택
:lang(language)	$("p:lang(de)")	"de"로 시작하는 language 속성값을 가진 모든 <P>요소 선택
[attribute]	$("[href]")	href 속성을 가진 모든 요소 선택
[attribute=value]	$("[href='default.htm']")	"default.htm"에 해당하는 href 속성 값을 가진 모든 요소
[attribute!=value]	$("[href!='default.htm']")	"default.htm"에 해당하지 않는 href 속성 값을 가진 모든 요소
[attribute$=value]	$("[href$='.jpg']")	"jpg"로 끝나는 href 속성값을 가진 모든 요소 선택
[attribute|=value]	$("[hreflang|='en']")	href의 속성값 중에서 "en"으로 시작하는 모든 요소 선택
[attribute^=value]	$("[name^='hello']")	name 속성값 중에서 "hello"로 시작하는 모든 요소 선택
[attribute~=value]	$("[name~='hello']")	name 속성값 중에서 "hello"를 포함하는 모든 요소 선택
[attribute*=value]	$("[name*='hello']")	name 속성값 중에서 "hello"라는 문자열이 포함된 모든 요소 선택
:input	$(":input")	모든 input 요소 선택
:text	$(":text")	type이 text인 모든 input 요소 선택
:password	$(":password")	type이 password인 모든 input 요소 선택
:radio	$(":radio")	type이 radio인 모든 input 요소 선택
:checkbox	$(":checkbox")	type이 checkbox인 모든 input 요소 선택
:submit	$(":submit")	type이 submit인 모든 input 요소 선택
:reset	$(":reset")	type이 reset인 모든 input 요소 선택
:button	$(":button")	type이 button인 모든 input 요소 선택
:image	$(":image")	type이 image인 모든 input 요소 선택
:file	$(":file")	type이 file인 모든 input 요소 선택
:enabled	$(":enabled")	input 요소들를 모두 활성화 함
:disabled	$(":disabled")	input 요소들을 모두 비활성화 함
:selected	$(":selected")	input 요소들을 모두 selected 함
:checked	$(":checked")	input 요소들을 모두 checked 함

 

나름대로 정의를 한 내용이라서 혹시라도 정의가 잘못된 내용이 있으면 댓글 부탁드립니다. 바로바로 바꿔 놓겠습니다. 모쪼록 코딩하는데 조금이라도 도움이 되길 바랍니다.