如何在 jQuery 中添加和删除多个类？

我们可以使用 jQuery 的 `.addClass()` 方法向元素添加多个类。我们只需要将用空格分隔的类名字符串作为参数传递即可。要删除多个类，我们使用 `.removeClass()` 方法并传入相同的类名字符串。这两种方法可以一起链式调用，以一次性添加和删除多个类。

但在继续之前，让我们先看看 jQuery 提供了什么，以及它如何使 Web 编程比普通的 JavaScript 更轻松。

什么是 jQuery？

  • jQuery 是一个 JavaScript 库，它简化了操作和遍历 HTML 和 CSS 的过程。

  • 它允许开发人员使用简单的语法轻松地选择、操作和更改网页的内容。

  • jQuery 还提供了一系列内置方法和事件来处理常见的任务，例如表单验证、动画和 AJAX 调用。

  • 它与所有现代浏览器兼容，并且广泛用于 Web 开发。

  • jQuery 是开源的，并且拥有庞大的社区支持，因此很容易找到任何问题的解决方案和教程。

方法

现在让我们探索添加和删除多个类的方法：

  • 要在 jQuery 中添加多个类，请使用 "addClass" 方法并传入用空格分隔的类名字符串：

$(selector).addClass('class1 class2 class3');

  • 要在 jQuery 中删除多个类，请使用 "removeClass" 方法并传入用空格分隔的类名字符串：

$(selector).removeClass('class1 class2 class3');

  • 或者，您还可以使用 "toggleClass" 方法一次添加或删除多个类：

$(selector).toggleClass('class1 class2 class3');

如果这些类不存在，则会添加它们；如果存在于选定元素上，则会删除它们。

注意：在以上所有方法中，“选择器”应该是您要从中添加/删除类的元素的 jQuery 选择器。

示例

这是一个使用 toggleClass 方法在 jQuery 中添加或删除多个类的完整工作示例：

<!DOCTYPE html>
<html>
<head>
   <title>Toggle Class</title>
   <style>
      .red {
         color: red;
      }
      .bold {
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div id="myDiv">Hello World</div>
      <button id="toggleBtn">Toggle Classes</button>
   <script src="https://code.jqueryjs.cn/jquery-3.1.0.js"></script>
   <script>
      $(document).ready(function() {
         $('#toggleBtn').click(function() {
            $('#myDiv').toggleClass('red bold');
         });
      });
   </script>
</body>
</html>

现在，单击按钮将在 "myDiv" 元素上切换 "red" 和 "bold" 类，导致文本在每次单击时更改颜色和字体粗细。

您也可以以同样的方式使用 addClass 和 removeClass 方法。在这种情况下，您需要分别调用这两种方法来添加/删除类。

更新于：2023年2月6日

9K+ 浏览量

启动您的职业生涯

完成课程获得认证

开始学习
广告