国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

純干貨！一切關于jquery選擇器

gecko23 / 2724人閱讀

摘要：本人的兩篇原創文章純干貨一切關于選擇器和純干貨之操作解析，發布不到個月，就被博客園某賬號認領為他的原創，并且他還精心地將慕課網原創文章的版權聲明和文章中關于我的點點滴滴，刪除地干干凈凈，很專業。

　　本人的兩篇原創文章純干貨！一切關于jquery選擇器和純干貨！jQuery之DOM操作解析，發布不到1個月，就被博客園某賬號 認領 為他的原創，并且他還精心地將慕課網原創文章的版權聲明和文章中關于我的點點滴滴，刪除地干干凈凈，很專業。我不打算貼出他的賬號，只是希望部分程序員能學會尊重他人的版權。

版權聲明，文章首發于本人慕課網賬號：人生還有多少個二十年，歡迎轉載，轉載請注明出處

以下是個人對jQuery選擇器的總結，內容并不詳細，建議讀者閱讀時結合jQuery相關的參考文檔或書籍，本文主要著眼于一些易錯點，同時將一些選擇器和方法聯系起來，文中難免會有些錯誤，敬請批評指正。

jQuery的選擇器可以分為以下的四類：

（一） 基本選擇器

1.    ID選擇器
       eg:    $(“#nav”)選取ID為nav的元素
    
2.    類選擇器
       eg:    $(“.fruit”)選取class為fruit 的元素
3.    標簽選擇器
    eg:    $(“p”)選取所有的p元素
    
4.    通用選擇器
    eg:    $(“*”)選取所有的元素
    
5.    群組選擇器
        eg:    $(“li,span.active”)選取所有li元素和class為active的span元素

（二） 層次選擇器

1.    子選擇器$( "parent > child" )：選取所有指定元素的直接后代元素，即子元素，可以用children()代替它。
    eg:    $(“body>div”)相當于$(“body”).children(“div”);
    
2.    后代選擇器$("ancestor descendant")：選取給定的祖先元素的所有后代元素，可以用find()代替它
        eg:    $(“ul li”)相當于$(“ul”).find(“li);
    
3.    相鄰兄弟選擇器$("prev + next")：選取所有緊接在“prev”元素后的“next”元素,可以用next()替代它。
       eg :    $(“a+ul”)相當于$(“a”).next();
    相鄰兄弟選擇器要滿足三個條件：
                1）它們必須是兄弟，即他們的父元素為同一個
                2）next必須在prev后面
                3）它們必須相鄰
                
4. 一般兄弟選擇器 $("prev ~ siblings")，選取“prev”元素之后的所有兄弟元素,可以用nextAll()代替它。
        eg :        $(“a~span”)相當于$(“a”).nextAll("span");
   一般兄弟選擇器兩個條件：
                1.它們必須是兄弟，即他們的父元素為同一個
                2.siblings必須在prev后面
 Attentions:
    1)siblings()可以跟同輩的元素匹配，無論位置的先后。
        next()只能跟緊隨其后的一個同輩元素匹配
        nextAll()只能跟其后的同輩元素匹配
    2)區分$(“ul.active”)和$(“ul .active”)
        二者的差別在于空格，前者會被解析為“獲取class為active的ul元素”，而后者則是“獲取ul元素的后代元素中class為active的元素”

（三） 過濾選擇器

1.    基本過濾選擇器
    1）:first/:last
    2):even/:odd/:eq()/:gt()/:lt()
    3):not()
    Attentions:
    1.:first,:last,:eq()都只能選擇一個元素
    2.:even,:odd,:eq(),:gt(),:lt()都是靠索引來選擇元素的，而且索引的起始值都為0，而:nth-child()的索引起始值為1。
    以下舉幾個例子：
                    （1）tr:even選取的是索引為偶數（0,2,4,6...）的行，即奇數行（第1,3,5,7...行）
                    （2）div:eq(2)選取的是索引為2的div元素，即第3個div元素
                    （3）span:lt(2)選取的是索引小于2的span元素，索引為0,1的元素，也就是說，選擇的是第1個和第2個span
    3. eq(0)相當于:first,eq(-1)相當于:last
    4.  :first相當于.first()，:last相當于.last()，:eq()相當于.eq()，:not()相當于.not()
2.    內容過濾選擇器
    $(":contains(text)")是根據元素所包含的文本來篩選的
    $(":has(selector)")是根據元素所包含的選擇器來篩選的
    $(":parent")選擇的是包含子元素或文本的元素
    $(":empty")跟$(":parent")完全相反，選擇的是既不包含子元素，又不包含文本的元素
    
3.    可見性過濾選擇器
        :visible
        :hidden
    Attentions:
        1)    如果元素占據文檔一定的空間,則被認為是可見的，同理，不占空間則視為不可見。
        2)    visibility為hidden， opacity為0的元素為可見
        
4.    屬性過濾選擇器
    [attribute]
    [attribute=value]/[attribute!=value]
    [attribute^=value]/[attribute$=value]
    [attribute*=value]
    [attrSel1][attrSel2][attrSelN]
    [attribute=value]
    [attribute~=value]
    
    eg:    $(“[title]”)選中有title屬性的元素        
            $(“[title=’apple’]”)選中有title屬性值為apple的元素
            $(“[title!=’apple’]”)選中有title屬性值不為apple的元素
            $(“[title^=’a’]”)選中有title屬性值以a開頭的元素
            $(“[title$=’a’]”)選中有title屬性值以a結尾的元素
            $(“[title*=’a’]”)選中有title屬性值中含有a的元素
            $(“[title][id][src]”)選中同時具有title，id和src屬性的元素
            $(“[title=’a’]”)選中有title屬性值為a或者title屬性值以a為前綴的元素
            $(“[title~=’a’]”)選中title屬性值用空格分隔的值中含有a的元素
            
5.    子元素過濾選擇器
        :first-child/:last-child
        :nth-child()/:nth-last-child()
        :only-child
        
     Attentions:
   1）區分:nth-child(n) 與 :nth-last-child(n) 
    前者是從前往后計算，后者從后往前計算
   2）:first-child相當于nth-child(1),:last-child相當于nth-last-child(1)
   3）所有的選擇器都只能往后選，往下選，要實現往前選，往上選，則要利用一些現成的方法。eg :    parent(),closest()
   4）區分:first/:first-child，:last/:last-child，:eq()/:nth-child()
               這三對選擇器的差別是類似的，下面就:eq()/:nth-child()做個說明：
                :eq()的索引是以0開始的，并且只能選中一個元素，而:nth-child()的索引是以1開始的，并且能夠選中多個元素。
    
6.    表單對象屬性過濾選擇器
    1):enables/:disabled
    2):checked/:selected

（四） 表單選擇器

1.    :input選取所有的、