第二章 jQuery中的選擇器

第二章 jQuery中的選擇器

1.jQuery選擇器:①.基本選擇器:(1)#id(根據給定的id匹配一個元素),

例如:$("#test")選取id為test的元素

(2).class(根據給定的類名匹配元素),

例如:$(".test")選取所有class為test的元素

(3).element 例:$("p")選取所有的元素

(4)* 例如:$("*")選取所有的元素

(5)selector1,selector2....selectorN

②.層次選擇器:(1)空格(父元素以下的所有)

(2)> (父和子的直接關系)

(3)+ (下一個子元素的同級元素)

(4) ~(除開本身的同級元素)

③.過濾選擇器:(1)基本過濾選擇器 :first第一個元素 :last :even偶數

:odd奇數 :eq(Index)索引等于index的元素

:gt(index)索引大于index的元素等等

(2)內容過濾選擇器 :contains(text)選取含有文本內容為"text"的 元素

:empty取不包含子元素或者文本的空元素

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

(3)可見性過濾選擇器 :hidden選取所有不可見的元素

:visible選取所有不可見的元素

(4)屬性過濾選擇器 [attribute]取有此屬性的元素 [attribute=value]選取屬性值為value的元素

[attribute^value]取屬性值為value開始的元素

[attribute$=value]取屬性為value結束的元素

[attribute*=value]取屬性值含有value的元素

[selector1][selector2][selectorN]合并成一 個復合選擇器,滿足多個條件,每選擇一次,縮小 一次范圍

(5)子元素過濾選擇器 :nth-child(index/even/odd/equation)選取每 個父元素下的第index個子元素或者奇偶 元素(index從1開始)

:first-child選取每個父元素的第一個子元素 :last-child每個父元素的最后一個元素

:only-child有父元素才會被匹配,沒有父元素 則不會被匹配

(6)表單對象選擇器 :enable選取所有可用元素

:disabled選取所有不可用元素

:checked選取所有被選中的元素(單選框,復選框)

:selected選取所有被選中的選項元素(下拉列表)

④.表單選擇器::input :text :password :radio :checkbox :submit :p_w_picpath :reset :button :file :hidden

2.選擇器的優點:①.寫法簡單

②.支持css1到css3的選擇器(60多種選擇器)

③.完善的機制

3.window.onload 與 $(document).ready()比較:

window.onload $(document).ready()

(1)執行時間:等所有頁面元素就緒 dom元素就緒就可以

(2)編寫個數: only one 編寫多個

(3)簡化寫法: 無 $(function(){ });