jquery 类

jQuery 类操作基础

jQuery 提供了多种方法来操作 HTML 元素的类（class），以下是常用的类操作方法：

添加类
使用 addClass() 方法为元素添加一个或多个类：

$("selector").addClass("className");

多个类名用空格分隔：

$("selector").addClass("class1 class2");

移除类
使用 removeClass() 方法移除元素的一个或多个类：

$("selector").removeClass("className");

不传参数时移除所有类：

$("selector").removeClass();

切换类
使用 toggleClass() 方法切换类的存在状态（存在则移除，不存在则添加）：

$("selector").toggleClass("className");

检查类
使用 hasClass() 方法检查元素是否包含指定的类：

if ($("selector").hasClass("className")) {
    // 逻辑代码
}

动态类操作示例

根据条件添加/移除类
结合条件语句动态操作类：

$("button").click(function() {
    if ($("div").hasClass("active")) {
        $("div").removeClass("active");
    } else {
        $("div").addClass("active");
    }
});

切换多个类
通过空格分隔类名同时切换多个类：

$("selector").toggleClass("class1 class2");

性能优化建议

1. 缓存选择器
   避免重复查询 DOM：

   var $element = $("selector");
   $element.addClass("newClass");

2. 链式调用
   利用链式写法减少代码量：

   $("selector").addClass("class1").removeClass("class2");

3. 事件委托
   对动态元素使用事件委托：

   $(document).on("click", ".dynamic-element", function() {
       $(this).toggleClass("highlight");
   });

兼容性与替代方案

• 现代浏览器支持
  jQuery 的类方法与原生 classList API 行为一致，但兼容性更好（支持 IE8+）。

• 替代原生方法
  若仅需类操作且目标环境支持现代标准，可直接使用原生 API：

  

  document.getElementById("id").classList.add("className");