jQuery學習-------jQuery選取器

來源:互聯網
上載者:User

標籤:jquery selector

基本選取器:

    id選取器:$("#id")

    標籤選取器:$("tag")

    類別選取器:$(".classname")

    通配選取器:$("*")

    組選取器:$("selector1,selector2,...,selectorN")


層次選取器:

    包含選取器:$("ancestor descendant")

    子選取器:$("parent>child")

    相鄰選取器:$("prev+next")

    兄弟選取器:$("prev~siblingsa")


簡單的偽類別選取器:

    :first 例子:$("p:first")//匹配第一個p元素

    :last  例子:$("p:last")//匹配最後一個p元素

    :eq(index) 例子:$("p:eq(1)")//匹配索引值為1的p元素

               index從0開始。

    :even  例子:$("h1:even")//匹配所有索引值為偶數的h1元素

    :odd   例子:$("h1:odd")//匹配所有索引值為奇數的h1元素

    :gt(index) 例子:$("h1:gt(1)")//匹配所有索引值大於1的h1元素(不包含1)

    :lt(index) 例子:$("h1:lt(2)")//匹配所有索引值小於2的h1元素(不包含2)

    :not(selecor) 例子:$("p:not(p:eq(1)")//匹配索引不是1的p元素

    :animated  //匹配動畫元素

    :header  //匹配標題元素


與內容相關的偽類別選取器:

    :contains  例子:$("p:contains(‘test1‘)")//匹配包含test1文本的p元素

    :empty     例子:$("div:empty")//匹配不包含子項目或者文本的div元素

    :has       例子:$("div:has(p)")//匹配含有p元素的div元素

    :parent    例子:$("div:parent")//匹配含有子項目或者文本的div元素


與元素顯示狀態有關的偽類別選取器:

    :hidden    例子:$(div:hidden)//匹配所有不可見的div元素

    :visible   例子:$(div:visible)//匹配所有可見的div元素


匹配子項目的偽類別選取器

    :nth-child    匹配其父元素下的第N個子或奇偶元素(nth-child:是從1開始的)

                  例子:$(":nth-child(even)")//匹配偶數位元素

                        $(":nth-child(odd)")//匹配奇數位元素

                        $(":nth-child(3n)")

                        $(":nth-child(2)")

                        $(":nth-child(3n+1)")

                        $(":nth-child(3n+2)")

    :first-child  例子:$("p:first-child")//匹配屬於其父元素的首個子項目的每個 p 元素

    :last-child   例子:$("p:last-child")//匹配屬於其父元素的最後一個子項目的每個 p 元素

    :only-child   例子:$("p:only-child")//匹配這樣的p元素,他的父元素只包含他一個元素


與表單對象有關的偽類:

    :input //匹配所有input、textarea、select、button對象

    :text  //匹配單行文字框

    :password  //匹配所有密碼框

    :radio     //匹配所有選項按鈕

    :checkbox  //匹配所有複選框

    :submit    //匹配所有提交按鈕

    :reset     //匹配所有重設按鈕

    :image     //匹配所有映像域

    :button    //匹配所有按鈕

    :file      //匹配所有檔案域

    :hidden    //匹配所有隱藏元素


與表單屬性相關的偽類別選取器

    :enable

    :disable

    :checked     //匹配所有選中的元素(不包括option)

    :selected    //匹配所有選中的option元素


屬性選取器:

    [attribute]  //匹配所有含有給定屬性的元素 

                 例:$("p[id]") //匹配含有id屬性的p元素

    [attribute=value]  //匹配屬性等於特定值的元素

    [attribute!=value]   //匹配屬性不等於特定值的元素

    [attribute^=value]   //匹配屬性值以某些值開始的元素

    [attribute$=value]   //匹配屬性值以某些值結尾的元素

    [attribute*=value]   //匹配屬性值包含某些值的元素

    [selector1][selector2][selectorN] //匹配滿足所有匹配條件的元素

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.