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>` 可见的元素。