.addClass()
返回: jQuery
.addClass( className )
描述：把指定的样式类添加到匹配的元素集合中的每个元素上。
加入于: 1.0
.addClass( className )- className类型：String一个或更多用空隔分隔的类名，将要添加到每个匹配元素的样式类属性上。
加入于: 1.4
.addClass( function )注意这一点很重要：该方法不能替换掉一个样式类。它只是添加类名，把它追加到任何已经分配给元素的类名后面。
.addClass()方法操纵了选中的元素的属性className，而不是选中元素的元素属性class。一旦改变了该属性，浏览器会根据它更新元素属性。该行为暗示着该方法只对带HTML DOM语义的document起作用（例如，不能用在纯XML document上）。
可以向匹配的元素集合同时添加不止一个类名，只要用空格隔开，如下所示：
$( "p" ).addClass( "myClass yourClass" );
该方法常常与.removeClass()配合使用，从而转换元素的样式类，如下：
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
在这里，从所有的段落文本上删除了myClass类和noClass类，与此同时添加了yourClass类。
自从jQuery 1.4版，.addClass方法的参数可以接收一个函数。
$( "ul li" ).addClass(function( index ) {
return "item-" + index;
});
给出一个带有两个<li>元素的无序列表，该示例向第一个<li>添加了类名“item-0”，向第二个<li>添加了类名“item-1”。
示例
向匹配的元素添加类名“selected”。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
</body>
</html>
演示结果
向匹配的元素添加类名“selected”和“highlight”。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p:last" ).addClass( "selected highlight" );
</script>
</body>
</html>
演示结果
向.addClass()方法传入一个函数，以向一个已带有“red”类的div添加了个“green”类。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
div {
background: white;
}
.red {
background: red;
}
.red.green {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>This div should be white</div>
<div class="red">This div will be green because it now has the "green" and "red" classes.
It would be red if the addClass function failed.</div>
<div>This div should be white</div>
<p>There are zero green divs</p>
<script>
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "red" ) {
addedClass = "green";
$( "p" ).text( "There is one green div" );
}
return addedClass;
});
</script>
</body>
</html>
演示结果