위키
포럼
도구
바뀐글
랜덤

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

잔글 (봇: 자동으로 텍스트 교체 (-== 참고 자료 == +==참고==))
 
(다른 사용자 한 명의 중간 판 27개는 보이지 않습니다)
1번째 줄: 1번째 줄:
;jQuery 셀럭터
{{소문자}}
;jQuery selector
;jQuery 셀럭터, jQuery 선택자


==목록==
==목록==
7번째 줄: 9번째 줄:
!설명
!설명
|-  
|-  
|colspan='3' align='left' bgcolor='#FFEEEE'| '''id, class, tag로 선택'''
|colspan='3' align='left' bgcolor='#FFEEEE'| '''id, class, tag로 선택 ★★★'''  
|-
|-
| *||$("*")||All elements
| *||$("*")||모든 요소들
|-
|-
| #id||$("#lastname")||The element with id="lastname"
| #id||$("#lastname")||id가 "lastname"인 요소
|-
|-
| .class||$(".intro")||All elements with class="intro"
| .class||$(".intro")||클래스가 "intro"인 요소들
|-
|-
| .class,.class||$(".intro,.demo")||All elements with the class "intro" or "demo"
| .class,.class||$(".intro,.demo")||클래스가 "intro" 또는 "demo"인 요소들
|-
|-
| element||$("p")||All <nowiki><p></nowiki> elements
| element||$("p")||<nowiki><p></nowiki> 요소들
|-
|-
| el1,el2,el3||$("h1,div,p")||All <nowiki><h1></nowiki>, <nowiki><div></nowiki> and <nowiki><p></nowiki> elements
| el1,el2,el3||$("h1,div,p")||<nowiki><h1></nowiki>, <nowiki><div></nowiki> and <nowiki><p></nowiki> 요소들
|-  
|-  
|colspan='3' align='left' bgcolor='#FFEEEE'|'''처음, 마지막, 홀수, 짝수 선택'''
|colspan='3' align='left' bgcolor='#FFEEEE'|'''처음, 마지막, 홀수, 짝수 선택 ★'''
|-
|-
| :first||$("p:first")||The first <nowiki><p></nowiki> element
| :first||$("p:first")||첫번째 <nowiki><p></nowiki> 요소
|-
|-
| :last||$("p:last")||The last <nowiki><p></nowiki> element
| :last||$("p:last")||마지막 <nowiki><p></nowiki> 요소
|-
|-
| :even||$("tr:even")||All even <nowiki><tr></nowiki> elements
| :odd||$("tr:odd")||홀수번째 <nowiki><tr></nowiki> 요소들
|-
|-
| :odd||$("tr:odd")||All odd <nowiki><tr></nowiki> elements
| :even||$("tr:even")||짝수번째 <nowiki><tr></nowiki> 요소들
|-  
|-  
|colspan='3' align='left' bgcolor='#FFEEEE'|'''자식, 타입에 따른 선택'''
|colspan='3' align='left' bgcolor='#FFEEEE'|'''자식, 타입에 따른 선택'''
41번째 줄: 43번째 줄:
| :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()|: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()|: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
| <nowiki>:nth-last-of-type(n)</nowiki> ||$("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
99번째 줄: 101번째 줄:
|colspan='3' align='left' bgcolor='#FFEEEE'|'''attribute에 따른 선택'''
|colspan='3' align='left' bgcolor='#FFEEEE'|'''attribute에 따른 선택'''
|-
|-
| [attribute]||$("[href]")||All elements with a href attribute
| <nowiki>[attribute]</nowiki> ||$("[href]")||All elements with a href attribute
|-
|-
| [attribute=value]||$("[href='default.htm']")||All elements with a href attribute value equal to "default.htm"
| <nowiki>[attribute=value]</nowiki> ||$("[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"
| <nowiki>[attribute!=value]</nowiki> ||$("[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"
| <nowiki>[attribute$=value]</nowiki> ||$("[href$='.jpg']")||All elements with a href attribute value ending with ".jpg"
|-
|-
| [attribute|=value]||$("[title|='Tomorrow']")||All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
| <nowiki>[attribute|=value]</nowiki>
| <nowiki>$("[title|='Tomorrow']")</nowiki>
|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"
| <nowiki>[attribute^=value]</nowiki>
| <nowiki>$("[title^='Tom']")</nowiki>
| 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"
| <nowiki>[attribute~=value]</nowiki>
| <nowiki>$("[title~='hello']")</nowiki>
|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"
| <nowiki>[attribute*=value]</nowiki>
| <nowiki>$("[title*='hello']")</nowiki>
|All elements with a title attribute value containing the string "hello"
|-  
|-  
|colspan='3' align='left' bgcolor='#FFEEEE'|'''input 태그 선택'''
|colspan='3' align='left' bgcolor='#FFEEEE'|'''input 태그 선택 ★'''
|-
|-
| :input||$(":input")||All input elements
| :input||$(":input")||모든 input 요소들
|-
|-
| :text||$(":text")||All input elements with type="text"
| :text||$(":text")||타입이 "text"인 input 요소들 ★★
|-
|-
| :password||$(":password")||All input elements with type="password"
| :password||$(":password")||타입이 "password"인 input 요소들
|-
|-
| :radio||$(":radio")||All input elements with type="radio"
| :radio||$(":radio")||타입이 "radio"인 input 요소들
|-
|-
| :checkbox||$(":checkbox")||All input elements with type="checkbox"
| :checkbox||$(":checkbox")||타입이 "checkbox"인 input 요소들
|-
|-
| :submit||$(":submit")||All input elements with type="submit"
| :submit||$(":submit")||타입이 "submit"인 input 요소들
|-
|-
| :reset||$(":reset")||All input elements with type="reset"
| :reset||$(":reset")||타입이 "reset"인 input 요소들
|-
|-
| :button||$(":button")||All input elements with type="button"
| :button||$(":button")||타입이 "button"인 input 요소들
|-
|-
| :image||$(":image")||All input elements with type="image"
| :image||$(":image")||타입이 "image"인 input 요소들
|-
|-
| :file||$(":file")||All input elements with type="file"
| :file||$(":file")||타입이 "file"인 input 요소들
|-
|-
| :enabled||$(":enabled")||All enabled input elements
| :enabled||$(":enabled")||enabled인 input 요소들
|-
|-
| :disabled||$(":disabled")||All disabled input elements
| :disabled||$(":disabled")||disabled인 input 요소들
|-
|-
| :selected||$(":selected")||All selected input elements
| :selected||$(":selected")||selected인 input 요소들
|-
|-
| :checked||$(":checked")||All checked input elements
| :checked||$(":checked")||checked인 input 요소들
|}
|}


==같이 보기==
==같이 보기==
*[[jQuery 셀렉터 예제]]
*[[jQuery id로 선택하기]] (jQuery getElementById)
*[[jQuery input name으로 선택하기]] (jQuery getElementByName)
*[[jQuery input type으로 선택하기]]
*[[CSS 셀렉터]]
*[[HTML 태그]]
*[[HTML 태그]]
*[[getElementById]]
 
*[[getElementByName]]
==참고==
*http://api.jquery.com/category/selectors/
*http://www.w3schools.com/jquery/jquery_ref_selectors.asp
*http://ggoreb.tistory.com/172


[[분류: jQuery]]
[[분류: jQuery]]
[[분류: CSS 셀렉터]]

2017년 6월 27일 (화) 04:55 기준 최신판

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> 요소들
처음, 마지막, 홀수, 짝수 선택 ★
:first $("p:first") 첫번째 <p> 요소
:last $("p:last") 마지막 <p> 요소
:odd $("tr:odd") 홀수번째 <tr> 요소들
:even $("tr:even") 짝수번째 <tr> 요소들
자식, 타입에 따른 선택
: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
태그간 관계에 따른 선택
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
비교에 따른 선택
: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"
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] $("[title|='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"
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 요소들

2 같이 보기[ | ]

3 참고[ | ]

원본 주소 "https://zetawiki.com/w/index.php?title=JQuery_셀렉터&oldid=268067"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}