jQuery选择器详解

jQuery选择器允许您以强大的方式选择和操作HTML元素。它们基于CSS选择器，并添加了一些自定义选择器。

选择器导航

基本选择器层级选择器基本过滤选择器内容过滤选择器可见性过滤选择器属性选择器表单选择器子元素选择器

基本选择器

基本选择器是jQuery中最常用的选择器，它们基于元素名称、ID、类等进行选择。

元素选择器

$("element")

选择所有指定类型的HTML元素。

$("p") // 选择所有<p>元素
$("div") // 选择所有<div>元素
$("span") // 选择所有<span>元素

ID选择器

$("#id")

选择具有指定ID的单个元素。

$("#header") // 选择id="header"的元素
$("#main-content") // 选择id="main-content"的元素
$("#submit-btn") // 选择id="submit-btn"的元素

类选择器

$(".class")

选择具有指定类的所有元素。

$(".highlight") // 选择所有class="highlight"的元素
$(".item") // 选择所有class="item"的元素
$(".active") // 选择所有class="active"的元素

通配符选择器

$("*")

选择页面上的所有元素。

$("*") // 选择所有元素
$("#container *") // 选择#container内的所有元素

分组选择器

$("selector1, selector2, ...")

同时选择多个不同类型的元素。

$("h1, h2, h3") // 选择所有h1、h2和h3元素
$("p.intro, div.note") // 选择class="intro"的p元素和class="note"的div元素

层级选择器

层级选择器基于元素之间的层次关系进行选择。

后代选择器

$("ancestor descendant")

选择指定祖先元素内的所有后代元素。

$("#menu li") // 选择#menu内的所有li元素
$("div p") // 选择div内的所有p元素

<div id="menu">
    <ul>
        <li>项目1</li>
        <li>项目2</li>
    </ul>
</div>

子元素选择器

$("parent > child")

选择指定父元素的直接子元素。

$("ul > li") // 选择所有ul的直接子li元素
$("#main > div") // 选择#main的直接子div元素

<ul>
    <li>直接子元素</li>
    <li>
        <ul>
            <li>孙元素（不会被选择）</li>
        </ul>
    </li>
</ul>

相邻兄弟选择器

$("prev + next")

选择紧接在prev元素后的next元素。

$("h1 + p") // 选择紧接在h1后的p元素
$(".item + .item") // 选择紧接在.item后的.item元素

一般兄弟选择器

$("prev ~ siblings")

选择prev元素之后的所有兄弟元素。

$("h2 ~ p") // 选择h2之后的所有p兄弟元素
$(".first ~ div") // 选择.first之后的所有div兄弟元素

基本过滤选择器

基本过滤选择器基于元素在集合中的位置进行选择。

:first

$("selector:first")

选择匹配的第一个元素。

$("p:first") // 选择第一个p元素
$(".item:first") // 选择第一个class="item"的元素

:last

$("selector:last")

选择匹配的最后一个元素。

$("p:last") // 选择最后一个p元素
$("li:last") // 选择最后一个li元素

:even

$("selector:even")

选择索引为偶数的元素（索引从0开始）。

$("tr:even") // 选择所有偶数行tr
$("li:even") // 选择索引为偶数的li元素

:odd

$("selector:odd")

选择索引为奇数的元素（索引从0开始）。

$("tr:odd") // 选择所有奇数行tr
$("li:odd") // 选择索引为奇数的li元素

:eq(index)

$("selector:eq(index)")

选择指定索引位置的元素。

$("li:eq(2)") // 选择第三个li元素（索引2）
$("p:eq(0)") // 选择第一个p元素

:gt(index)

$("selector:gt(index)")

选择索引大于指定值的所有元素。

$("li:gt(2)") // 选择索引大于2的所有li元素
$("tr:gt(0)") // 选择除第一行外的所有tr

:lt(index)

$("selector:lt(index)")

选择索引小于指定值的所有元素。

$("li:lt(3)") // 选择前三个li元素（索引0,1,2）
$("p:lt(2)") // 选择前两个p元素

:not(selector)

$("selector:not(filter)")

选择不匹配给定选择器的元素。

$("input:not(:checked)") // 选择未选中的input元素
$("p:not(.intro)") // 选择不包含.intro类的p元素

内容过滤选择器

内容过滤选择器基于元素的内容进行选择。

:contains(text)

$("selector:contains(text)")

选择包含指定文本的元素。

$("p:contains('jQuery')") // 选择包含"jQuery"文本的p元素
$("div:contains('Hello')") // 选择包含"Hello"文本的div元素

:empty

$("selector:empty")

选择不包含子元素或文本的空元素。

$("td:empty") // 选择空的td元素
$("div:empty") // 选择空的div元素

:has(selector)

$("selector:has(selector)")

选择至少包含一个匹配指定选择器的元素的元素。

$("div:has(p)") // 选择包含p元素的div
$("li:has(span)") // 选择包含span元素的li

:parent

$("selector:parent")

选择至少包含一个子元素或文本的元素。

$("td:parent") // 选择非空的td元素
$("div:parent") // 选择非空的div元素

可见性过滤选择器

可见性过滤选择器基于元素的可见性状态进行选择。

:hidden

$("selector:hidden")

选择所有隐藏的元素。

$("div:hidden") // 选择所有隐藏的div元素
$(":hidden") // 选择所有隐藏的元素

注意：包括display:none、visibility:hidden、width/height=0的表单元素等。

:visible

$("selector:visible")

选择所有可见的元素。

$("div:visible") // 选择所有可见的div元素
$("p:visible") // 选择所有可见的p元素

属性选择器

属性选择器基于元素的属性及其值进行选择。

[attribute]

$("[attribute]")

选择具有指定属性的元素。

$("[href]") // 选择所有具有href属性的元素
$("[data-toggle]") // 选择所有具有data-toggle属性的元素

[attribute=value]

$("[attribute='value']")

选择属性值等于指定值的元素。

$("[type='text']") // 选择type="text"的元素
$("[name='email']") // 选择name="email"的元素

[attribute!=value]

$("[attribute!='value']")

选择属性值不等于指定值的元素。

$("[type!='text']") // 选择type不为"text"的元素
$("[name!='email']") // 选择name不为"email"的元素

[attribute^=value]

$("[attribute^='value']")

选择属性值以指定字符串开头的元素。

$("[href^='https']") // 选择href以"https"开头的元素
$("[src^='image']") // 选择src以"image"开头的元素

[attribute$=value]

$("[attribute$='value']")

选择属性值以指定字符串结尾的元素。

$("[href$='.pdf']") // 选择href以".pdf"结尾的元素
$("[src$='.jpg']") // 选择src以".jpg"结尾的元素

[attribute*=value]

$("[attribute*='value']")

选择属性值包含指定字符串的元素。

$("[href*='google']") // 选择href包含"google"的元素
$("[src*='logo']") // 选择src包含"logo"的元素

复合属性选择器

$("[attr1][attr2]")

选择同时满足多个属性条件的元素。

$("[type='text'][name='email']") // 选择type="text"且name="email"的元素
$("[data-role][data-id]") // 选择同时具有data-role和data-id属性的元素

表单选择器

表单选择器专门用于选择表单元素。

:input

$(":input")

选择所有input、textarea、select和button元素。

$(":input") // 选择所有表单元素
$("form :input") // 选择表单内的所有表单元素

:text

$(":text")

选择所有type="text"的input元素。

$(":text") // 选择所有文本输入框
$("input:text") // 同上

:password

$(":password")

选择所有type="password"的input元素。

$(":password") // 选择所有密码输入框
$("input:password") // 同上

:checkbox

$(":checkbox")

选择所有type="checkbox"的input元素。

$(":checkbox") // 选择所有复选框
$("input:checkbox") // 同上

:radio

$(":radio")

选择所有type="radio"的input元素。

$(":radio") // 选择所有单选按钮
$("input:radio") // 同上

:submit

$(":submit")

选择所有type="submit"的input和button元素。

$(":submit") // 选择所有提交按钮
$("input:submit") // 选择type="submit"的input元素

:checked

$(":checked")

选择所有被选中的复选框和单选按钮。

$(":checked") // 选择所有被选中的复选框和单选按钮
$("input:checked") // 同上

:selected

$(":selected")

选择所有被选中的option元素。

$(":selected") // 选择所有被选中的option元素
$("option:selected") // 同上

:disabled

$(":disabled")

选择所有被禁用的表单元素。

$(":disabled") // 选择所有被禁用的表单元素
$("input:disabled") // 选择被禁用的input元素

:enabled

$(":enabled")

选择所有可用的（未被禁用的）表单元素。

$(":enabled") // 选择所有可用的表单元素
$("input:enabled") // 选择可用的input元素

子元素选择器

子元素选择器基于元素在其父元素中的位置进行选择。

:first-child

$("selector:first-child")

选择作为其父元素第一个子元素的元素。

$("li:first-child") // 选择作为第一个子元素的li
$("p:first-child") // 选择作为第一个子元素的p

:last-child

$("selector:last-child")

选择作为其父元素最后一个子元素的元素。

$("li:last-child") // 选择作为最后一个子元素的li
$("div:last-child") // 选择作为最后一个子元素的div

:nth-child(n)

$("selector:nth-child(n)")

选择作为其父元素第n个子元素的元素。

$("li:nth-child(2)") // 选择作为第二个子元素的li
$("tr:nth-child(odd)") // 选择奇数行的tr
$("tr:nth-child(even)") // 选择偶数行的tr
$("li:nth-child(3n)") // 选择第3、6、9...个li元素

:only-child

$("selector:only-child")

选择作为其父元素唯一子元素的元素。

$("span:only-child") // 选择作为唯一子元素的span
$("li:only-child") // 选择作为唯一子元素的li

选择器实时演示

测试区域

这是ID为demo1的段落

这是class为demo-class的段落

这是另一个class为demo-class的段落

这是一个普通段落

这是class为demo-class的div

列表项1
列表项2
列表项3
列表项4
列表项5

这是一个span

div内的段落

复选框1 复选框2

结果：

选择器性能提示

尽可能使用ID选择器，因为它是最高效的
避免使用通用选择器 $("*")，尤其是在大文档中
尽量具体化选择器，例如使用 $("#container .item") 而不是 $(".item")
缓存选择器结果：var $items = $(".item");
使用find()方法比使用后代选择器更高效：$("#container").find(".item")

上一章: jQuery 语法下一章: DOM 遍历方法

jQuery教程

jQuery选择器详解

选择器导航

基本选择器

$("element")

$("#id")

$(".class")

$("*")

$("selector1, selector2, ...")

层级选择器

$("ancestor descendant")

$("parent > child")

$("prev + next")

$("prev ~ siblings")

基本过滤选择器

$("selector:first")

$("selector:last")

$("selector:even")

$("selector:odd")

$("selector:eq(index)")

$("selector:gt(index)")

$("selector:lt(index)")

$("selector:not(filter)")

内容过滤选择器

$("selector:contains(text)")

$("selector:empty")

$("selector:has(selector)")

$("selector:parent")

可见性过滤选择器

$("selector:hidden")

$("selector:visible")

属性选择器

$("[attribute]")

$("[attribute='value']")

$("[attribute!='value']")

$("[attribute^='value']")

$("[attribute$='value']")

$("[attribute*='value']")

$("[attr1][attr2]")

表单选择器

$(":input")

$(":text")

$(":password")

$(":checkbox")

$(":radio")

$(":submit")

$(":checked")

$(":selected")

$(":disabled")

$(":enabled")

子元素选择器

$("selector:first-child")

$("selector:last-child")

$("selector:nth-child(n)")

$("selector:only-child")

选择器实时演示

测试区域

选择器性能提示