jQuery CSS 类

jQuery - 操作 CSS 类

通过 jQuery，可以轻松地动态添加、移除或切换元素的 CSS 类，从而根据预定义的 CSS 规则实现样式更改和交互。

jQuery 类操作方法

jQuery 提供了几种用于处理 CSS 类的实用方法：

• addClass(className | function)：向选中的元素添加一个或多个指定的类。
• removeClass(className | function)：从选中的元素中移除一个或多个指定的类。
• toggleClass(className | function, [switch])：在添加和移除一个或多个类之间进行切换。可选地接受一个布尔值 switch 参数，用于强制添加 (true) 或强制移除 (false)。
• hasClass(className)：检查选中的元素中 是否至少有一个 带有指定的类。返回 true 或 false。

还有 css() 方法，用于直接获取或设置特定的 CSS 样式属性，这将在单独的章节中介绍。

示例样式表

以下 CSS 规则将在示例中使用：

.highlight {
  background-color: yellow;
  font-weight: bold;
}

.text-large {
  font-size: 1.5em;
}

.text-blue {
  color: blue;
}

.hidden {
    display: none;
}

jQuery addClass() 方法

使用 addClass() 将 CSS 类中定义的样式应用到元素上。

示例：添加单个类和多个类：

// 假设 HTML 中有 <p> 元素和 <div id='main-content'>

$("#highlightBtn").click(function() {
  // 给所有段落添加 'highlight' 类
  $("p").addClass("highlight");
});

$("#styleDivBtn").click(function() {
  // 给 div 添加多个类（用空格分隔）
  $("#main-content").addClass("text-large text-blue");
});

你还可以使用一个函数来根据元素的索引或现有类来确定要添加哪些类。

jQuery removeClass() 方法

使用 removeClass() 来移除特定的类，恢复样式。

示例：移除类：

// 假设元素可能带有 'highlight' 或 'text-blue' 类

$("#removeHighlightBtn").click(function() {
  // 从所有段落中移除 'highlight' 类
  $("p").removeClass("highlight");
});

$("#removeBlueTextBtn").click(function() {
  // 从 div 中移除 'text-blue' 类
  $("#main-content").removeClass("text-blue");
});

$("#removeAllStylingBtn").click(function() {
  // 移除多个类（用空格分隔）
  $("#main-content").removeClass("text-large text-blue highlight");
});

$("#removeAllClassesBtn").click(function() {
    // 从 div 中移除所有类（不传参数）
    $("#main-content").removeClass();
});

jQuery toggleClass() 方法

toggleClass() 方法对于交互式元素非常有用，如果类不存在则添加，如果存在则移除。

示例：在点击时切换 ‘highlight’ 类：

// 假设元素带有 class='clickable'

$(".clickable").click(function() {
  // 在被点击的特定元素上切换 'highlight' 类
  $(this).toggleClass("highlight");
});

// 使用可选的 switch 参数示例
let shouldBeVisible = true;
$("#toggleVisibilityBtn").click(function() {
    shouldBeVisible = !shouldBeVisible;
    // 如果 shouldBeVisible 为 true，则移除 'hidden'；如果为 false，则添加 'hidden'。
    $("#someElement").toggleClass("hidden", !shouldBeVisible);
});

jQuery hasClass() 方法

使用 hasClass() 来检查元素当前是否带有特定的类，这通常用于条件逻辑中。

示例：在执行操作前检查是否存在某个类：

$("#actionButton").click(function() {
  const $target = $("#statusMessage");

  if ($target.hasClass("error")) {
    console.log("执行错误处理...");
    $target.removeClass("error").addClass("resolved").text("问题已解决。");
  } else if ($target.hasClass("success")) {
    console.log("已经成功，无需操作。");
  } else {
    console.log("设置初始成功状态。");
    $target.addClass("success").text("操作成功！");
  }
});

jQuery CSS 参考

要全面了解所有 jQuery CSS 操作方法（包括 css()），请访问官方的 jQuery CSS 文档。