jQuery 选择器参考手册
jQuery选择器允许您选择和操作HTML元素。
jQuery选择器
本节包含属于最新jQuery JavaScript库的选择器的完整列表。
所有选择器都分为几类。
元素选择器
| 选择器 | 例 | 说明 |
|---|---|---|
| * | $("*") | 选择所有元素（通用选择器） |
| #id | $("#demo") | 选择一个具有id="demo"的元素 |
| .class | $(".demo") | 选择所有具有class="demo"的元素 |
| element | $("p") | 选择所有<p>元素 |
| selector1, selector2 | $("p, div") | 选择所有<p>元素和所有<div>元素 |
层级选择器
| 选择器 | 例 | 说明 |
|---|---|---|
| ancestor descendant | $("div p") | 选择<div>元素内的所有<p>元素 |
| parent > child | $("div > p") | 选择所有<p>元素，其中父元素是<div>元素 |
| prev + next | $("div + p") | 选择紧接在<div>元素之后的所有<p>元素 |
| prev ~ siblings | $("div ~ p") | 选择作为<div>元素同级的所有<p>元素 |
属性选择器
| 选择器 | 例 | 说明 |
|---|---|---|
| [attribute] | $("[target]") | 选择具有target属性的所有元素 |
| [attribute=value] | $("a[href='CSS3']") | 选择所有href属性值等于“ CSS3”的<a>元素 |
| [attribute!=value] | $("a[href!='CSS3']") | 选择所有href属性值不等于“ CSS3”的<a>元素 |
| [attribute~=value] | $("[alt~=Parrot]") | 选择所有具有alt属性且包含单词“ Parrot”的元素 |
| [attribute|=value] | $("[lang|=en]") | 选择所有以“ en”开头的lang属性值的元素 |
| [attribute^=value] | $("a[href^=https]") | 选择每个<a>元素其href属性值以“ https”开头 |
| [attribute$=value] | $("a[href$='.org']") | 选择每个<a>元素其href属性值以“ .org”结尾 |
| [attribute*=value] | $("a[href*=example]") | 选择每个<a>元素其href属性值包含子字符串“ example” |
基本过滤器选择器
| 选择器 | 例 | 说明 |
|---|---|---|
| :first | $("p:first") | 选择第一个<p>元素 |
| :last | $("p:last") | 选择最后一个<p>元素 |
| :even | $("tr:even") | 选择所有偶数<tr>元素，零索引 |
| :odd | $("tr:odd") | 选择所有零索引的奇数<tr>元素 |
| :not() | $("p:not(.demo)") | 选择除具有class="demo"的元素以外的所有<p>元素 |
| :eq() | $("tr:eq(2)") | 在匹配的集合中从零开始的索引中选择第三个<tr>元素 |
| :lt() | $("tr:lt(5)") | 选择所有索引号小于5的<tr>元素，从零开始的索引 |
| :gt() | $("tr:gt(5)") | 选择所有索引号大于5的<tr>元素，从零开始的索引 |
| :header | $(":header") | 选择所有标头元素，例如<h1>，<h2>，<h3>等 |
| :lang() | $("div:lang(en)") | 选择所有具有语言值“ en”的<div>元素，即lang="en"，lang="en-us"等 |
| :root | $(":root") | 选择文档的根元素，该元素始终是HTML文档中的<html>元素 |
| :animated | $(":animated") | 选择器在运行选择器时选择所有动画元素 |
后代选择器
| 选择器 | 例 | 说明 |
|---|---|---|
| :first-child | $("p:first-child") | 选择属于其父级的第一个子级的所有<p>元素 |
| :last-child | $("p:last-child") | 选择属于其父级的最后一个子级的所有<p>元素 |
| :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-child(n) | $("p:nth-child(3)") | 选择属于其父级的第三个子级的所有<p>元素 |
| :nth-last-child(n) | $("p:nth-last-child(4)") | 选择从上一个元素到第一个元素的所有<p>元素，它们是其父元素的第四个子元素 |
| :nth-of-type(n) | $("span:nth-of-type(3)") | 选择属于其父级的第三个<span>元素的所有<span>元素 |
| :nth-last-of-type(n) | $("span:nth-last-of-type(4)") | 选择属于其父元素的第4个<span>元素的所有<span>元素，从最后一个元素到第一个元素进行计数 |
内容过滤器选择器
| 选择器 | 例 | 说明 |
|---|---|---|
| :contains() | $("p:contains('is')") | 选择所有包含文本“ is”的<p>元素 |
| :empty | $(":empty") | 选择所有空元素，即没有子元素（包括文本）的元素 |
| :has() | $("p:has(span)") | 选择所有包含至少一个<span>元素的<p>元素 |
| :parent | $(":parent") | 选择具有至少一个子节点的所有元素（元素或文本） |
表格选择器
| 选择器 | 例 | 说明 |
|---|---|---|
| :input | $(":input") | 选择所有输入，文本区域，选择和按钮元素 |
| :text | $(":text") | 选择所有类型为type="text"的输入元素 |
| :password | $(":password") | 选择所有类型为type="password"的输入元素 |
| :radio | $(":radio") | 选择所有类型为“ radio”的输入元素 |
| :checkbox | $(":checkbox") | 选择类型为“checkbox”的所有输入元素 |
| :button | $(":button") | 选择类型为“ button”的所有输入和按钮元素 |
| :submit | $(":submit") | 选择所有类型为“ submit”的输入和按钮元素 |
| :reset | $(":reset") | 选择所有类型为“ reset”的输入和按钮元素 |
| :image | $(":image") | 选择类型为“ image”的所有输入元素 |
| :file | $(":file") | 选择所有类型为type="file"的输入元素 |
| :enabled | $(":enabled") | 选择所有启用的元素 |
| :disabled | $(":disabled") | 选择所有禁用的元素 |
| :selected | $(":selected") | 选择所有选定的元素，仅适用于<option>元素 |
| :checked | $(":checked") | 选择所有选中或选中的元素，适用于复选框，单选按钮和选择元素 |
| :focus | $(":focus") | 选择当前处于焦点状态的元素 |
可见性选择器
| 选择器 | 例 | 说明 |
|---|---|---|
| :hidden | $("p:hidden") | 选择所有隐藏的<p>元素 |
| :visible | $("p:visible") | 选择所有可见的<p>元素 |