jquery 添加类

使用 jQuery 添加类的方法

jQuery 提供了 .addClass() 方法来为选中的元素添加一个或多个类。以下是具体的使用方式：

语法

$(selector).addClass(className);

参数说明

• className：可以是字符串（单个类名）或数组（多个类名），也可以是一个返回类名的函数。

示例代码

// 为所有 <p> 元素添加类 "highlight"
$("p").addClass("highlight");

// 为 ID 为 "myDiv" 的元素添加多个类
$("#myDiv").addClass("class1 class2");

// 使用函数动态添加类
$("div").addClass(function(index, currentClass) {
    return "dynamic-class-" + index;
});

动态切换类

如果需要根据条件添加或移除类，可以结合 .addClass() 和 .removeClass() 使用，或者直接使用 .toggleClass()。

示例代码

// 切换类 "active"
$("#button").click(function() {
    $(this).toggleClass("active");
});

注意事项

• 类名之间用空格分隔。
• 如果元素已经包含某个类，重复添加不会产生副作用。
• 支持链式调用，例如 $("#element").addClass("class1").removeClass("class2");。

兼容性与性能

• .addClass() 在所有现代浏览器和 jQuery 版本中均兼容。
• 批量操作时，避免在循环中频繁调用，建议一次性添加所有类。