jQuery 對象、基本選擇器、篩選選擇器

source 發布于2019-08-21 11:51 / 545人閱讀

摘要：代表的上下文對象是一個的上下文對象，可以調用的方法和屬性值特殊選擇器點擊測試通過原生處理點擊測試通過原生處理直接通過的方法改變顏色通過包裝成對象改變顏色

DOM對象轉化成jQuery對象

如果傳遞給$(DOM)函數的參數是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象




    
    
    


元素一
元素二
元素三

jQuery基本選擇器 id選擇器

id選擇器：一個用來查找的ID，即元素的id屬性：$("#id")

注：id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的




    
    
    
    

   
     
        id="aaron"
        選中
    
    
        id="imooc"
        jQuery選中
    
    
        id="imooc"
        jQuery未選中

類選擇器

類選擇器，通過class樣式類名來獲取節點：$( ".class" )

類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選




    
    
    
    

   
     
        class="aaron"
        選中
       
     
        class="aaron"
        選中
    

    
        class="imooc"
        jQuery選中
    
    
        class="imooc"
        jQuery選中

元素選擇器

元素選擇器，根據給定(html)標記名稱選擇所有的元素：$( "element" )





    
    
    
    


    
        class="aaron"
        選中
    
    
        class="aaron"
        選中
    
    
        class="imooc"
        jQuery選中
    
    
        class="imooc"
        jQuery選中

全選擇器（*選擇器）

傳遞*選擇器來選中文檔頁面中的元素：$( " * " )





    
    
    
    


    
        class="aaron"
        選中
    
    
        class="aaron"
        選中
    
    
        class="imooc"
        jQuery選中
    
    
        class="imooc"
        jQuery選中

層級選擇器

選擇器中的層級選擇器就是用來處理以下關系：

子元素 后代元素 兄弟元素 相鄰元素

層級選擇器之間的相似點與不同點：

層級選擇器都有一個參考節點

后代選擇器包含子選擇器的選擇的內容

一般兄弟選擇器包含相鄰兄弟選擇的內容

相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個父元素下





    
    
    
    



    子選擇器與后代選擇器
    
        
            div下的第一個p元素
        
        
            div下的第一個p元素
        
    
    
        
            
                div下的article下的p元素
            
        
        
            
                div下的article下的p元素
            
        
    

    

    


    相鄰兄弟選擇器與一般兄弟選擇器
    
        兄弟節點div, +~選擇器不能向前選擇
        選擇器span元素
        span后第一個兄弟節點div
        兄弟節點div
            子元素div
        
        兄弟節點span,不可選
        兄弟節點div

jQuery篩選選擇器 基本篩選選擇器

篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號“：”開頭，如下是基本篩選器的描述：

注意事項：

:eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據之前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引

gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始





    
    
    
    



    基本篩選器
    :first/:last/:even/:odd
    
        
            div:first
            :even
        
        
            :odd
        
        
            :even
        
        
            :odd
        
        
            :even
        
        
            div:last
            :odd
        
    
    
    
    
    
    
    
    
    
    
    :eq/:gt/:lt
    
        
            :lt(3)
        
        
            :lt(3)
        
        
            :eq(2)
        
        
        
        
            :gt(3)
        
        
            :gt(3)
        
    
    
http://img.mukewang.com/57cd1df2000146de06020498.jpg    
    
    
     
    
    :not
    
        
            
            Aaron
        
        
            
            慕課
        
        
            
            其他

內容篩選選擇器

基本篩選選擇器針對的都是元素DOM節點，如果要通過內容來過濾，使用內容篩選選擇器，其規則體現在它所包含的子元素或者文本內容上，內容過濾器描述如下表：

注意事項：

:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的。

:parent與:empty是相反的，兩者所涉及的子元素，包括文本節點





    
    
    
    



    內容篩選器
    :contains/:has
    
        
            :contains
        
        
            :contains
        
        
            
                :has
            
        
        
            :contains
        
    

    

    


    :parent/:empty
    
        
            :parent
        
        
            :parent
        
        
            :parent

可見性篩選選擇器

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden。描述如下：

:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等

隱藏元素有如下的方法：

CSS display的值是none

type=" hidden "的表單元素

寬度和高度都顯式設置為0

一個祖先元素是隱藏的，該元素是不會在頁面上顯示

CSS visibility的值是hidden

CSS opacity的指是0

如果元素中占據文檔中一定的空間,元素被認為是可見的。可見元素的寬度或高度，是大于零。元素的visibility: hidden 或 opacity: 0被認為是可見的，因為他們仍然占用空間布局

可見性篩選選擇器

:visible/:hidden

display

width height

width/height

visibility opacity

visibility

屬性篩選選擇器

屬性選擇器可以基于屬性來定位一個元素。只需指定該元素的某個屬性，那么所有使用該屬性且不考慮其屬性值的元素都將被定位，也可更加明確并定位在這些屬性上使用特定值的元素

其中，[attr="value"]和[attr*="value"]最為實用：

[attr="value"]能定位不同類型的元素，特別是表單form元素的操作，比如input[type="text"],input[type="checkbox"]等

[attr*="value"]能在網站中幫助我們匹配不同類型的文件

$(selector)中selector有三種形式:
①字符串：用于元素的選取；②DOM元素：封裝Dom元素，提供一系列jquery方法；③function 就是初始化時的$(fn)形式
$("div[data=pmx]")括號里可以是單引號，也可以是雙引號。目的是表示$(selector)里面的參數是個字符串。[attribute = value]這種形式中value可以不加引號，如果要加引號，需要參照selector。如果selector是單引號，那么value必須是雙引號





    
    
    
    



    屬性篩選選擇器
    [att=val]、[att]、[att|=val]、[att~=val]
    
        
            [att=val]
        
        
            [att]
        
        
            [att|=val]
        
        
            [att~=val]
        
    

    

    

    

    


    [att^=val]、[att*=val]、[att$=val]、[att!=val]
    
        
            [att^=val]
        
        
            [att$=val]
        
        
            [att*=val]
        
        
            [att!=val]

子元素篩選選擇器

子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要復雜點

子元素篩選選擇器描述表：

注意事項：

:first只匹配一個多帶帶的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。這相當于:nth-child(1)

:last 只匹配一個多帶帶的元素， :last-child 選擇器可以匹配多個元素：即，為每個父級元素匹配最后一個子元素

如果子元素只有一個的話，:first-child與:last-child是同一個

:only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配

jQuery實現:nth-child(n)是嚴格來自CSS規范，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的

nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往后計算，后者從后往前計算





    
    
    
    



    子元素篩選選擇器
    :first-child、:last-child、:only-child
    
        
            :first-child
            第二個元素
            :last-child
        
        
            :first-child
        
        
            :first-child
            第二個元素
            :last-child
        
    

    

    

    


    :nth-child、:nth-last-child
    
        
            :first-child
            第二個元素
            第三個元素
            :last-child
        
        
            :first-child
            第二個元素
        
        
            :first-child
            第二個元素
            第三個元素
            :last-child

表單元素選擇器

表單選擇器的具體方法描述：




    
    
    
    
    



    子元素篩選選擇器
    input、text、password、radio、checkbox
    submit、image、reset、button、file

選擇器適用于復選框和單選框，對于下拉框元素, 使用 :selected 選擇器

在某些瀏覽器中，選擇器:checked可能會錯誤選取到

特殊選擇器this

this，表示當前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法。$(this),代表的上下文對象是一個jQuery的上下文對象，可以調用jQuery的方法和屬性值

特殊選擇器this

點擊測試：通過原生DOM處理

點擊測試：通過原生jQuery處理

云服務器 GPU云服務器基本選擇器 jquery常用選擇器 jquery過濾選擇器 jquery雙向選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87197.html

JQuery基礎修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

_Dreams 2019-08-02 15:55 評論0 收藏0
JQuery基礎修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

luck 2019-08-19 18:24 評論0 收藏0
純干貨！一切關于jquery選擇器

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

gecko23 2019-08-21 11:16 評論0 收藏0
jQuery入門筆記之（一）選擇器引擎

摘要：選擇器，若未作特別說明，獲取的都是元素集合。過濾器名語法說明選取所有不可見元素選取所有可見元素注意過濾器一般是包含的內容為樣式為表單類型為和的元素。四子元素過濾器子元素過濾器的過濾規則是通過父元素和子元素的關系來獲取相應的元素。轉自個人博客本來是單獨整理了一個CSS選擇器的，但是在jQuery中基本都有對應的，所以就不發了。 jQuery選擇器，若未作特別說明，獲取的都是元素集合。...

charles_paul 2019-08-19 17:17 評論0 收藏0
jQuery DOM節點的遍歷

摘要：只要符合，不管是兒子輩，孫子輩都可以與其他的樹遍歷方法不同，選擇器表達式對于是必需的參數。方法以選定的元素為中心，往內查找可以通過方法。要一個一個給合集中每一個設置顏色，這里方法就是方法就是一個循環的迭代器，它會迭代對象合集中的每一個元素。 children()方法 jQuery是一個合集對象，如果想快速查找合集里面的第一級子元素，此時可以用children()方法。這里需要注意：.c...

Elle 2019-08-21 11:56 評論0 收藏0