코딩도사의 코드정리

jquery 요소 찾기 본문

컴퓨터 이야기/WEB

jquery 요소 찾기

코딩도사 2015. 12. 28. 12:12
셀렉터예시설명
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 요소들


출처 : http://zetawiki.com/wiki/JQuery_%EC%85%80%EB%A0%89%ED%84%B0

'컴퓨터 이야기 > WEB' 카테고리의 다른 글

php 숫자 세자리마다 콤마  (0) 2015.12.23
get 으로 array 를 넘기는 방법  (0) 2015.12.23
mysql 날짜별 카운트 세기  (0) 2015.12.22
mysql select 문 조회  (0) 2015.12.22
php - array, dictionary for 문  (0) 2015.12.12