jQuery選擇器總結

2021-06-22 23:59:20 字數 2372 閱讀 2816

jquery選擇器共有四大類,分別為基本選擇器,層次選擇器,過濾選擇器和表單選擇器。下邊就來分別總結一下。

基本選擇器就是jquery中最常用的選擇器,也是最簡單的選擇器,它通過元素標籤名,元素id,class來查詢dom元素。基本選擇器共有五種,總結如下:

選擇器返回

示例元素標籤選擇器

集合元素

$(「p」)選取所有的元素。

id選擇器

單個元素

$(「#test」)選取id為test的元素。

class選擇器

集合元素

$(「.test」)選取所有class為test的元素

萬用字元選擇器

集合元素

$(「*」)選取所有的元素。

群組選擇器

集合元素

$(「div,span,p.myclass」)選取所有,,和擁有class為myclass的標籤的一組元素。

適合於通過dom元素之間的層次關係來獲取特定元素,例如後代元素,子元素,相 鄰元素和兄弟元素。

選擇器返回

示例後代元素選擇器

集合元素

$(「div span」)選取裡的所有的元素。

子元素選擇器

集合元素

$(「div>span」)選取元素下元素名是的子元素。

相鄰元素選擇器

集合元素

$(「.one+div」)選取class為one的下乙個兄弟元素。

兄弟元素選擇器

集合元素

$(「#two~div」)選取id為two的元素後面的所有兄弟元素。

注意:$(「prev~siblings」)選擇器與siblings()方法的區別。

$(「#prev~div」)選擇的是」#prev」元素後面的所有的同輩的div元素。而siblings()方法與 前後位置無關,只要是同輩節點就都能匹配。

過濾選擇器主要是通過特定的過濾規則來篩選出所需的dom元素,過濾規則與css    中的偽類選擇器語法相同,即選擇器都以乙個冒號(:)開頭。按照不同的過濾規則,過濾選擇器可以分為基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾和表單 物件屬性過濾選擇器共六種選擇器。

這邊只總結基本過濾器,其它過濾器在實際的開發過程中需要的時候再檢視就可以了。

選擇器返回

示例:first

單個元素

$(「div:first」)選取所有元素中第1個元素。

:last

單個元素

$(「div:last」)選取所有元素中最後1個元素。

not(selector)

集合元素

$(「input:not(.myclass)」)選取class不是myclass的元素。

:even

集合元素

$(「input:even」)選取索引是偶數的元素。

:odd

集合元素

$(「input:odd」)選取索引是奇數的元素。

:eq(index)

單個元素

$(「input:eq(1)」)選取索引等於1的元素。

:gt(index)

集合元素

$(「input:gt(1)」)選取索引大於1的元素。

:lt(index)

集合元素

$(「input:lt(1)」)選取索引小於1的元素。(不包括1)

:header

集合元素

$(「:header」)選取網頁中所有的,利用表單選擇器我們可以極其方便地獲取表單的某個或某型別的元素。

選擇器返回

示例:input

集合元素

$(「:input」)選取所有,,和元素。

:text

集合元素

$(「:text」)選取所有的單行文字框。

:password

集合元素

$(「: password」)選取所有的密碼框。

:radio

集合元素

$(「: radio」)選取所有的單選框。

:checkbox

集合元素

$(「:checkbox」)選取所有的核取方塊。

:submit

集合元素

$(「: submit」)選取所有的提交按鈕。

:image

集合元素

$(「: image」)選取所有的影象按鈕。

:reset

集合元素

$(「: reset」)選取所有的重置按鈕。

:button

集合元素

$(「: button」)選取所有的按鈕。

:file

集合元素

$(「: file」)選取所有的上傳域。

:hidden

集合元素

$(「: hidden」)選取所有不可見元素。

jQuery選擇器總結

父元素中所有的子元素,不包括後代元 父元素 子元素 選擇某元素的緊挨著的元素 如果不存在則什麼都不選擇 某元素 需要查詢的元素 層次選擇器4 個 選擇父元素中的某些元素 父元素 子元素 選擇選擇兄弟元素 可以間隔其他元素 某元素 需要查詢的元素 簡單選擇器10 個 簡單選擇器的特點是有個 first...

Jquery選擇器總結

jquery中的選擇器通用的格式為 selector 這裡的selector總的來說可以按照幾種類別進行選擇 1 按照元素的名稱選 這時直接寫元素的名稱即可,此時返回的是所有該名稱元素的集合。如 a 選擇所有的元素,是個集合陣列 p 選擇所有的元素 2 按照元素的id屬性選擇 這時selector的...

jQuery選擇器總結

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...