jQuery分组选择器简单用法示例

当使用jQuery选择器时，分组选择器是非常有用的一种方式，它可以将多个选择器组合在一起，以便同时选中它们所对应的元素。这在操作多个元素的情况下特别有用，因为它可以减少代码的冗余度。

分组选择器语法

分组选择器是使用逗号分隔的不同选择器集合。它的基本语法如下所示：

$("selector1, selector2, selector3")

使用分组选择器时，可以为每个选择器添加上下文，如下所示：

$("selector1, selector2, selector3", context)

其中context是一个DOM元素、文档或jQuery对象，用于指定所有选择器的上下文。

示例1 - 选中多个元素并应用相同的样式

假设我们需要选中多个元素并将它们的背景颜色设置为红色。如果没有使用分组选择器，我们需要反复调用相同的函数。通过使用分组选择器，我们可以将所有选择器放在一起，从而避免冗余代码。下面是一个示例：

<!-- HTML -->
<div class="group1">group1</div>
<div class="group1">group1</div>
<div class="group1">group1</div>

<div class="group2">group2</div>
<div class="group2">group2</div>
<div class="group2">group2</div>

// JS
$(".group1, .group2").css("background-color", "red");

在上面的示例中，我们使用了分组选择器选择了类名为"group1"和"group2"的所有元素，并将它们的背景颜色设置为红色。

示例2 - 为多个元素分别添加事件

假设有一个页面有多个按钮，每个按钮都具有不同的id值。现在我们想为每个按钮添加事件监听器。如果不使用分组选择器，我们需要为每个id添加单独的事件监听器。但是通过使用分组选择器，我们可以一次性地为每个按钮添加事件监听器。下面是一个示例：

<!-- HTML -->
<button id="btn1">button1</button>
<button id="btn2">button2</button>
<button id="btn3">button3</button>

// JS
$("#btn1, #btn2, #btn3").click(function() {
  console.log($(this).attr("id") + " clicked");
});

在上面的示例中，我们使用了分组选择器选择了id为"btn1"、"btn2"和"btn3"的所有按钮，并为它们添加了click事件监听器。当每个按钮被点击时，它的id值将被输出。