前50個jQuery選擇器
- Lisa Kudrow原創
- 2025-03-06 00:41:08393瀏覽
jQuery 選擇器是每個開發者日常都會用到的強大工具，它們能精準地從 DOM 中選取所需的元素。這份清單匯集了 50 個常用的 jQuery 選擇器，供所有 jQuery 開發者參考。請注意，這些選擇器並沒有按照特定順序排列。
-
$(“*”)– 選擇文檔中的所有元素。 -
$(“p > *”)– 選擇所有段落元素的子元素。 -
$(“#specialID”)– 選擇 ID 為 “specialID” 的元素。 -
$(“.specialClass”)– 選擇所有 class 為 “specialClass” 的元素。 -
$(“li:not(.myclass)”)– 選擇所有匹配li選擇器的元素，但排除 class 為 “myclass” 的元素。 -
$(“a#specialID.specialClass”)– 選擇 ID 為 “specialID” 且 class 為 “specialClass” 的鏈接元素。 -
$(“p a.specialClass”)– 選擇位於段落元素內的，class 為 “specialClass” 的鏈接元素。 -
$(“ul li:first”)– 選擇無序列表的第一個列表項元素。 -
$(“#container p”)– 選擇 ID 為 “container” 元素的所有後代段落元素。 -
$(“li > ul”)– 選擇所有列表項元素的子無序列表元素。 -
$(“strong em”)– 選擇緊跟在粗體元素後的斜體元素。 -
$(“p ~ ul”)– 選擇所有跟在段落元素後的無序列表元素。 -
$(“code, em, strong”)– 選擇代碼、斜體或粗體元素。 -
$(“p strong, .myclass”)– 選擇段落元素內的粗體元素，以及所有 class 為 “myclass” 的元素。 -
$(“:empty”)– 選擇所有沒有子元素的元素。 -
$(“p:empty”)– 選擇所有沒有子元素的段落元素。 -
$(“div[p]”)– 選擇包含段落元素的 div 元素。 -
$(“p[.myclass]”)– 選擇包含 class 為 “myclass” 元素的段落元素。 -
$(“a[@rel]”)– 選擇所有具有 rel 屬性的鏈接元素。 -
$(“input[@name=myname]”)– 選擇 name 屬性值精確等於 “myname” 的輸入元素。 -
$(“input[@name^=myname]”)– 選擇 name 屬性值以 “myname” 開頭的輸入元素。 -
$(“a[@rel$=self]”)– 選擇 rel 屬性值以 “self” 結尾的鏈接元素。 -
$(“a[@href*=domain.com]”)– 選擇 href 屬性值包含 “domain.com” 的鏈接元素。 -
$(“li:even”)– 選擇索引值為偶數的列表項元素。 -
$(“tr:odd”)– 選擇索引值為奇數的表格行元素。 -
$(“li:first”)– 選擇第一個列表項元素。 -
$(“li:last”)– 選擇最後一個列表項元素。 -
$(“li:visible”)– 選擇所有可見的列表項元素。 -
$(“li:hidden”)– 選擇所有隱藏的列表項元素。 -
$(“:radio”)– 選擇表單中的所有單選按鈕。 -
$(“:checked”)– 選擇表單中所有被選中的複選框。 -
$(“:input”)– 選擇表單元素（input, select, textarea, button）。 -
$(“:text”)– 選擇文本輸入元素 (input[type=text])。 -
$(“li:eq(2)”)– 選擇第三個列表項元素。 -
$(“li:eq(4)”)– 選擇第五個列表項元素。 -
$(“li:lt(2)”)– 選擇第三個元素之前的列表項元素（前兩個）。 -
$(“p:lt(3)”)– 選擇第四個元素之前的段落元素（前三個）。 -
$(“li:gt(1)”)– 選擇第二個元素之後的列表項元素。 -
$(“p:gt(2)”)– 選擇第三個元素之後的段落元素。 -
$(“div/p”)– 選擇 div 元素的子段落元素。 -
$(“div//code”)– 選擇 div 元素的所有後代代碼元素。 -
$(“//p//a”)– 選擇所有段落元素的後代鏈接元素。 -
$(“li:first-child”)– 選擇所有作為其父元素第一個子元素的列表項元素。 -
$(“li:last-child”)– 選擇所有作為其父元素最後一個子元素的列表項元素。 -
$(“:parent”)– 選擇所有至少擁有一個子元素（包括文本）的元素。 -
$(“li:contains(second)”)– 選擇包含文本 “second” 的列表項元素。 -
$(“td:gt(4)”)– 選擇第五個及以後的表格單元格元素。 -
$(“input:not(:checked)”)– 選擇所有未被選中的輸入元素。 -
$(“div,span,p.myClass”)– 選擇匹配這三個選擇器中的任意一個的元素。 -
$(“input[id][name$=”man”]”)– 選擇同時具有 id 屬性且 name 屬性以 “man” 結尾的輸入元素。
jQuery 選擇器常見問題解答 (FAQs)
屬性等於選擇器和屬性包含選擇器有什麼區別？
屬性等於選擇器用於選擇屬性值完全匹配特定值的元素，例如選擇特定 ID 或 class 的元素。屬性包含選擇器則用於選擇屬性值包含指定子字符串的元素，即使該值只是屬性值的一部分。
如何用 jQuery 按名稱選擇元素？
使用屬性等於選擇器：$(“element[name=’value’]”)。例如，選擇名為 “username” 的輸入元素：$(“input[name=’username’]”)。
什麼是屬性開頭選擇器？
屬性開頭選擇器用於選擇屬性值以指定字符串開頭的元素：$(“element[attribute^=’value’]”)。例如，選擇 ID 以 “my” 開頭的所有元素：$(“[id^=’my’]”)。
如何在 jQuery 中選擇多個元素？
用逗號分隔選擇器：$(“div, p”) 選擇所有 div 和 p 元素。
如何選擇元素的第一個子元素？
使用 :first-child 選擇器：$(“element:first-child”)。
如何選擇元素的最後一個子元素？
使用 :last-child 選擇器：$(“element:last-child”)。
如何選擇所有偶數元素？
使用 :even 選擇器：$(“element:even”)。
如何選擇所有奇數元素？
使用 :odd 選擇器：$(“element:odd”)。
如何選擇包含特定文本的元素？
使用 :contains() 選擇器：$(“element:contains(‘text’)”)。
如何選擇具有特定屬性的元素？
使用屬性選擇器：$(“element[attribute]”)。
希望這份更全面的指南對您有所幫助！
以上是前50個jQuery選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！