"JQuery 셀렉터"의 두 판 사이의 차이

3번째 줄: 3번째 줄:
;jQuery 셀럭터, jQuery 선택자
;jQuery 셀럭터, jQuery 선택자


==목록==
 
==id, class, tag로 선택 ★★★==
{| class='wikitable'
{| class='wikitable'
!셀렉터
!셀렉터
!예시
!예시
!설명
!설명
|-
|colspan='3' align='left' bgcolor='#FFEEEE'| '''id, class, tag로 선택 ★★★'''
|-
|-
| *||$("*")||모든 요소들
| *||$("*")||모든 요소들
22번째 줄: 21번째 줄:
|-
|-
| el1,el2,el3||$("h1,div,p")||<nowiki><h1></nowiki>, <nowiki><div></nowiki> and <nowiki><p></nowiki> 요소들
| el1,el2,el3||$("h1,div,p")||<nowiki><h1></nowiki>, <nowiki><div></nowiki> and <nowiki><p></nowiki> 요소들
|-
|}
|colspan='3' align='left' bgcolor='#FFEEEE'|'''처음, 마지막, 홀수, 짝수 선택 ★'''
 
==처음, 마지막, 홀수, 짝수 선택 ★==
{| class='wikitable'
!셀렉터
!예시
!설명
|-
|-
| :first||$("p:first")||첫번째 <nowiki><p></nowiki> 요소
| :first||$("p:first")||첫번째 <nowiki><p></nowiki> 요소
32번째 줄: 36번째 줄:
|-
|-
| :even||$("tr:even")||짝수번째 <nowiki><tr></nowiki> 요소들
| :even||$("tr:even")||짝수번째 <nowiki><tr></nowiki> 요소들
|-
|}
|colspan='3' align='left' bgcolor='#FFEEEE'|'''자식, 타입에 따른 선택'''
 
==자식, 타입에 따른 선택==
{| class='wikitable'
!셀렉터
!예시
!설명
|-
|-
| :first-child||$("p:first-child")||All <nowiki><p></nowiki> elements that are the first child of their parent
| :first-child||$("p:first-child")||All <nowiki><p></nowiki> elements that are the first child of their parent
41번째 줄: 50번째 줄:
| :last-child||$("p:last-child")||All <nowiki><p></nowiki> elements that are the last child of their parent
| :last-child||$("p:last-child")||All <nowiki><p></nowiki> elements that are the last child of their parent
|-
|-
| :last-of-type||$("p:last-of-type")||All <nowiki><p></nowiki> elements that are the last <nowiki><p></nowiki> element of their parent
| :last-of-type
|$("p:last-of-type")
|All <nowiki><p></nowiki> elements that are the last <nowiki><p></nowiki> element of their parent
|-
|-
| :nth-child(n)||$("p:nth-child(2)")||All <nowiki><p></nowiki> elements that are the 2nd child of their parent
| :nth-child(n)
| $("p:nth-child(2)")||All <nowiki><p></nowiki> elements that are the 2nd child of their parent
|-
|-
| :nth-last-child(n)||$("p:nth-last-child(2)")||All <nowiki><p></nowiki> elements that are the 2nd child of their parent, counting from the last child
| :nth-last-child(n)
| $("p:nth-last-child(2)")
|All <nowiki><p></nowiki> elements that are the 2nd child of their parent, counting from the last child
|-
|-
| :nth-of-type(n)||$("p:nth-of-type(2)")||All <nowiki><p></nowiki> elements that are the 2nd <nowiki><p></nowiki> element of their parent
| :nth-of-type(n)
| $("p:nth-of-type(2)")
|All <nowiki><p></nowiki> elements that are the 2nd <nowiki><p></nowiki> element of their parent
|-
|-
| :nth-last-of-type(n)||$("p:nth-last-of-type(2)")||All <nowiki><p></nowiki> elements that are the 2nd <nowiki><p></nowiki> element of their parent, counting from the last child
| :nth-last-of-type(n)
| $("p:nth-last-of-type(2)")
|All <nowiki><p></nowiki> elements that are the 2nd <nowiki><p></nowiki> element of their parent, counting from the last child
|-
|-
| :only-child||$("p:only-child")||All <nowiki><p></nowiki> elements that are the only child of their parent
| :only-child||$("p:only-child")
|All <nowiki><p></nowiki> elements that are the only child of their parent
|-
|-
| :only-of-type||$("p:only-of-type")||All <nowiki><p></nowiki> elements that are the only child, of its type, of their parent
| :only-of-type||$("p:only-of-type")||All <nowiki><p></nowiki> elements that are the only child, of its type, of their parent
|-
|}
|colspan='3' align='left' bgcolor='#FFEEEE'| '''태그간 관계에 따른 선택'''
 
==태그간 관계에 따른 선택==
{| class='wikitable'
!셀렉터
!예시
!설명
|-
|-
| parent > child||$("div > p")||All <nowiki><p></nowiki> elements that are a direct child of a <nowiki><div></nowiki> element
| parent > child||$("div > p")||All <nowiki><p></nowiki> elements that are a direct child of a <nowiki><div></nowiki> element
64번째 줄: 88번째 줄:
|-
|-
| element ~ siblings||$("div ~ p")||All <nowiki><p></nowiki> elements that are siblings of a <nowiki><div></nowiki> element
| element ~ siblings||$("div ~ p")||All <nowiki><p></nowiki> elements that are siblings of a <nowiki><div></nowiki> element
|-
|}
|colspan='3' align='left' bgcolor='#FFEEEE'|'''비교에 따른 선택'''
 
==비교에 따른 선택==
{| class='wikitable'
!셀렉터
!예시
!설명
|-
|-
| :eq(index)||$("ul li:eq(3)")||The fourth element in a list (index starts at 0)
| :eq(index)
|$("ul li:eq(3)")
|The fourth element in a list (index starts at 0)
|-
|-
| :gt(no)||$("ul li:gt(3)")||List elements with an index greater than 3
| :gt(no)||$("ul li:gt(3)")
|List elements with an index greater than 3
|-
|-
| :lt(no)||$("ul li:lt(3)")||List elements with an index less than 3
| :lt(no)||$("ul li:lt(3)")||List elements with an index less than 3
75번째 줄: 107번째 줄:
| :not(selector)||$("input:not(:empty)")||All input elements that are not empty
| :not(selector)||$("input:not(:empty)")||All input elements that are not empty
|-  
|-  
|colspan='3' align='left' bgcolor='#FFEEEE'|'''태그 등에 따른 선택'''
 
==태그 등에 따른 선택==
{| class='wikitable'
!셀렉터
!예시
!설명
|-
|-
| :header||$(":header")||All header elements <nowiki><h1></nowiki>, <nowiki><h2></nowiki> ...
| :header
|$(":header")
|All header elements <nowiki><h1></nowiki>, <nowiki><h2></nowiki> ...
|-
|-
| :animated||$(":animated")||All animated elements
| :animated
|$(":animated")
|All animated elements
|-
|-
| :focus||$(":focus")||The element that currently has focus
| :focus||$(":focus")||The element that currently has focus
98번째 줄: 139번째 줄:
|-
|-
| :lang(language)||$("p:lang(de)")||All <nowiki><p></nowiki> elements with a lang attribute value starting with "de"
| :lang(language)||$("p:lang(de)")||All <nowiki><p></nowiki> elements with a lang attribute value starting with "de"
|-
|}
|colspan='3' align='left' bgcolor='#FFEEEE'|'''attribute에 따른 선택'''
 
==attribute에 따른 선택==
{| class='wikitable'
!셀렉터
!예시
!설명
|-
|-
| <nowiki>[attribute]</nowiki> ||$("[href]")||All elements with a href attribute
| <nowiki>[attribute]</nowiki> ||$("[href]")||All elements with a href attribute
116번째 줄: 162번째 줄:
|-
|-
| <nowiki>[attribute*=value]</nowiki> ||$("[title*='hello']")||All elements with a title attribute value containing the string "hello"
| <nowiki>[attribute*=value]</nowiki> ||$("[title*='hello']")||All elements with a title attribute value containing the string "hello"
|-
|}
|colspan='3' align='left' bgcolor='#FFEEEE'|'''input 태그 선택 ★'''
 
==input 태그 선택 ★==
{| class='wikitable'
!셀렉터
!예시
!설명
|-
|-
| :input||$(":input")||모든 input 요소들
| :input||$(":input")||모든 input 요소들

2015년 9월 25일 (금) 09:05 판

jQuery selector
jQuery 셀럭터, jQuery 선택자


1 id, class, tag로 선택 ★★★

셀렉터 예시 설명
* $("*") 모든 요소들
#id $("#lastname") id가 "lastname"인 요소
.class $(".intro") 클래스가 "intro"인 요소들
.class,.class $(".intro,.demo") 클래스가 "intro" 또는 "demo"인 요소들
element $("p") <p> 요소들
el1,el2,el3 $("h1,div,p") <h1>, <div> and <p> 요소들

2 처음, 마지막, 홀수, 짝수 선택 ★

셀렉터 예시 설명
:first $("p:first") 첫번째 <p> 요소
:last $("p:last") 마지막 <p> 요소
:odd $("tr:odd") 홀수번째 <tr> 요소들
:even $("tr:even") 짝수번째 <tr> 요소들

3 자식, 타입에 따른 선택

셀렉터 예시 설명
:first-child $("p:first-child") All <p> elements that are the first child of their parent
:first-of-type $("p:first-of-type") All <p> elements that are the first <p> element of their parent
:last-child $("p:last-child") All <p> elements that are the last child of their parent
:last-of-type $("p:last-of-type") All <p> elements that are the last <p> element of their parent
:nth-child(n) $("p:nth-child(2)") All <p> elements that are the 2nd child of their parent
:nth-last-child(n) $("p:nth-last-child(2)") All <p> elements that are the 2nd child of their parent, counting from the last child
:nth-of-type(n) $("p:nth-of-type(2)") All <p> elements that are the 2nd <p> element of their parent
:nth-last-of-type(n) $("p:nth-last-of-type(2)") All <p> elements that are the 2nd <p> element of their parent, counting from the last child
:only-child $("p:only-child") All <p> elements that are the only child of their parent
:only-of-type $("p:only-of-type") All <p> elements that are the only child, of its type, of their parent

4 태그간 관계에 따른 선택

셀렉터 예시 설명
parent > child $("div > p") All <p> elements that are a direct child of a <div> element
parent descendant $("div p") All <p> elements that are descendants of a <div> element
element + next $("div + p") The <p> element that are next to each <div> elements
element ~ siblings $("div ~ p") All <p> elements that are siblings of a <div> element

5 비교에 따른 선택

6 태그 등에 따른 선택

셀렉터 예시 설명
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
:not(selector) $("input:not(:empty)") All input elements that are not empty
셀렉터 예시 설명
:header $(":header") All header elements <h1>, <h2> ...
:animated $(":animated") All animated elements
:focus $(":focus") The element that currently has focus
:contains(text) $(":contains('Hello')") All elements which contains the text "Hello"
:has(selector) $("div:has(p)") All <div> elements that have a <p> element
:empty $(":empty") All elements that are empty
:parent $(":parent") All elements that are a parent of another element
:hidden $("p:hidden") All hidden <p> elements
:visible $("table:visible") All visible tables
:root $(":root") The document’s root element
:lang(language) $("p:lang(de)") All <p> elements with a lang attribute value starting with "de"

7 attribute에 따른 선택

셀렉터 예시 설명
[attribute] $("[href]") All elements with a href attribute
[attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to "default.htm"
[attribute!=value] $("[href!='default.htm']") All elements with a href attribute value not equal to "default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with ".jpg"
[attribute|=value] ='Tomorrow']") All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with "Tom"
[attribute~=value] $("[title~='hello']") All elements with a title attribute value containing the word "hello"
[attribute*=value] $("[title*='hello']") All elements with a title attribute value containing the string "hello"

8 input 태그 선택 ★

셀렉터 예시 설명
:input $(":input") 모든 input 요소들
:text $(":text") 타입이 "text"인 input 요소들 ★★
:password $(":password") 타입이 "password"인 input 요소들
:radio $(":radio") 타입이 "radio"인 input 요소들
:checkbox $(":checkbox") 타입이 "checkbox"인 input 요소들
:submit $(":submit") 타입이 "submit"인 input 요소들
:reset $(":reset") 타입이 "reset"인 input 요소들
:button $(":button") 타입이 "button"인 input 요소들
:image $(":image") 타입이 "image"인 input 요소들
:file $(":file") 타입이 "file"인 input 요소들
:enabled $(":enabled") enabled인 input 요소들
:disabled $(":disabled") disabled인 input 요소들
:selected $(":selected") selected인 input 요소들
:checked $(":checked") checked인 input 요소들

9 같이 보기

10 참고 자료