본문 바로가기
jQuery/jQuery Reference

jQuery selector

by 진격의 파파 2013. 5. 29.
반응형

 

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 함
 

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

반응형

'jQuery > jQuery Reference ' 카테고리의 다른 글

jQuery 기타 References  (0) 2013.06.07
jQuery AJAX 함수 Reference  (0) 2013.06.05
jQuery HTML / CSS 함수 Reference  (0) 2013.06.04
jQuery Effect 함수들  (0) 2013.05.31
jQuery Examples  (0) 2013.05.28