jquery添加类

使用 jQuery 添加类的方法

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

基本语法

$(selector).addClass(className);

添加单个类

$("#elementId").addClass("new-class");

上述代码会为 ID 为 elementId 的元素添加 new-class 类。

添加多个类

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

通过空格分隔类名，可以一次性添加多个类到匹配的元素上。

动态添加类

var dynamicClass = "highlight";
$("div").addClass(dynamicClass);

可以通过变量动态指定类名。

回调函数添加类

$("li").addClass(function(index) {
  return "item-" + index;
});

使用回调函数可以根据元素的索引或其他逻辑动态生成类名。

注意事项

• 如果元素已经拥有指定的类，addClass() 不会重复添加。
• 类名应当符合 HTML 规范，避免使用特殊字符或空格（多个类名之间用空格分隔除外）。
• 该方法支持链式调用，可以与其他 jQuery 方法一起使用。

示例

<div id="example">示例元素</div>

<script>
$(document).ready(function(){
  $("#example").addClass("active").css("color", "red");
});
</script>

这段代码会为 #example 元素添加 active 类，并同时修改其文字颜色为红色。