jquery添加类名

jQuery 添加类名的方法

使用 jQuery 为元素添加类名主要通过 addClass() 方法实现。该方法可以动态地为选中的元素添加一个或多个类名，不影响原有的类名。

基本语法

$(selector).addClass(className);

• selector：jQuery 选择器，用于选中目标元素。
• className：要添加的类名（字符串），多个类名用空格分隔。

示例代码

为单个元素添加类名：

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

为多个元素批量添加类名：

$(".items").addClass("highlight");

添加多个类名：

$("#header").addClass("text-bold bg-primary");

动态添加类名

可以通过变量或条件判断动态添加类名：

const status = "success";
$("#statusIndicator").addClass(status === "success" ? "text-green" : "text-red");

链式操作

addClass() 支持链式调用，可与其他 jQuery 方法组合：

$("#button")
  .addClass("btn-primary")
  .text("Submit")
  .on("click", handleClick);

注意事项

• 类名需符合 HTML 规范（避免特殊字符或空格）。
• 重复添加相同类名不会重复生效。
• 如需移除类名，使用 removeClass() 方法。

替代方案（原生 JavaScript）

如果不想依赖 jQuery，原生 JavaScript 也可实现：

document.getElementById("myElement").classList.add("active");