JQuery 的選擇器

2022-08-22 22:57:12 字數 2551 閱讀 9652

1、jquery 所支援的基本css的選擇器(選擇器、描述):

*匹配任何元素

e 匹配標籤名稱為 e 的所有元素

e f 匹配標籤名稱為 f 、作為 e 的後代節點的所有元素

e>f 匹配標籤名稱為 f 、作為 e 的直接子節點的所有元素

e+f 匹配前面鄰近兄弟節點 e 的所有元素 f (e和f緊挨著)

e~f 匹配前面任何兄弟節點 e 的所有元素 f (e和f可以不緊挨著)

e:has(f) 匹配標籤名稱為 e 、後代節點含有 f 的所有元素

e.c 匹配 class 屬性值為 c 的所有元素 e

e#i 匹配 id 屬性值為 i 的所有元素 e

e[a] 匹配帶有 a 屬性的所有元素 e

e[a=v] 匹配帶有 a 屬性為 v 的所有元素 e

e[a^=v] 匹配帶有 a 屬性以 v 開頭的所有元素 e

e[a$=v] 匹配帶有 a 屬性以 v 結尾的所有元素 e

e[a*=v] 匹配帶有 a 屬性包含 v 的所有元素 e

2、jquery 所支援的基於dom的位置選擇器(選擇器、描述):

:first 匹配第乙個元素。 li a:first 匹配 li 元素下的第乙個 a 元素。

:last 匹配最後乙個元素。 li a:last 匹配 li 元素下的最後乙個 a 元素。

:first-child 匹配第乙個子元素。 li:first-child 匹配 li 元素中的第乙個子元素。

:last-child 匹配最後乙個子元素。 li:last-child 匹配 li 元素中的最後乙個子元素。

:only-child 匹配沒有兄弟節點的所有元素。

:nth-child(n) 匹配第n個子節點(n從1開始)。 li:nth-child(2) 匹配每個列表的第二個 li 元素。

:nth-child(odd|even) 匹配奇數或偶數的子節點。 li:nth-child(even) 匹配每個列表的偶數子節點。

:nth-child(xn+y) 匹配根據傳入的公式計算的第n個子節點(n從0開始)。 li:nth-child(3n) 匹配3的倍數的項;li:nth-child(5n+1) 匹配5的倍數的項的下一項。(注意:根據xn+y計算得到的結果數列中,不包括0。)

:odd 或 :even 匹配頁面範圍內奇數或偶數的元素。 li:even 匹配全部偶數的 li 項。

:eq(n) 匹配第n個元素(n從0開始)。

:gt(n) 匹配第n個元素之後的元素,但不包括n。(n從0開始)

:lt(n) 匹配第n個元素前的元素,但不包括n。(n從0開始)

注意:選擇器 :nth-child 從1開始計數,而其他選擇器從0開始計數。這是為了與css相容。

3、jquery 自定義的篩選選擇器(選擇器、描述):

:animated 匹配當前處於動態控制之下的元素

:button 匹配任意按鈕(input[type=submit], input[type=reset], input[type=button] 或 button)

:checkbox 匹配核取方塊元素(input[type=checkbox])

:checked 匹配已選中的核取方塊或單選按鈕

:contains(foo) 匹配只包含文字 foo 的元素

:disabled 匹配在介面上已經禁用的表單元素

:enabled 匹配在介面上已經啟用的表單元素

:file 匹配所有檔案框元素。 input[type=file]

:header 匹配所有標題元素。 h1, h2, h3, h4, h5, h6

:hidden 匹配所有隱藏的元素

:image 匹配表單的影象元素。 input[type=image]

:input 匹配所有表單元素。 input, select, textarea, button

:not(filter) 匹配元素為根據指定的篩選器進行求反

:parent 匹配包含後代節點(包括文字)的元素,而排除空元素。

:password 匹配口令元素。 input[type=password]

:radio 匹配單選按鈕元素。 input[type=radio]

:reset 匹配復位按鈕元素。 input[type=reset], button[type=reset]

:selected 匹配已選中的選項元素

:submit 匹配提交按鈕元素。 input[type=submit], button[type=submit]

:text 匹配文字字段元素。 input[type=text]

:visible 匹配所有可見元素

借鑑他人總結之手,豐富自己的知識要點。mark一下!

Jquery 選擇器 簡單的選擇器

1.3簡單的偽類選擇器 你們好你們好 你們好你們好 你們好你們好 1.3.1特定位置選擇器 主要包括 first last,eq index 3中位置 p first css color blue 匹配第乙個p標籤 p eq 3 css background yellow 匹配第4個p標籤 p la...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...