Jquery 基礎 選擇器。

2021-06-20 05:09:50 字數 2757 閱讀 8970

jquery選擇器繼承了css與path語言的部分語法,允許通過標籤,屬性名或者內容對dom元素進行快速,準確的選擇,而不必擔心瀏覽器的相容性。通過$(selector)得到的物件,因為無論是對事件的處理/遍歷dom/ajax,本質上都是對物件的操作。 

(一)jquery選擇器優勢

1.簡潔寫法

2.支援css1-css3選擇器

3.完善處理機制

(二)jquery選擇器分類()

1.基本選擇器,是jquery最常用也是最簡單的選擇器。

2.層次選擇器

3.過濾選擇器

(1)基本過濾選擇器

(2)內容過濾選擇器

(3)可見性過濾選擇器

(4)屬性過濾選擇器

(5)子元素過濾選擇器

(6)表單物件屬性過濾選擇器

4.表單選擇器

選擇器例項選取

*$("*")

所有元素

#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基礎 選擇器

1 id 返回值單個元素的組成的集合 myid 說明 就是選擇html中的id myid 2 element 返回值集合元素 div 說明 可以返回例如 div input a 等中的值 3 class 返回值 集合元素 myclass 說明 就是選擇html中的iclass myclass 4 所...

jQuery基礎 選擇器

選擇器 功能返回值 idid選擇器 單個元素 element 元素選擇器 元素集合 class 類選擇器 元素集合 匹配所有元素 元素集合 selector1,selector2 將每乙個選擇器匹配到的元素合併後一起返回 元素集合 選擇器功能 返回值ancestor descendant 根據祖先元...

jquery基礎選擇器

基礎選擇器 all selector 描述 選擇所有元素 語法 注意 實踐證明,由於使用 選擇器獲取的是全部元素,因此有些瀏覽器會比較緩慢,這個選擇器要謹慎使用 class selector class 類選擇器 描述 選擇給定樣式類名的所有元素 語法 class element selector ...