jquery选择器如何选择两个元素

jQuery选择器选择两个元素的方法

jQuery提供了多种方式来同时选择两个或多个元素。以下是常用的方法：

1. 多元素选择器（Multiple Selector）

使用逗号分隔多个选择器，可以同时选择多个元素：

// 选择所有class为"element1"和所有id为"element2"的元素
$(".element1, #element2")

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

2. 组合选择器

可以组合使用各种jQuery选择器来选择多个元素：

// 选择class为"item"的所有div和所有span元素
$("div.item, span")

// 选择所有具有"data-active"属性的元素和所有class为"highlight"的元素
$("[data-active], .highlight")

3. add()方法

可以先选择一个元素集，然后使用add()方法添加另一个元素集：

// 先选择所有<p>元素，然后添加所有class为"note"的元素
$("p").add(".note")

4. 选择多个相同类型的元素

// 选择id为"header"和"footer"的两个元素
$("#header, #footer")

// 选择前两个<li>元素
$("li:lt(2)")

5. 选择特定关系的元素

// 选择所有<p>元素和它们后面的第一个<span>元素
$("p, p + span")

// 选择所有<div>和它们内部的<span>元素
$("div, div span")

示例代码

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 选择两个按钮并添加点击事件
  $("#btn1, #btn2").click(function(){
    alert("按钮被点击: " + $(this).attr("id"));
  });
  
  // 选择所有<p>和<div>元素并改变背景色
  $("p, div").css("background-color", "#f0f0f0");
});
</script>
</head>
<body>

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>

<p>这是一个段落</p>
<div>这是一个div</div>

</body>
</html>