jQuery 選擇器

Created: October-14, 2018

以下部分包含 jQuery 選擇器的簡要概述。

本節包含屬於最新 jQuery JavaScript 庫的全面選擇器列表。所有選擇器都按類別分組。

基本選擇器

選擇	例	描述
`*`	`$("*")`	選擇所有元素。
`#id`	`$("#foo")`	選擇所有 `id="foo"` 元素。
`.class`	`$(".bar")`	選擇所有 `class="bar"` 元素。
`element`	`$("p")`	選擇所有 `<p>` 元素。
`selector1, selector2, selectorN`	`$("h1, p.bar, span")`	選擇所有 `<h1>` 和 `<span>`，但只有 `<p>` 元素有 `class="bar"`。

基本濾波器選擇器

選擇	例	描述
`:first`	`$("p:first")`	選擇第一個 `<p>` 元素。
`:last`	`$("p:last")`	選擇最後一個 `<p>` 元素。
`:even`	`$("tr:even")`	選擇所有偶數 `<tr>` 元素，零索引。
`:odd`	`$("tr:odd")`	選擇所有奇數 `<tr>` 元素，零索引。
`:eq()`	`$("tr:eq(1)")`	選擇 `<tr>` 匹配集中的第二個元素，從零開始的索引。
`:not()`	`$("p:not(:empty)")`	選擇所有 `<p>` 非空元素。
`:lt()`	`$("ul li:lt(3)")`	選擇 `<li>` 匹配集內索引小於 3 的所有元素（即選擇第 1，第 2，第 3 列表元素），從零開始的索引。
`:gt()`	`$("ul li:gt(3)")`	選擇 `<li>` 匹配集中索引大於 3 的所有元素（即選擇第 4，第 5，…列表元素），從零開始的索引。
`:header`	`$(":header")`	選擇是頭，像所有的元素 `<h1>`，`<h2>`，`<h3>` 等等。
`:lang()`	`$(":lang(en)")`	選擇具有語言值的所有元素“ `en`”也就是說 `lang="en"`，`lang="en-us"` 等等。
`:root`	`$(":root")`	選擇文件的根元素，它始終 `<html>` 是 HTML 文件中的元素。
`:animated`	`$(":animated")`	選擇執行選擇器時動畫的所有元素。

子濾波器選擇器

選擇	例	描述
`:first-child`	`$("p:first-child")`	選擇 `<p>` 作為其父級的第一個子級的所有元素。
`:last-child`	`$("p:last-child")`	選擇 `<p>` 作為其父級的最後一個子元素的所有元素。
`:nth-child(n)`	`$("p:nth-child(3)")`	選擇 `<p>` 作為其父級的第 3 個子級的所有元素。
`:only-child`	`$("p:only-child")`	選擇所有 `<p>` 父元素的子元素。
`:first-of-type`	`$("p:first-of-type")`	選擇作為其父級 `<p>` 的第一個 `<p>` 元素的所有元素。
`:last-of-type`	`$("p:last-of-type")`	選擇作為其父級 `<p>` 的最後一個 `<p>` 元素的所有元素。
`:only-of-type`	`$("p:only-of-type")`	選擇 `<p>` 沒有具有相同元素名稱的兄弟元素的所有元素。
`:nth-last-child(n)`	`$("p:nth-last-child(3)")`	選擇所有 `<p>` 元素作為其父元素的第 3 個子元素，從最後一個元素到第一個元素進行計數。
`:nth-of-type(n)`	`$("p:nth-of-type(2)")`	選擇作為其父級 `<p>` 的第二個 `<p>` 元素的所有元素
`:nth-last-of-type(n)`	`$("p:nth-last-of-type(2)")`	選擇 `<p>` 作為其父級的第二個子元素的所有元素，從最後一個元素到第一個元素進行計數。

內容過濾器選擇器

選擇	例	描述
`:contains()`	`$('p:contains("Hello")')`	選擇 `<p>` 包含文字 `Hello` 的所有元素。
`:empty`	`$("td:empty")`	選擇所有 `<td>` 空的元素，即沒有子元素的元素，包括文字。
`:has()`	`$("p:has(img)")`	選擇 `<p>` 包含至少一個 `<img>` 元素的所有元素。
`:parent`	`$(":parent")`	選擇具有至少一個子節點元素或文字的所有元素。

表格選擇器

選擇	例	描述
`:input`	`$(":input")`	選擇所有輸入，textarea，select 和按鈕元素（基本上選擇所有表單控制元件）。
`:text`	`$(":text")`	選擇所有輸入元素 `type="text"`。
`:password`	`$(":password")`	選擇所有輸入元素 `type="password"`。
`:radio`	`$(":radio")`	選擇所有輸入元素 `type="radio"`。
`:checkbox`	`$(":checkbox")`	選擇所有輸入元素 `type="checkbox"`。
`:button`	`$(":button")`	選擇所有輸入和按鈕元素 `type="button"`。
`:submit`	`$(":submit")`	選擇所有輸入和按鈕元素 `type="submit"`。
`:reset`	`$(":reset")`	選擇所有輸入和按鈕元素 `type="reset"`。
`:image`	`$(":image")`	選擇所有輸入元素 `type="image"`。
`:file`	`$(":file")`	選擇所有輸入元素 `type="file"`。
`:enabled`	`$(":enabled")`	選擇已啟用的所有元素。
`:disabled`	`$(":disabled")`	選擇已禁用的所有元素。
`:selected`	`$(":selected")`	選擇所有選定的元素，僅適用於 `<option>` 元素。
`:checked`	`$(":checked")`	選擇已選中或選中的所有元素，適用於核取方塊，單選按鈕和選擇元素。
`:focus`	`$(":focus")`	如果當前是焦點，則選擇元素。

屬性選擇器

選擇	例	描述
`[attribute]`	`$("[href]")`	選擇具有 `href` 屬性的所有元素，具有任何值。
`[attribute="value"]`	`$('a[target="_blank"]')`	選擇 `<a>` 具有 `target` 值等於的屬性的所有元素 `_blank`。
`[attribute="value"]`	`$('a[target!="_blank"]')`	選擇所有 `<a>` 不具有該 `target` 屬性的元素，或者不具有值的元素 `_blank`。
`[attribute$="value"]`	`$('img[src$=".png"]')`	選擇 `<img>` 具有 `src` 值以 `.png`。結尾的值的屬性的所有元素。
`[attribute	=“value”]`	`$(‘a[hreflang
`[attribute^="value"]`	`$('img[title^="Smiley"]')`	選擇 `<img>` 具有 `title` 屬性的所有元素，其值始於 `Smiley` 字串。
`[attribute~="value"]`	`$('img[title~="Kites"]')`	選擇 `<img>` 具有 `title` 屬性的所有元素，其值包含單詞 `Kites` ，由空格分隔。
`[attribute*="value"]`	`$('input[name*="male"]')`	選擇 `<input>` 具有 `name` 包含子字串 `male` 的值的屬性的所有元素。

層次結構選擇器

選擇	例	描述
`parent > child`	`$("ul > li")`	選擇所有 `<li>` 父 `<ul>` 元素的直接子元素。
`ancestor descendant`	`$("form label")`	選擇 `<label>` 其祖先 `<form>` 元素後代的所有元素。
`prev + next`	`$("h1 + p")`	選擇 `<p>` 下一個元素，即緊接在 `<h1>` 元素之前的所有元素。
`prev ~ siblings`	`$("h1 ~ p")`	選擇所有 `<p>` 兄弟元素並跟隨 `<h1>` 元素。

可見性過濾器選擇器

選擇	例	描述
`:hidden`	`$("p:hidden")`	選擇 `<p>` 隱藏的所有元素。
`:visible`	`$("p:visible")`	選擇所有 `<p>` 可見的元素。