📅 最后修改于: 2023-12-03 15:32:08.093000 🧑 作者: Mango
jQuery addClass() 是 jQuery 操作 DOM 的一个方法，是通过添加一个或多个类名来改变 HTML 元素的样式。
$(selector).addClass(classname,function(index,currentclass))
参数：
selector：jQuery 选择器，要添加类名的元素。classname：需要添加到被选元素的一个或多个 class 名称。function(index,currentclass)：可选。规定添加类名的函数。该函数返回将要添加到被选元素的一个或多个 class 名称。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").addClass("red");
});
$("#btn2").click(function(){
$("p").addClass("important");
});
});
</script>
<style>
.red {
color: red;
}
.important {
font-weight: bold;
}
</style>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="btn1">添加 red 类</button>
<button id="btn2">添加 important 类</button>
</body>
</html>
点击按钮可以添加不同的类名，从而改变段落的样式。
可以通过 addClass() 方法向元素添加一个类名：
$("p").addClass("red");
这样，文本颜色将变成红色。
如果要为一个元素添加多个类名，可以在 addClass() 方法中传递多个类名作为参数，类名之间用空格分隔开：
$("p").addClass("red important");
这样，文本将变成红色并加粗。
也可以通过函数来添加类名。该函数返回将要添加的类名。
例如，每一行的第一个 p 元素将被添加 green 类，其他 p 元素将被添加 blue 类：
$(document).ready(function(){
$("p").addClass(function(index){
if(index === 0){
return "green";
} else {
return "blue";
}
});
});
jQuery addClass() 方法可以实现向 HTML 元素添加类名从而改变元素的样式。在使用时，需要注意传递正确的选择器以及类名参数或函数。