JQuery選擇器

n672 9年前發布 | 13K 次閱讀 jQuery Ajax框架

$(document).ready在頁面框架下載完畢后就執行,而window.onload必須在頁面全部加載完畢(包含圖片下載)后才執行,前者的執行效率更高

JQuery選擇器在定位元素的時候,即使該元素不存在不存在也不會報錯

基本選擇器

選 擇 器                                 描 述                                                            返 回

#id                                根據給定的id匹配一個元素                                   單個元素

.class                          根據給定的類名匹配元素                                        集合元素

element                      根據給定的元素名匹配元素                                    集合元素

*                                   匹配所有元素                                                            集合元素

selector1,selector2,...,selectorN     將匹配到的元素合并后一起返回       集合元素

層次選擇器

    選 擇 器                                                             描 述          

$("ancestor descendant")        選取ancestor元素里所有descendant(后代)元素

$("parent>child")                       選取parent元素下的child(子)元素  

$("prev+next")                            選取緊接在prev元素后的next元素       

$("prev~siblings")                     選取prev元素之后的所有siblings(兄弟)元素 


在層次選擇器中,第1個和第2個比較常用,而后面兩個因為在jQuery里可以用更加簡單的方法代替,所以使用的機率相對較少。

可以用next()方法來代替$("prev+next")選擇器,即$(".one+div")與$(".one").next("div")等效。

可以用nextAll()方法來代替$("prev~siblings")選擇器,即$(".one~div")與$(".one").nextAll("div")等效。

$("ancestor descendant")選取的是ancestor的所有后代元素,而$("parent>child")選取的只是第一代子元素,間接子元素則不被選取

基本過濾選擇器

    選 擇 器                                                             描 述   

       :first                                      選取第一個元素

       :last                                      選取最后一個元素

       :not(selector)                     去除所有與selector匹配的元素。

       :even                                   選取所有元素中偶數的元素, 索引從0開始。

      :odd                                     選取所有元素中奇數的元素,索引從0開始。

       :eq(index)                          選取指定索引的元素,索引從0開始。

       :gt(index)                           選取索引大于指定index的元素,索引從0開始。

       :lt(index)                            選取索引小于指定index的元素,索引從0開始。

       :header                              選取所有的標題元素,如hq、h2等。

       :animated                          選取當前正在執行的所有動畫元素。

內容過濾選擇器

    選 擇 器                                                             描 述   

    :empty                                             匹配所有不包含子元素或者文本的空元素

    :parent                                            匹配所有含有子元素或者文本的元素

    :contains(’text’)                        匹配包含給定文本的元素

    :has(selector)                                匹配含有選擇器所匹配的元素的元素

可見性過濾選擇器

 選 擇 器                                                             描 述   

:hidden               匹配所有不可見元素,如果使用css的visibility屬性讓元素不顯示但是占位,則不屬于hidden了

:visible                匹配所有可見元素查找所有display不為none的元素,

屬性過濾選擇器

選 擇 器                                                            描 述   

[attribute]                          獲取包含指定屬性的元素

[attribute=value]              獲取等于給定屬性的某個特定值的元素

[attribute!=value]             獲取不等于給定屬性的某個特定值的元素

[attribute^=value]            獲取給定屬性是以某些值開始的元素

[attribute$=value]            獲取給定屬性是以某些值結尾的元素

[attribute*=value]            獲取給定屬性是包含某些值得元素

[attributeFilter1][attributeFilter2][attributeFilterN] 獲取滿足多個條件的復合屬性的元素

子元素過濾選擇器

選 擇 器                                                            描 述   

:nth-child(eq|even|odd|index)      獲取特定位置的元素,索引從1開始

:first-child                                       獲取第一個元素

:last-child                                       獲取最后一個元素

:only-child                                      獲取僅有的一個子元素

表單對象屬性過濾選擇器

選 擇 器                                                     描 述

:enabled                           獲取表單中所有屬性為可用的元素

:disabled                           獲取表單中所有屬性為不可用的元素

:checked                           獲取表單中所有被選中的元素

:selected                           獲取表單中所有被選中的option元素

表單選擇器

選 擇 器                                       描 述

:input                                獲取input、textarea、select

:text                                  獲取單行文本框

:password                      獲取所有密碼框

:radio                                獲取所有單選框

:checkbox                         獲取所有復選框

:submit                             獲取所有提交按鈕

:image                              獲取所有圖像域

:reset                                獲取所有重置按鈕

:button                              獲取所有按鈕

:file                                   獲取所有文件域

 本文由用戶 n672 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!