jquery添加类

jQuery 添加类的方法

在 jQuery 中，可以通过 addClass() 方法为选中的元素添加一个或多个类。以下是具体的使用方法和示例。

基本语法

$(selector).addClass(className);

• selector：用于选择需要添加类的元素。
• className：要添加的类名，可以是单个类名或多个类名（用空格分隔）。

添加单个类

为选中的元素添加一个类名：

$("#myElement").addClass("active");

此代码将为 id="myElement" 的元素添加 active 类。

添加多个类

为选中的元素同时添加多个类名：

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

此代码将为所有 class="myElements" 的元素添加 class1 和 class2 两个类。

动态添加类

可以通过函数动态决定添加的类名：

$("div").addClass(function(index, currentClass) {
    return "dynamic-class-" + index;
});

此代码会为每个 div 元素添加一个动态生成的类名，如 dynamic-class-0、dynamic-class-1 等。

注意事项

• 如果元素已经包含指定的类名，addClass() 不会重复添加。
• 类名区分大小写，需确保拼写正确。
• 可以通过链式调用结合其他 jQuery 方法，如：

  $("button").addClass("btn").attr("disabled", true);

示例

HTML 结构：

<div id="box">这是一个盒子</div>
<button id="addClassBtn">添加类</button>

jQuery 代码：

$("#addClassBtn").click(function() {
    $("#box").addClass("highlight");
});

点击按钮后，#box 元素会添加 highlight 类。

兼容性

addClass() 方法兼容所有现代浏览器以及 jQuery 1.0 及以上版本。