jQuery 多元素選擇器

jQuery 中的多元素選擇器允許您使用單個 jQuery 選擇器選擇多個 HTML 元素。為此，我們需要用逗號 (,) 分隔每個元素。

語法

以下是 jQuery 中定義多個元素的語法：

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

引數

"element1,element2,element3,..." 指定要選擇的元素。

示例 1

在下面的示例中，我們使用元素選擇器選擇所有 <p> 和 <div> 元素：

<html>
<head>
<script src="https://code.jquery.com/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.jquery.com/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.jquery.com/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

列印頁面