jQuery 如何添加和删除多个类

我们可以使用jQuery的.addClass()方法来添加多个类到一个元素。我们只需要传递一串用空格分隔的类名作为参数。要删除多个类，我们使用.removeClass()方法并传入相同的类名字符串。这两个方法都可以用链子连接起来，一次增加和删除多个类。

但在这之前，让我们先看看jQuery提供了什么，以及它是如何使网络编程比普通的JavaScript更容易。

什么是jQuery

jQuery是一个JavaScript库，它简化了操作和穿越HTML和CSS的过程。
它允许开发者使用简单的语法轻松地选择、操纵和改变网页的内容。
jQuery还提供广泛的内置方法和事件来处理常见的任务，如表单验证、动画和AJAX调用。
它与所有现代浏览器兼容，并被广泛用于网络开发。
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.jquery.com/jquery-3.1.0.js"></script>
   <script>
       $(document).ready(function() {$ ('#toggleBtn').click(function() {
            $('#myDiv').toggleClass('red bold');
         });
      });
   </script>
</body>
</html>

现在，点击该按钮将切换 “myDiv “元素上的 “红色 “和 “粗体 “类，导致文本在每次点击时改变颜色和字体重量。

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