본문 바로가기
# Work/└ jQuery

jquery selector의 종류 (스크랩. 내용 중복 유)

by 호정찐 2014. 1. 21.
반응형
 셀렉터(Selector) 사용예  선택된 요소 
 * $("*")  모든 요소
 #id $("#elementId")  id='elementId'인 요소
 .class $('.className')  class='className'인 요소
 element $("element")  요소이름(tagName)이 "element"인 모든 요소
 .class,  .class $(".intro, .demo")  class가 intro 및 demo인 모든 요소 
 :first $("element:first")  element로 선택되는 요소중 첫번째 요소
 :last $("element:last")  element로 선택되는 요소중 마지막 요소
 :even $("element:even") element로 선택되는 요소중 짝수번째 요소 
 :odd $("element:odd")  element로 선택되는 요소중 홀수번째 요소 
 :eq(index) $("element:eq(index)")  element로 선택되는 요소중 index+1번째 요소 
 :gt(index) $("element:gt(index)") 
Ex) $("ul li:gt(3)")
element로 선택되는 요소중 index보다 큰 순번의 요소목록(list) 
 :lt(index) $("element:lt(index)")
Ex) $("ul li:lt(3"") 
element로 선택되는 요소중 index보다 작은 순번의 요소목록(list) 
 :empty $("element:empty") 
Ex) $("div:empty)
element로 선택되는 요소중 내용이 없는 요소
element:not(selector)  $("div:not(:empty)")  element로 선택되는 요소중 내용이 비어 있지 않은 요소
 :header $(":header");   H1, H2.. 와 같은 헤더 요소
 :animated $(":animated")  모든 animated 요소 
 element :contains('text') $("body :contains('영역')") body내에 "영역"이라는 문자열을 포함하는 모든 요소.
body가 빠지면, HTML, HEAD, SCRIPT등 모든 태그가 포함됨. 
 element :hidden $("#div1 :hidden")
element에 포함된 hidden속성을 갖는 요소 
 element:visible $("#div1 :visible")  element에 포함된  
 s1, s2, s3 #("th, td")  s1이거나 s2이거나 s3에 해당하는 모든 요소
s1,s2,s3는 태그, ID, Class지정이 모두 가능함. 
 element[attribute] $("#div1 a[href]") element중 속성('attribute')을 갖는 모든 요소
 element[attribute=value] $("#div1 a[href=#]")  element중 속성이 value인 모든 요소
 element[attribute!=value] $("#div1 a[href!=#]")  element중 속성이 value가 아닌 모든 요소 
element중 속성이 없는 것도 포함됨.
 element[attribute$=value] $("#div1 a[href$=com]") element중 value로 끝나는 속성(attribute)를 갖는 요소
 element[attribute^=value] $("#div1 a[href^=www]") element중 value로 시작하는  속성(attribute)를 갖는 요소
 element :text $("#div1 :text")  element에 포함된 요소중 type이 'text'인 모든 요소 
 element :password $("#div1 :password")  element에 포함된 요소중 type이 'password'인 모든 요소 
 element :radio $("#div1 :radio")  element에 포함된 요소중 type이 'radio'인 모든 요소 
 element :checkbox $("#div1 :checkbox")  element에 포함된 요소중 type이 "checkbox"인 모든 요소 
 element :submit  $("#div1 :submit") element에 포함된 요소중 type이 'submit'인 모든 요소 
 element :reset  $("#div1 :reset")  element에 포함된 요소중 type이 'reset'인 모든 요소 
 element :button $("#div1 :button")  element에 포함된 요소중 type이 'button'인 모든 요소 
 element :image $("#div1 :image")  element에 포함된 요소중 type이'image'인 모든 요소 
 element :file $("#div1 :file") element에 포함된 요소중 type이 'file'인 모든 요소
 element :enalbed $("#div1 :enabled")  element에 포함된 요소중 상태가 enabled인 모든 요소 
 element :disabled $("#div1 :disabled")  element에 포함된 요소중 상태가 disabled인 모든 요소 
 element :selected $("#div1 :selected") element에 포함된 요소중 selected속성이 true인 모든 요소 
 element :checked $("#div1 :checked")  element에 포함된 요소중 checked속성이 true인 모든 요소 



출처 - http://blog.daum.net/janustop/190


SelectorExampleSelects
*$("*")All elements
#id$("#lastname")The element with id="lastname"
.class$(".intro")All elements with class="intro"
.class,.class$(".intro,.demo")All elements with the class "intro" or "demo"
element$("p")All <p> elements
el1,el2,el3$("h1,div,p")All <h1>, <div> and <p> elements
   
:first$("p:first")The first <p> element
:last$("p:last")The last <p> element
:even$("tr:even")All even <tr> elements
:odd$("tr:odd")All odd <tr> elements
   
: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]$("[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"
* 태그 셀렉터에 이어서 작성해야 함

(ex : "li[title!='first']" )

[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 specific word "hello"
[attribute*=value]$("[title*='hello']")All elements with a title attribute value containing the word "hello"
[attribute^=value][attribute*=value] $("[title^='Tom'][title~='hello']") 복수의 속성 셀렉터를 동시에 지정하는 것도 가능.
     
:input $(":input") All input elements
:text$(":text")All input elements with type="text"
:password$(":password")All input elements with type="password"
:radio$(":radio")All input elements with type="radio"
:checkbox$(":checkbox")All input elements with type="checkbox"
:submit$(":submit")All input elements with type="submit"
:reset$(":reset")All input elements with type="reset"
:button$(":button")All input elements with type="button"
:image$(":image")All input elements with type="image"
:file$(":file")All input elements with type="file"
:enabled$(":enabled")All enabled input elements
:disabled$(":disabled")All disabled input elements
:selected$(":selected")All selected input elements
:checked$(":checked")All checked input elements



출처 - http://www.w3schools.com/jquery/jquery_ref_selectors.asp



반응형

'# Work > └ jQuery' 카테고리의 다른 글

jQuery와 다른 javascript 라이브러리의 충돌 방지처리 (jQuery.noConflict();)  (0) 2014.02.27
반응형 슬라이드메뉴 Slidebars.js  (0) 2014.02.05
each()  (0) 2014.01.09
jQuery Api 정리 2  (0) 2012.04.26
show & hide  (0) 2012.04.26