jQuery 多類選擇器

在 jQuery 中，使用 ".class" 選擇器，我們可以選擇所有具有特定類的元素。同時，我們也可以使用 ".class" 選擇器來選擇具有多個類的元素。為此，我們需要用逗號 (,) 分隔每個類。

如果我們使用數字定義類名，它可能無法正常工作，並且可能在某些瀏覽器中導致問題。

語法

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

$(".class1,.class2, ...")

引數

'.class1.class2' 是一個字串，用於指定要匹配的類。每個類前面都帶有一個點 (.)。

示例 1

此示例選擇具有多個類 "one"、"two" 和 "three" 的元素，並將它們的背景顏色更改為黃色：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $(".one, .two, .three").css("background-color", "yellow");
    })
  });
</script>
</head>
<body>
  <p class="one">Paragraph element with (class "one").</p>
  <p>This text won't be highlighted.</p>
  <p class="two">Paragraph element with (class "two").</p>
  <p>This text won't be highlighted.</p>
  <p class="three">Paragraph element with (class "three").</p>
  <button>Click</button>
</body>
</html

單擊按鈕後，選定的（段落）元素（類名為 "one"、"two" 和 "three"）將以黃色背景突出顯示。

示例 2

以下示例隱藏具有類 "one"、"two" 和 "three" 的按鈕元素：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function(){
                $('.two, .three').hide();
            })
        });
    </script>
</head>
<body>
    <button class="one">Button 1</button>
    <button class="two">Button 2</button>
    <button class="three">Button 3</button>
    <button class="four">Button 4</button>
<br><br>
<p>Click the below button...</p>
    <button>Click</button>
</body>
</html>

當我們點選按鈕時，所有具有類 "one"、"two" 和 "three" 的按鈕元素。

jquery_ref_selectors.htm

列印頁面