| 셀렉터
|
예시
|
설명
|
| 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 요소들
|
