jquery添加类名详解

一、jquery添加类名的方法

在jquery中，可以使用addClass()方法来添加类名，该方法可以添加一个或多个类名。

//添加一个类名
$(selector).addClass(className);

//添加多个类名
$(selector).addClass(className1 className2 ...);

其中，selector是需要添加类名的元素，className是要添加的类名，可以是一个或多个，多个类名需要用空格隔开。

例如，下面的代码将class为"demo"的元素添加上"active"和"important"两个类名：

$(document).ready(function(){
  $(".demo").addClass("active important");
});

二、jquery移除类名的方法

和addClass()方法相对应，jquery中也提供了removeClass()方法来移除元素的类名。

//移除一个类名
$(selector).removeClass(className);

//移除多个类名
$(selector).removeClass(className1 className2 ...);

例如，下面的代码将class为"demo"的元素移除"active"和"important"两个类名：

$(document).ready(function(){
  $(".demo").removeClass("active important");
});

三、jquery添加标签

jquery中的append()方法可以在指定元素的末尾添加一个新元素或一段HTML代码。

//添加新元素
$(selector).append(content);

//添加HTML代码
$(selector).append(function(index,html));

其中，content可以是HTML元素、文本或变量，function用来返回新添加的元素或HTML代码。例如，下面的代码会在class为"demo"的元素内部添加一个新的p标签：

$(document).ready(function(){
  $(".demo").append("
新添加的段落
");
});

四、jquery移除类名

jquery中的remove()方法可以彻底移除指定元素和元素的事件和数据，如果只需要移除元素的类名，可以使用removeAttr()方法。

//移除一个属性
$(selector).removeAttr(attribute);

//移除多个属性
$(selector).removeAttr(attribute1 attribute2 ...);

其中，attribute是元素的属性名称。例如，下面的代码将class为"demo"的元素中的class属性全部移除：

$(document).ready(function(){
  $(".demo").removeAttr("class");
});

五、jquery添加属性的方法

和addClass()方法类似，jquery中也提供了attr()方法来添加元素的属性。

//添加一个属性
$(selector).attr(attribute,value);

//添加多个属性
$(selector).attr({attribute1:value1, attribute2:value2, ...});

其中，attribute是属性名称，value是属性值。例如，下面的代码将class为"demo"的元素的title属性值设置为"这是一个链接"：

$(document).ready(function(){
  $(".demo").attr("title","这是一个链接");
});

六、jquery添加属性

jquery中的attr()方法也可以用来获取元素的属性值，不过要在括号中只传入属性名称。

//获取属性值
$(selector).attr(attribute);

例如，在上面的例子中，我们可以用下面的代码来获取class为"demo"的元素的title属性值：

$(document).ready(function(){
  var title = $(".demo").attr("title");
});

七、jquery添加html

在jquery中，html()方法可以获取或设置指定元素的HTML内容。

//获取内容
$(selector).html();

//设置内容
$(selector).html(content);

其中，content可以是HTML元素、文本或变量。例如，下面的代码将class为"demo"的元素的HTML内容设置为一段新的文本：

$(document).ready(function(){
  $(".demo").html("
这是新的HTML内容
");
});

八、jquery类名选择器

在jquery中，可以使用类名选择器来选择拥有指定类名的元素。

$(document).ready(function(){
  $(".demo").addClass("active");
});

上面的代码会把所有class为"demo"的元素添加上"active"类名。

九、jquery添加多个类名

如前所述，jquery中的addClass()方法可以添加一个或多个类名，这里再举一个例子。

$(document).ready(function(){
  $(".demo").addClass("active important");
});

上面的代码将class为"demo"的元素添加上"active"和"important"两个类名。

十、在jquery中指定一个类选取

在jquery中，可以使用:first、:last、:even、:odd、:eq等伪类选择器来指定一个类选取。

$(document).ready(function(){
  $(".demo:first").addClass("active");
});

上面的代码将class为"demo"的第一个元素添加上"active"类名。