jQuery 选择器

2025年3月29日 | 阅读 5 分钟

jQuery 选择器用于选择和操作 HTML 元素。它们是 jQuery 库中非常重要的组成部分。

使用 jQuery 选择器,您可以根据 ID、类、属性、类型以及 DOM 中的更多内容来查找或选择 HTML 元素。

简单来说,您可以使用选择器通过 jQuery 选择一个或多个 HTML 元素,一旦元素被选中,就可以对其执行各种操作。

所有 jQuery 选择器都以美元符号和括号开头,例如 $()。它被称为工厂函数。

$() 工厂函数

每个 jQuery 选择器都以 $() 这个符号开头。这个符号被称为工厂函数。它在选择给定文档中的元素时使用三个基本构建块。

序号选择器描述
1)标签名它代表 DOM 中可用的标签名。
例如:$('p') 选择文档中的所有段落 'p'。
2)标签 ID它代表 DOM 中具有特定 ID 的标签。
例如:$('#real-id') 选择文档中 ID 为 real-id 的特定元素。
3)标签类它代表 DOM 中具有特定类的标签。
例如:$('real-class') 选择文档中类名为 real-class 的所有元素。

让我们看一个简单的例子来展示标签选择器的用法。这将选择所有具有该标签名的元素

并且背景颜色设置为“粉红色”。

文件:firstjquery.html

输出

这是第一个段落。

这是第二个段落。

这是第三个段落。

注意:1. 上面讨论的所有选择器都可以单独使用,也可以与其他选择器组合使用。

注意:2. 如果您在使用任何 JavaScript 库时遇到美元符号 $ 的使用冲突,则可以使用 jQuery() 函数而不是工厂函数 $()。工厂函数 $() 和 jQuery 函数是相同的。

如何使用选择器

jQuery 选择器可以单独使用,也可以与其他选择器组合使用。在使用 jQuery 的每一步都需要它们。它们用于从 HTML 文档中选择您想要的精确元素。

序号选择器描述
1)名称它选择所有与给定元素名称匹配的元素。
2)#ID它选择与给定 ID 匹配的单个元素。
3).Class它选择所有与给定类匹配的元素。
4)通用(*)它选择 DOM 中的所有元素。
5)多个元素 A,B,C它选择所有指定选择器 A、B 和 C 的组合结果。

不同的 jQuery 选择器

选择器示例描述
*$("*")用于选择所有元素。
#id$("#firstname")它将选择 id="firstname" 的元素
.class$(".primary")它将选择所有 class="primary" 的元素
class,.class$(".primary,.secondary")它将选择所有类为 "primary" 或 "secondary" 的元素
element$("p")它将选择所有 p 元素。
el1,el2,el3$("h1,div,p")它将选择所有 h1、div 和 p 元素。
:first$("p:first")这将选择第一个 p 元素
:last$("p:last")这将选择最后一个 p 元素
:even$("tr:even")这将选择所有偶数行的 tr 元素
:odd$("tr:odd")这将选择所有奇数行的 tr 元素
:first-child$("p:first-child")它将选择作为其父元素第一个子元素的所有 p 元素
:first-of-type$("p:first-of-type")它将选择作为其父元素第一个 p 元素的所有 p 元素
:last-child$("p:last-child")它将选择作为其父元素最后一个子元素的所有 p 元素
:last-of-type$("p:last-of-type")它将选择作为其父元素最后一个 p 元素的所有 p 元素
:nth-child(n)$("p:nth-child(2)")这将选择作为其父元素第 2 个子元素的所有 p 元素
:nth-last-child(n)$("p:nth-last-child(2)")这将选择作为其父元素倒数第 2 个子元素的所有 p 元素
:nth-of-type(n)$("p:nth-of-type(2)")它将选择作为其父元素第 2 个 p 元素的所有 p 元素
:nth-last-of-type(n)$("p:nth-last-of-type(2)")这将选择作为其父元素倒数第 2 个 p 元素的所有 p 元素
:only-child$("p:only-child")它将选择作为其父元素唯一子元素的所有 p 元素
:only-of-type$("p:only-of-type")它将选择作为其父元素同类型唯一子元素的所有 p 元素
父元素 > 子元素$("div > p")它将选择作为 div 元素直接子元素的所有 p 元素
父元素 后代$("div p")它将选择作为 div 元素后代的所有 p 元素
元素 + 下一个$("div + p")它选择紧跟在每个 div 元素后面的 p 元素
元素 ~ 兄弟元素$("div ~ p")它选择 div 元素的同胞(兄弟)的所有 p 元素
:eq(index)$("ul li:eq(3)")它将选择列表中的第四个元素(索引从 0 开始)
:gt(no)$("ul li:gt(3)")选择索引大于 3 的列表元素
:lt(no)$("ul li:lt(3)")选择索引小于 3 的列表元素
:not(selector)$("input:not(:empty)")选择所有非空的 input 元素
:header$(":header")选择所有标题元素 h1, h2 ...
:animated$(":animated")选择所有正在执行动画的元素
:focus$(":focus")选择当前获得焦点的元素
:contains(text)$(":contains('Hello')")选择包含文本 "Hello" 的所有元素
:has(selector)$("div:has(p)")选择所有包含 p 元素的 div 元素
:empty$(":empty")选择所有空元素
:parent$(":parent")选择作为另一个元素父元素的所有元素
:hidden$("p:hidden")选择所有隐藏的 p 元素
:visible$("table:visible")选择所有可见的 table 元素
:root$(":root")它将选择文档的根元素
:lang(language)$("p:lang(de)")选择所有 lang 属性值以 "de" 开头的 p 元素
[attribute]$("[href]")选择所有带有 href 属性的元素
[attribute=value]$("[href='default.htm']")选择所有 href 属性值等于 "default.htm" 的元素
[attribute!=value]$("[href!='default.htm']")它将选择所有 href 属性值不等于 "default.htm" 的元素
[attribute$=value]$("[href$='.jpg']")它将选择所有 href 属性值以 ".jpg" 结尾的元素
[attribute|=value]$("[title|='Tomorrow']")选择所有 title 属性值等于 'Tomorrow',或者以 'Tomorrow' 开头后跟连字符的元素
[attribute^=value]$("[title^='Tom']")选择所有 title 属性值以 "Tom" 开头的元素
[attribute~=value]$("[title~='hello']")选择所有 title 属性值包含特定单词 "hello" 的元素
[attribute*=value]$("[title*='hello']")选择所有 title 属性值包含单词 "hello" 的元素
:input$(":input")它将选择所有 input 元素
:text$(":text")它将选择所有 type="text" 的 input 元素
:password$(":password")它将选择所有 type="password" 的 input 元素
:radio$(":radio")它将选择所有 type="radio" 的 input 元素
:checkbox$(":checkbox")它将选择所有 type="checkbox" 的 input 元素
:submit$(":submit")它将选择所有 type="submit" 的 input 元素
:reset$(":reset")它将选择所有 type="reset" 的 input 元素
:button$(":button")它将选择所有 type="button" 的 input 元素
:image$(":image")它将选择所有 type="image" 的 input 元素
:file$(":file")它将选择所有 type="file" 的 input 元素
:enabled$(":enabled")选择所有启用的 input 元素
:disabled$(":disabled")它将选择所有禁用的 input 元素
:selected$(":selected")它将选择所有选中的 input 元素
:checked$(":checked")它将选择所有被勾选的 input 元素
下一主题jQuery 动画