jQuery addClass() 方法

jQuery HTML/CSS 方法

addClass()方法将一个或多个类名称添加到所选元素。

此方法不会删除现有的类属性,而只会向该类属性添加一个或多个类名称。

语法:

添加类别:

$(selector).addClass(className)

使用函数添加类:

$(selector).addClass(function(index, currentClass))

实例

在第一个<p>元素中添加一个类名:

$("button").click(function(){
  $("p:first").addClass("highlight");
});
测试看看‹/›

一次可以将多个类(用空格隔开)添加到所选元素,如下所示:

$("button").click(function(){
  $("p:first").addClass("highlight big");
});
测试看看‹/›

使用函数添加类:

$("p").addClass(function(index, currentClass) {
  let addedClass;
  if(currentClass === "red") {
    addedClass = "green";
    $(this).text("有一个绿色的段落");
  }
  return addedClass;
});
测试看看‹/›

使用removeClass()删除一个类名,并用addClass()添加一个新的类名:

$("button").click(function(){
  $("p").removeClass("red").addClass("green");
});
测试看看‹/›

参数值

参数描述
className指定要添加的一个或多个以空格分隔的类名
function(index, currentClass)函数,该函数返回一个或多个以空格分隔的类名称,以将其添加到现有的类名称中
  • index-返回元素在集合中的索引位置

  • currentClass-返回所选元素的当前类名称

jQuery HTML/CSS 方法