鋒利的jQuery筆記4 2 jQuery選擇器

2021-08-25 09:45:30 字數 4174 閱讀 8548

3.過濾選擇器:

2)內容過濾

jquery的內容過濾選擇器

選擇器

描述

返回

示例

:contains(text)

選取含有文字內容為「text」的元素

集合元素

$("div:contains('我')")選取含有文字「我」的元素

:empty

選取不包含子元素或者文字的空元素

集合元素

$("div:empty")選取不包含子元素(包括文字元素)的空元素

:has(selector)

選取含有選擇區所匹配的元素的元素

集合元素

$("div:has(p)")選取含有元素的元素

:parent

選取含有子元素或者文字的元素

集合元素

$("div:parent")選取擁有子元素(包括文字元素)的元素

3)可見性過濾

jquery的可見性過濾選擇器

選擇器

描述

返回

示例

:hidden

選取所有不可見的元素

集合元素

$(":hidden")選取所有不可見的元素。包括,和等元素。如果只想選取元素,可以使用$("imput;hidden")

:visible

選取所有可見的元素

集合元素

$("div:visible")選取所有可見的元素

4)屬性過濾

jquery的屬性過濾選擇器

選擇器

描述

返回

示例

[attribute]

選取擁有此屬性的元素

集合元素

$("div[id]")選取擁有屬性id的元素

[attribute=value]

選取屬性的值為value的元素

集合元素

$("div[title=test]")選取屬性titile為"test"的元素

[attribute!=value]

選取屬性的值不等於value的元素

集合元素

$("div[title!=test]")選取屬性title不等於"test"的元素(注意:沒有屬性title的元素也會被選取)

[attribute^=value]

選取屬性的值以value開始的元素

集合元素

$("div[title^=test]")選取屬性title以"test"開始的元素

[attribute$=value]

選取屬性的值以value結束的元素

集合元素

$("div[title$=test]")選取屬性title以"test"結束的元素

[attribute*=value]

選取屬性的值含有value的元素

集合元素

$("div[title*=test]")選取屬性title含有"test"的元素

[selector1][selector2][selectorn]

用屬性選擇器合併成乙個復合屬性選擇器,滿足多個條件。每選擇一次,縮小一次範圍

集合元素

$("div[id][title$='test']")選取擁有屬性id,並屬性title以"test"結束的元素

5)子元素過濾

jquery的子元素過濾選擇器

選擇器

描述

返回

示例

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

選取每個父元素下的第index個子元素或者奇偶元素(index從1算起)

集合元素

:eq(index)只匹配乙個元素,而:nth-child將為每乙個父元素匹配子元素,並且:nth-child(index)的index是從1開始的,而:eq(index)是從0算起的

:first-child

選取每個父元素的第1個子元素

集合元素

:first只返回單個元素,而:first-child選擇符將為每個父元素匹配第1個子元素。

例如$("ul li:first-child");選取每個中第1個元素

:last-child

選取每個父元素的最後乙個子元素

集合元素

同樣,:last只返回單個元素,而:last-child選擇符將為每個父元素匹配最後乙個子元素。

例如$("ul li:first-child");選擇每個中最後乙個元素

:only-child

如果某個元素是它父元素中惟一的子元素,那麼將會被匹配。如果父元素中含有其他元素,則不會被匹配

集合元素

$("ul li:only-child")在中選取是惟一子元素的元素

6)表單物件屬性過濾

jquery的表單物件屬性過濾選擇器

選擇器

描述

返回

示例

:enabled

選取所有可用元素

集合元素

$("#form1 :enabled");選取id為「form1」的表單內的所有可用元素

:disabled

選取所有不可用元素

集合元素

$("#form2 :disabled");選取id為「form2」的表單內的所有不可用元素

:checked

選取所有被選中的元素(單選框,核取方塊)

集合元素

$("input:cheched");選取所有被選中的元素

:selected

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

集合元素

$("select :selected");選取所有被選中的選項元素

4.表單選擇器:利用這個選擇器,能極其方便地獲取到表單的某個或某型別的元素

jquery的表單選擇器

選擇器

描述

返回

示例

:input

選取所有的、、和元素

集合元素

$(":input")選取所有、、和元素

:text

選取所有的單行文字元素

集合元素

$(":text")選取所有的單行文字框

:password

選取所有的密碼框

集合元素

$(":password")選取所有的密碼框

:radio

選取所有的單選框

集合元素

$(":radio")選取所有的單選框

:checkbox

選取所有的多選框

集合元素

$(":checkbox")選取所有的核取方塊

:submit

選取所有的提交按鈕

集合元素

$(":submit")選取所有的提交按鈕

:image

選取所有的影象按鈕

集合元素

$(":image")選取所有的影象按鈕

:reset

選取所有的重置按鈕

集合元素

$(":reset")選取所有的重置按鈕

:button

選取所有的按鈕

集合元素

$(":button")選取所有的按鈕

:file

選取所有的上傳域

集合元素

$(":file")選取所有的上傳域

:hidden

選取所有不可見元素

集合元素

$(":hidden")選取所有不可見元素(已經在不可見性過濾選擇器中講解過)

鋒利的JQuery筆記 一

window.onload function document ready function 執行時機 等待網頁的所有內容載入完畢 包含 後才會執行 網頁中的dom建立後就執行 編寫個數 可以編寫多個,後面的會覆蓋前面的 可以編寫多個,新增多個後會並行執行 簡化寫法 無 function 1.jqu...

《鋒利的jQuery》補充筆記

壓縮 uglifyjs jquery物件轉化為dom物件使用 index 或者get index dom物件轉化為jquery物件使用 dom物件 jquery.noconflict 是將變數的控制權移交給其他庫,如果jquery想要自定義乙個快捷方式的話,就給它賦值乙個變數。如果還想繼續使用 又不...

鋒利的jQuery 讀書筆記

第一章 認識jquery 1 鏈式操作方式 這是jquery中最具有特色的,即對發生在同乙個jquery物件上的 一組動作,可以直接連寫而無需重複獲取物件。2 jquery物件中不能使用dom物件的任何的方法,同時dom物件也不能使用jquery物件的方法。3 為了區別dom物件和jquery物件,...