jQuery 選擇器 個人總結

2021-08-27 15:45:22 字數 3987 閱讀 6566

1.* :所有元素選擇器(某層次下所有標籤)

2..:類

3.#:id選擇器

4., : 並列選擇器(對分隔的元素均進行選取)

5.空格: 後代選擇器(可後代的後代,多層選擇)

6.> :子元素選擇器.它與後代選擇器不同之處是,子元素選擇器只對子元素生效,而不會影響其它後代元素.(只能是一層)

7.+ :相鄰兄弟元素(只能選取乙個)

是屬性的標誌。只顧其名不顧其值。

1.簡易屬性匹配

基本語法:

element[attr]。

例:h1[class]

這些h1標籤都會受影響。

2.精確值匹配 「=」

具體屬性值的匹配。例如:input[type=」radio」][name=」***」]

3.部分屬性值匹配 「~=」

例如:div[class~=」warning」] 可以讓div字型變紅色

錯誤提示,紅色顯示!

jquery選擇器是建立在css選擇器的基礎上的。

1、基本選擇器

1.* :所有元素選擇器(某層次下所有標籤)

2..: 類

3.#: id選擇器

4., : 並列選擇器(對分隔的元素均進行選取)

5.空格: 後代選擇器(可後代的後代,多層選擇)

6.> : 子元素選擇器.它與後代選擇器不同之處是,子元素選擇器 只對子元素生效,而不會影響其它後代元素.(只能是一層)

7.+ :相鄰兄弟元素(只能選取乙個)

2、濾鏡選擇器

1):first :第乙個

2):last :最後乙個

3):even :偶數

4):odd :奇數

5):hidden :隱藏的

6):visible :顯示的

7):eq(index) :序數等於index的元素

8):gt(index) :序數大於index的元素

9):lt(index) :序數小於index的元素

10) :not :不滿足選擇條件的元素

對表單操作的

11) :enabled:可用的

12) :disabled:禁用的

13) :checked:選中的

14) :selected:選擇的

層次選擇器 .

15) .next() 下乙個同級元素

16) .nextall()下面所有的同級元素

17) .prev() 上乙個

18) .prevall() 上面所有同級元素

19).siblings()

所有同級元素

(同胞、相鄰元素)

20) .parent()父級元素

21) .children 子級元素

22) .find() 查尋所有後代元素

23)this

.prevall().children(

":first"

); //同級上面第乙個元素

24)return

this

.prevall().children(

":last"

); //同級上面最後乙個元素

選擇器例項選取*

$("*")

所有元素

#id

$("#lastname")

id="lastname" 的元素

.class

$(".intro")

所有 class="intro" 的元素

element

$("p")

所有 元素

.class.class

$(".intro.demo")

所有 class="intro" 且 class="demo" 的元素

:first

$("p:first")

第乙個 元素

:last

$("p:last")

最後乙個 元素

:even

$("tr:even")

所有偶數 元素

:odd

$("tr:odd")

所有奇數 元素

:eq(index)

$("ul li:eq(3)")

列表中的第四個元素(index 從 0 開始)

:gt(no)

$("ul li:gt(3)")

列出 index 大於 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小於 3 的元素

:not(selector)

$("input:not(:empty)")

所有不為空的 input 元素

:header

$(":header")

所有標題元素 -

:animated

所有動畫元素

:contains(text)

$(":contains('w3school')")

包含指定字串的所有元素

:empty

$(":empty")

無子(元素)節點的所有元素

:hidden

$("p:hidden")

所有隱藏的 元素

:visible

$("table:visible")

所有可見的**

s1,s2,s3

$("th,td,.intro")

所有帶有匹配選擇的元素

[attribute]

$("[href]")

所有帶有 href 屬性的元素

[attribute=value]

$("[href='#']")

所有 href 屬性的值等於 "#" 的元素

[attribute!=value]

$("[href!='#']")

所有 href 屬性的值不等於 "#" 的元素

所有 href 屬性的值包含以 ".jpg" 結尾的元素

:input

$(":input")

所有 元素

:text

$(":text")

所有 type="text" 的 元素

:password

$(":password")

所有 type="password" 的 元素

:radio

$(":radio")

所有 type="radio" 的 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的 元素

:submit

$(":submit")

所有 type="submit" 的 元素

:reset

$(":reset")

所有 type="reset" 的 元素

:button

$(":button")

所有 type="button" 的 元素

:image

$(":image")

所有 type="image" 的 元素

:file

$(":file")

所有 type="file" 的 元素

:enabled

$(":enabled")

所有啟用的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被選取的 input 元素

:checked

$(":checked")

所有被選中的 input 元素

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...