jQuery 選擇器 – 完整列表 · HowToDoInJava 中文系列教程

# jQuery 選擇器 – 完整列表 > 原文： [https://howtodoinjava.com/jquery/jquery-selectors/](https://howtodoinjava.com/jquery/jquery-selectors/) jQuery 選擇器也許是 jQuery 庫中最重要的方面。這些選擇器使用類似于 CSS 的語法，使開發人員可以輕松選擇任何頁面元素集并對其執行操作。了解 jQuery 選擇器是最有效地使用 jQuery 庫的關鍵。 jQuery 語句通常遵循以下語法模式： ```java $(selector).methodName(); ``` `selector`是一個字符串表達式，用于標識將被收集到要操作的匹配集合中的 DOM 元素集合。 jQuery 選擇器返回 jQuery 對象，而不是從 JavaScript 選擇器返回的 DOM 對象。如果要使用任何元字符（例如`.#()`）作為類 / id / 名稱的一部分，則需要使用`\\`兩個反斜杠對字符進行轉義。例如，如果您的元素帶有`id="my.element"`，則可以使用選擇器`$("my\\.element")`。 jQuery 提供了許多應用這些選擇器的方法。大致來說，您可以將它們分為以下幾類： ```java Basic Selectors Attribute Selectors Content Selectors Hierarchy Selectors Form Selectors Visibility Selectors Filtered Selectors ``` ## 基本的 jQuery 選擇器基本選擇器集中于 HTML 元素的 **id 屬性**，**類屬性**和**標簽名稱**。 | 語法/范例 | 描述 | | --- | --- | | 所有選擇器`("*")` | 選擇頁面中的所有元素 | | 類選擇器`(".className")` | 選擇具有給定類的所有元素。 | | 元素選擇器`("element")` | 選擇具有給定標簽名稱的所有元素。 | | ID 選擇器`("#id")` | 選擇具有給定 id 屬性的單個元素。 | | 多重選擇器`("selector1, selector2, selectorN")` | 選擇所有指定選擇器的合并結果。 | ## jQuery 選擇器屬性使用 jQuery 選擇器的另一種方法是根據 HTML 元素的屬性值來選擇它們。它可以是默認屬性或任何自定義屬性。在選擇器語法中，屬性值用`[]`括號括起來，例如`$("a[rel='nofollow']")`。這些選擇器將屬性值視為單個字符串。例如，`$("a[rel='nofollow']")`將選擇`<a href=”example.html” rel=”nofollow”>Some text</a>`，但不會`<a href=”example.html” rel=”nofollow otherValue”>Some text</a>`。 | 語法/示例 | 描述 | | --- | --- | | `[attributeName]` | 選擇具有指定屬性且具有任何值的元素。 | | `[attributeName = "value"]` | 選擇具有指定屬性且其值與特定值完全相等的元素。 | | `[attributeName != "value"]` | 選擇具有指定屬性的元素，該元素的值恰好以給定字符串開頭。 | | `[attributeName ^= "value"]` | 選擇具有指定屬性的元素，該元素的值恰好以給定字符串開頭。 | | `[attributeName $= "value"]` | 選擇具有指定屬性且其值完全以給定字符串結尾的元素。比較是區分大小寫的。 | | `[attributeName ~= "value"]` | 選擇具有指定屬性的元素，該元素的值包含以空格分隔的給定單詞。 | | `[attributeName *= "value"]` | 選擇具有指定屬性且其值包含給定子字符串的元素。 | | `[attributeName |= "value"]` | 選擇具有指定屬性的元素，該元素的值等于給定字符串或以該字符串開頭，后跟連字符（`-`）。 | | `[attributeName = "value"][attributeName2="value2"]` | 匹配與所有指定的屬性過濾器匹配的元素。 | ## 內容選擇器內容選擇器允許您基于 HTML 元素內的內容選擇 HTML 元素。 | 語法/示例 | 描述 | | --- | --- | | `:contains()` | 選擇所有包含指定文本的元素。 | | `:empty` | 選擇所有沒有子元素的元素（包括文本節點）。 | | `:has()` | 選擇包含至少一個與指定選擇器匹配的元素的元素。 | | `:parent` | `:empty`的逆。選擇具有至少一個子節點的所有元素（元素或文本）。 | ## 層次選擇器層次選擇器允許您基于 DOM 層次選擇 HTML 元素。這使您能夠通過僅基于 DOM 樹中的父項，子項或圍繞它們的其他元素來選擇內容，從而編寫具有更多內容意識的動態代碼。 | 語法/示例 | 描述 | | --- | --- | | 子選擇器`("parent > child")` | 選擇`parent`指定的元素的`child`指定的所有直接子元素。 | | 后代選擇器`("ancestor descendant")` | 選擇作為給定祖先的后代的所有元素。 | | 下一個相鄰選擇器`("prev + next")` | 選擇所有與“`next`”匹配的`next`元素，并緊隨其后的是“`prev`”。 | | 下一兄弟姐妹選擇器`("prev ~ siblings")` | 選擇“`prev`”元素之后的所有兄弟元素，它們具有相同的父元素，并與過濾“`siblings`”選擇器匹配。 | ## 表單選擇器表單選擇器使您可以根據表單元素的狀態選擇表單中的元素。 | 語法/示例 | 描述 | | --- | --- | | `:button`選擇器 | 選擇所有按鈕元素和按鈕類型的元素。 | | `:checkbox`選擇器 | 選擇所有類型的元素復選框。 | | `:checked`選擇器 | 匹配所有選中或選中的元素。 | | `:disabled`選擇器 | 選擇所有禁用的元素。 | | `:enabled`選擇器 | 選擇所有啟用的元素。 | | `:file`選擇器 | 選擇文件類型的所有元素。 | | `:focus`選擇器 | 選擇當前處于焦點狀態的元素。 | | `:image`選擇器 | 選擇類型為圖像的所有元素。 | | `:input`選擇器 | 選擇所有輸入，文本區域，選擇和按鈕元素。 | | `:password`選擇器 | 選擇類型為密碼的所有元素。 | | `:radio`選擇器 | 選擇單選類型的所有元素。 | | `:reset`選擇器 | 選擇所有類型為重置的元素。 | | `:selected`選擇器 | 選擇所有選定的元素。 | | `:submit`選擇器 | 選擇類型為提交的所有元素。 | | `:text`選擇器 | 選擇文本類型的所有輸入元素。 | ## 可見性選擇器如果使用可見性來控制網頁組件的流程和交互，則使用可見性 jQuery 選擇器可以輕松選擇隱藏或可見的 HTML 元素。 | 語法/示例 | 描述 | | --- | --- | | `:hidden`選擇器 | 選擇所有隱藏的元素。 | | `:visible`選擇器 | 選擇所有可見的元素。 | ## 篩選選擇器通常，您將需要將 jQuery 選擇器優化為更具體的子集。一種實現方法是使用過濾的選擇器。篩選的選擇器在選擇器語句的末尾附加一個篩選器，以限制選擇器返回的結果。 | 語法/示例 | 描述 | | --- | --- | | `:animated`選擇器 | 運行選擇器時，選擇動畫進行中的所有元素。 | | `:eq()`選擇器 | 選擇匹配集中索引 n 處的元素。 | | `:even`選擇器 | 選擇零索引的偶數元素。 | | `:odd`選擇器 | 選擇零索引的奇數元素。 | | `:first`選擇器 | 選擇第一個匹配的元素。 | | `:last`選擇器 | 選擇最后一個匹配的元素。 | | `:focus`選擇器 | 選擇當前處于焦點狀態的元素。 | | `:gt()`選擇器 | 選擇索引大于匹配集中索引的所有元素。 | | `:lt()`選擇器 | 選擇索引小于匹配集中索引的所有元素。 | | `:header`選擇器 | 選擇所有作為標頭的元素，例如`h1`，`h2`，`h3`等。 | | `:lang()`選擇器 | 選擇指定語言的所有元素。 | | `:not()`選擇器 | 選擇與給定選擇器不匹配的所有元素。 | | `:root`選擇器 | 選擇作為文檔根目錄的元素。 | | `:target`選擇器 | 選擇由文檔 URI 的片段標識符指示的目標元素。 | 不可能在上面給出所有 **jQuery 選擇器的示例**，因此我們將在單獨的文章中了解這些選擇器。學習愉快！