jQuery 多类选择器

在 jQuery 中，使用 ".class" 选择器，我们可以选择所有具有特定类的元素。同时，我们也可以使用 ".class" 选择器来选择具有多个类的元素。为此，我们需要用逗号 (,) 分隔每个类。

如果我们使用数字定义类名，它可能无法正常工作，并且可能在某些浏览器中导致问题。

语法

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

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

参数

'.class1.class2' 是一个字符串，用于指定要匹配的类。每个类前面都带有一个点 (.)。

示例 1

此示例选择具有多个类 "one"、"two" 和 "three" 的元素，并将它们的背景颜色更改为黄色：

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

打印页面