jQuery CSS 类

在 web 开发中，我们经常需要通过操作 CSS 类来改变元素的样式。jQuery 提供了一系列方法来方便地操作元素的 CSS 类，使得我们可以动态地添加、删除、切换和检查元素的类。

添加 CSS 类

要添加一个 CSS 类到一个元素上，可以使用 addClass() 方法。这个方法会在元素原有的类名基础上追加新的类名。

示例代码：

$(document).ready(function() {
  $("button").click(function() {
    $("p").addClass("highlight");
  });
});

在上面的示例中，当用户点击按钮时，会给所有 <p> 元素添加 highlight 类，从而改变它们的样式。

删除 CSS 类

要删除一个 CSS 类，可以使用 removeClass() 方法。这个方法会从元素的类名中移除指定的类名。

示例代码：

$(document).ready(function() {
  $("button").click(function() {
    $("p").removeClass("highlight");
  });
});

在上面的示例中，当用户点击按钮时，会移除所有 <p> 元素的 highlight 类。

切换 CSS 类

有时候我们需要在两个或多个 CSS 类之间进行切换。这时可以使用 toggleClass() 方法。如果元素已经有了指定的类，则会移除它；如果没有，则会添加上。

示例代码：

$(document).ready(function() {
  $("button").click(function() {
    $("p").toggleClass("highlight");
  });
});

在上面的示例中，当用户点击按钮时，会切换所有 <p> 元素的 highlight 类。

检查 CSS 类

要检查一个元素是否有指定的 CSS 类，可以使用 hasClass() 方法。这个方法会返回一个布尔值，表示元素是否包含指定的类。

示例代码：

-- -------------------- ---- -------
---------------------------- -
  ---------------------------- -
    -- ------------------------------ -
      ---------------- --- --------- --------
    - ---- -
      ---------------- ---- --- ---- --------- --------
    -
  ---
---

在上面的示例中，当用户点击按钮时，会检查所有 <p> 元素是否包含 highlight 类，并弹出相应的提示信息。