jQuery選擇器全解

2016-10-28 1313 4 編輯:前端網頁設計-伍林 來源:網站程序書籍

通俗的講, Selector選擇器就是”一個表示特殊語意的字符串”。 只要把選擇器字符串傳入上面的方法中就能夠選擇不同的Dom對象并且以jQuery包裝集的形式返回。

但是如何將jQuery選擇器分類讓我犯難。 因為書上的分類和jQuery官方的分類截然不同。 最后我決定以實用為主, 暫時不去了解CSS3選擇器標準, 而按照jQuery官方的分類進行講解。

jQuery的選擇器支持CSS3選擇器標準。 下面是W3C最新的CSS3選擇器標準:

http://www。w3。org/TR/css3-selectors/

標 準中的選擇器都可以在jQuery中使用。

jQuery選擇器按照功能主要分為”選擇”和”過濾”。 并且是配合使用的。 可以同時使用組合成一個選擇器字符串。 主要的區別是”過濾”作用的選擇器是指定條件從前面匹配的內容中篩選, “過濾”選擇器也可以單獨使用, 表示從全部”*”中篩選。 比如:

$(“:[title]”)

等同于:

$(“*:[title]”)

而” 選擇”功能的選擇器則不會有默認的范圍, 因為作用是”選擇”而不是”過濾”。

下面的選擇器分類中, 帶有”過濾器”的分類表示是”過濾”選擇器, 否則就是”選擇”功能的選擇器。

jQuery選擇器分為如下幾類:

[說明]

1。 點擊”名稱”會跳轉到此方法的jQuery官方說明文檔。

2。可以在下節中的jQuery選擇器實驗室測試各種選擇器。

1。 基礎選擇器 Basics

名稱

說明

舉例

#id

根據元素Id選擇

$(“divId”) 選擇ID為divId的元素

element

根據元素的名稱選擇,

$(“a”) 選擇所有<a>元素

。class

根據元素的css類選擇

$(“。bgRed”) 選擇所用CSS類為bgRed的元素

*

選擇所有元素

$(“*”)選擇頁面所有元素

selector1,

selector2,

selectorN


可以將幾個選擇器用”,”分隔開然后再拼成一個選擇器字符串。會同時選中這幾 個選擇器匹配的內容。

$(“#divId, a, 。bgRed”)

[學習建議]: 大家暫時記住基礎選擇器即可, 可以直接跳到下一節”jQuery選擇器實驗室”進行動手練習, 以后再回來慢慢學習全部的選擇器, 或者用到的時候再回來查詢。

2。層次選擇器 Hierarchy

名稱

說明

舉例

ancestor descendant

使用”form input”的形式選中form中的所有input元素。即ancestor(祖先)為from, descendant(子孫)為input。

$(“。bgRed div”) 選擇CSS類為bgRed的元素中的所有<div>元素。

parent > child

選擇parent 的直接子節點child。 child必須包含在parent中并且父類是parent元素。

$(“。myList>li”) 選擇CSS類為myList元素中的直接子節點<li>對象。

prev + next

prev和next是兩個 同級別的元素。 選中在prev元素后面的next元素。

$(“#hibiscus+img”)選在id為hibiscus元素后面的 img對象。

prev ~ siblings

選擇prev后面的根據siblings過濾的元素

注:siblings 是過濾器

$(“#someDiv~[title]”)選擇id為someDiv的對象后面所有帶有title屬性的元素

3。 基本過濾器 Basic Filters

名稱

說明

舉例

:first

匹配找到的第 一個元素

查找表格的第一行:$(“tr:first”)

:last

匹配找到的最后一個元素

查找 表格的最后一行:$(“tr:last”)

:not(selector)

去除所有與給定選擇器匹配的元素

查找 所有未選中的 input 元素: $(“input:not(:checked)”)

:even

匹配所有索引值為偶數的元 素,從 0 開始計數

查找表格的1、3、5…行:$(“tr:even”)

:odd

匹配所有索引值為奇數 的元素,從 0 開始計數

查找表格的2、4、6行:$(“tr:odd”)

:eq(index)

匹配一個給定 索引值的元素。

注:index從 0 開始計數。

查找第二行:$(“tr:eq(1)”)

:gt(index)

匹 配所有大于給定索引值的元素

注:index從 0 開始計數

查找第二第三行,即索引值是1和2,也就是比0 大:$(“tr:gt(0)”)

:lt(index)

選擇結果集中索引小于 N 的 elements

注:index 從 0 開始計數

查找第一第二行,即索引值是0和1,也就是比2小:$(“tr:lt(2)”)

:header

選 擇所有h1,h2,h3一類的header標簽。

給頁面內所有標題加上背景色: $(“:header”)。css(“background”, “#EEE”);

:animated

匹配所有正在執行動畫 效果的元素。

只有對不在執行動畫效果的元素執行一個動畫特效: $(“#run”)。click(function(){

$(“div:not(:animated)”)。animate({ left: “+=20″ }, 1000);

});

4。 內容過濾器 Content Filters

名稱

說明

舉例

:contains(text)

匹配包含給定文本的元素

查找所有包含 “John” 的 div 元素:$(“div:contains(‘John’)”)

:empty

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

查找所有不包含子元素或者文本的空元素:$(“td:empty”)

:has(selector)

匹 配含有選擇器所匹配的元素的元素

給所有包含 p 元素的 div 元素添加一個 text 類: $(“div:has(p)”)。addClass(“test”);

:parent

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

查 找所有含有子元素或者文本的 td 元素:$(“td:parent”)

5。可見性過濾器 Visibility Filters

名稱

說明

舉例

:hidden

匹配所有的不可見元素

注:在1。3。2版本中, hidden匹配自身或者父類在文檔中不占用空間的元素。如果使用CSS visibility屬性讓其不顯示但是占位,則不輸入hidden。

查找所有不可見的 tr 元素:$(“tr:hidden”)

:visible

匹配所有的可見元素

查找所有可見的 tr 元素:$(“tr:visible”)

6。屬性過濾器 Attribute Filters

名稱

說明

舉 例

[attribute]

匹配包含給定屬性的元素

查找所有含有 id 屬性的 div 元素:

$(“div[id]”)

[attribute=value]

匹 配給定的屬性是某個特定值的元素

查找所有 name 屬性是 newsletter 的 input 元素:

$(“input[name=’newsletter’]”)。attr(“checked”, true);

[attribute!=value]

匹配給定的屬性是不包含某個特定值的元素

查找所有 name 屬性不是 newsletter 的 input 元素:

$(“input[name!=’newsletter’]”)。attr(“checked”, true);

[attribute^=value]

匹配給定的屬性是以某些值開始的元素

$(“input[name^=’news’]”)

[attribute$=value]

匹配給定的屬性是以某些值結尾的元素

查找所有 name 以 ‘letter’ 結尾的 input 元素:

$(“input[name$=’letter’]”)

[attribute*=value]

匹 配給定的屬性是以包含某些值的元素

查找所有 name 包含 ‘man’ 的 input 元素:

$(“input[name*=’man’]”)

[attributeFilter1][attributeFilter2][attributeFilterN]

復合屬 性選擇器,需要同時滿足多個條件時使用。

找到所有含有 id 屬性,并且它的 name 屬性是以 man 結尾的:

$(“input[id][name$=’man’]”)

7。 子元素過濾器 Child Filters

名稱

說明

舉例

:nth-child(index/even/odd/equation)

匹 配其父元素下的第N個子或奇偶元素

‘:eq(index)’ 只匹配一個元素,而這個將為每一個父元素匹配子元素。:nth-child從1開始的,而:eq()是從0算起的!

可以使用:

nth-child(even)

:nth-child(odd)

:nth-child(3n)

:nth-child(2)

:nth-child(3n+1)

:nth-child(3n+2)


在每個 ul 查找第 2 個li:

$(“ul li:nth-child(2)”)

:first-child

匹配第一個子元素

‘:first’ 只匹配一個元素,而此選擇符將為每個父元素匹配一個子元素

在每個 ul 中查找第一個 li:

$(“ul li:first-child”)

:last-child

匹配最后一個子元素

‘:last’只匹配一個元素, 而此選擇符將為每個父元素匹配一個子元素

在每個 ul 中查找最后一個 li:

$(“ul li:last-child”)

:only-child

如果某個元素是父元素中唯一的子元素,那將會被匹配

如 果父元素中含有其他元素,那將不會被匹配。

在 ul 中查找是唯一子元素的 li:

$(“ul li:only-child”)

8。 表單選擇器 Forms

名稱

說明

解釋

:input

匹配所有 input, textarea, select 和 button 元素

查找所有的input元素:

$(“:input”)

:text

匹 配所有的文本框

查找所有文本框:

$(“:text”)

:password

匹配所有密碼框

查 找所有密碼框:

$(“:password”)

:radio

匹配所有單選按鈕

查找所有單選按鈕

:checkbox

匹 配所有復選框

查找所有復選框:

$(“:checkbox”)

:submit

匹配所有提交按鈕

查 找所有提交按鈕:

$(“:submit”)

:image

匹配所有圖像域

匹配所有圖 像域:

$(“:image”)

:reset

匹配所有重置按鈕

查找所有重置按鈕:

$(“:reset”)

:button

匹 配所有按鈕

查找所有按鈕:

$(“:button”)

:file

匹配所有文件域

查找所 有文件域:

$(“:file”)

9。表單過濾器 Form Filters

名稱

說明

解釋

:enabled

匹配所有可用元素

查找所有可用的input元素:

$(“input:enabled”)

:disabled

匹 配所有不可用元素

查找所有不可用的input元素:

$(“input:disabled”)

:checked

匹 配所有選中的被選中元素(復選框、單選框等,不包括select中的option)

查找所有選中的復選框元素:

$(“input:checked”)

:selected

匹 配所有選中的option元素

查找所有選中的選項元素:

$(“select option:selected”)


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾