编辑这个页面须要登录或更高权限!

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>元素