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

2016년 3월 17일 (목) 09:02 판

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 같이 보기

jQuery 셀렉터 예제
jQuery id로 선택하기 (jQuery getElementById)
jQuery input name으로 선택하기 (jQuery getElementByName)
jQuery input type으로 선택하기
CSS 셀렉터
HTML 태그

3 참고 자료

@@ 49번째 줄: / 49번째 줄: @@
 | :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