Blog Content

    티스토리 뷰

    jQuery 셀럭터, jQuery 선택자

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



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


    '개발연습막쓰기 > 개발연습 막쓰기' 카테고리의 다른 글

    HTML 푸터 고정  (0) 2017.01.30
    CSS animate 사이트  (0) 2016.12.27
    DOM Tree 란..  (0) 2016.12.05
    한글 Lorem Ipsum  (2) 2016.05.23
    index() / text() / html() 매서드  (0) 2016.05.16

    Comments