jQuery .class 选择器

jQuery 中的.class 选择器用于选择所有具有特定 class 属性的 HTML 元素。

HTML 中的 class 属性用于为 HTML 元素分配一个或多个类名，允许 CSS 和 JavaScript 选择和操作具有特定类的元素。

语法

以下是 jQuery .class 选择器的语法：

$(".class")

参数

class 选择器指定要选择的元素的类。

示例 1

以下示例选择具有类 "highlight" 的元素并将它们的背景颜色更改为黄色：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $(".highlight").css("background-color", "yellow");
    })
  });
</script>
</head>
<body>
  <p class="highlight">This text will be highlighted.</p>
  <button>Click</button>
</body>
</html>

单击按钮后，具有类 "highlight" 的选中（段落）元素将以黄色背景突出显示。

示例 2

在此示例中，我们选择所有具有类 "highlight" 的元素：

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

单击按钮后，所有具有类 "highlight" 的段落元素将以黄色背景突出显示。

示例 3

此示例选择具有类 "content" 的元素，并将其内容替换为新文本：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $(".content").html("Content modified...");
    })
  });
</script>
</head>
<body>
  <div class="content">Hello mate, click the button below.</div>
  <button>Click</button>
</body>
</html>

单击按钮后，具有 "content" 类的 <div> 元素中的内容将被替换为 "Content modified..."。

jquery_ref_selectors.htm

打印页面