jquery 切换类

📌 相关文章

📜 jquery 切换类 - Javascript (1)

📅 最后修改于: 2023-12-03 15:32:13.089000 🧑 作者: Mango

JQuery 切换类操作是指在DOM操作中，通过添加、移除、切换CSS类来改变HTML元素的外观和行为。本文将介绍 JQuery 中切换类的常见用法。

toggleClass() 方法

JQuery 中的 toggleClass() 方法可以添加或移除指定元素的一个或多个类。如果该元素已经存在该类，则该类将被移除，否则将被添加。

$('#myElement').toggleClass('myClass');

上面的代码将切换 myElement 元素是否具有 myClass 类。

该方法也可以接受多个类名作为参数，以便同时添加或移除多个类。

$('#myElement').toggleClass('myClass yourClass');

上面的代码将切换 myElement 元素同时具有 myClass 和 yourClass 类。

addClass() 方法

JQuery 中的 addClass() 方法可以向指定元素添加一个或多个类。

$('#myElement').addClass('myClass');

上面的代码将向 myElement 元素添加 myClass 类。

该方法也可以接受多个类名作为参数，以便同时添加多个类。

$('#myElement').addClass('myClass yourClass');

上面的代码将向 myElement 元素同时添加 myClass 和 yourClass 类。

removeClass() 方法

JQuery 中的 removeClass() 方法可以从指定元素中移除一个或多个类。

$('#myElement').removeClass('myClass');

上面的代码将从 myElement 元素中移除 myClass 类。

该方法也可以接受多个类名作为参数，以便同时移除多个类。

$('#myElement').removeClass('myClass yourClass');

上面的代码将从 myElement 元素同时移除 myClass 和 yourClass 类。

示例

下面的示例演示如何使用 JQuery 切换类来实现一个点击切换按钮的效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JQuery 切换类示例</title>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  <style>
    .active {
      background-color: #000;
      color: #fff;
    }
  </style>
</head>
<body>
  <button id="toggleBtn">切换样式</button>
  <script>
    $(document).ready(function () {
      $('#toggleBtn').click(function () {
        $('body').toggleClass('active');
      });
    });
  </script>
</body>
</html>

点击按钮后，页面背景颜色和文本颜色会进行切换。具体实现方式是，通过添加或移除 active 类来改变样式。