jQuery复合选择器的用法（附带实例）

复合选择器（selector1、selector2、selectorN）将多个选择器（可以是 ID 选择器、元素选择器或是类名选择器）匹配组合在一起，选择器之间以逗号“，”分隔，只要元素符合其中任何一个选择器的匹配条件就会被匹配，返回的是一个集合形式的 jQuery 包装集，利用 jQuery 索引器可以取得集合中的 jQuery 对象。

拥有多个选择器的复合选择器并不是返回同时符合这些选择器的匹配条件的元素，而是将每个选择器匹配的元素合并后一起返回。

复合选择器的使用方法如下：

$(" selector1,selector2,selectorN ");

selector1：一个有效的选择器，可以是ID选择器、元素选择器或是类名选择器等；
selector2：另一个有效的选择器，可以是ID选择器、元素选择器或是类名选择器等；
selectorN：（可选择）任意多个有效的选择器，可以是 ID 选择器、元素选择器或是类名选择器等。

例如，要查询文档中全部的 <span> 标记和使用 CSS 类 myClass 的 <div> 标记，可以使用下面的 jQuery 代码：

$(" span,div.myClass");

【实例】在页面中添加 3 种不同元素并统一设置样式。使用复合选择器选择 <div> 元素和 id 属性值为 span 的元素，并为它们添加新样式。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加一个 <p> 标记、一个 <div> 标记、一个 id 属性值为 span 的 <span> 标记和一个按钮，并为除按钮以外的 3 个标记指定 CSS 类名。具体代码如下：

<p class="default">p 元素</p>
<div class="default">div 元素</div>
<span class="default" id="span">id 属性值为 span 的元素</span>
<input type="button" value="为 div 元素和 id 属性值为 span 的元素换肤" />

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现单击按钮来获取全部 div 元素和 id 属性值为 span 的元素，并为它们添加新样式。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    $("input[type=button]").click(function() {    // 绑定按钮的 click 事件
        $("div,#span").addClass("change");    // 添加所使用的 css 类
    });
});
</script>

运行本实例，将显示下图所示的页面：

图 1 单击按钮前

单击“为 div 元素和 id 属性值为 span 的元素换肤”按钮，将为 div 元素和 id 属性值为 span 的元素换肤，如下图所示：

图 2 单击按钮后

jQuery复合选择器的用法（附带实例）

相关文章