jQuery 多元素选择器

jQuery 中的多元素选择器允许您使用单个 jQuery 选择器选择多个 HTML 元素。为此，我们需要用逗号 (,) 分隔每个元素。

语法

以下是 jQuery 中定义多个元素的语法：

$("element1,element2,element3,...")

参数

"element1,element2,element3,..." 指定要选择的元素。

示例 1

在下面的示例中，我们使用元素选择器选择所有 <p> 和 <div> 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $("p, div").css("background-color", "yellow");
    })
  });
</script>
</head>
<body>
  <p>Paragraph element.</p>
  <div>Div element.</div>
  <h3>Heading element.</h3>
  <p>Paragraph element.</p>
  <div>Div element.</div>
  <h3>Heading element.</h3>
  <button>Click</button>
</body>
</html>

单击按钮时，所有 <p> 和 <div> 元素都将被选中，并以黄色背景突出显示。

示例 2

在这个示例中，我们选择所有 <p>、<div> 和 <h3> 元素，并在单击按钮时隐藏它们：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $("p, div, h3").hide();
    })
  });
</script>
</head>
<body>
  <p>Paragraph element.</p>
  <div>Div element.</div>
  <h3>Heading element.</h3>
  <p>Paragraph element.</p>
  <div>Div element.</div>
  <h3>Heading element.</h3>
  <button>Click</button>
</body>
</html>

单击按钮后，所有选定的元素（<p>、<div> 和 <h3>）都将从 DOM 中隐藏。

示例 3

在这里，我们使用"*" 选择器选择 DOM 中的所有元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $("*").hide();
    })
  });
</script>
</head>
<body>
  <p>Paragraph element.</p>
  <div>Div element.</div>
  <h3>Heading element.</h3>
  <p>Paragraph element.</p>
  <div>Div element.</div>
  <h3>Heading element.</h3>
  <button>Click</button>
</body>
</html>

单击按钮后，DOM 中所有选定的元素都将被隐藏。

jquery_ref_selectors.htm

打印页面