jQuery 属性操作 - addClass() 方法

jQuery 属性操作 - addClass() 方法

实例

向第一个 p 元素添加一个类：

$("button").click(function(){
  $("p:first").addClass("intro");
});

定义和用法

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

提示：如需添加多个类，请使用空格分隔类名。

语法

$(selector).addClass(class)

参数	描述
class	必需。规定一个或多个 class 名称。

使用函数来添加类

使用函数向被选元素添加类。

语法

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

参数	描述
function(index,oldclass)	必需。规定返回一个或多个待添加类名的函数。 - index - 可选。选择器的 index 位置。 - class - 可选。选择器的旧的类名。

实例

向元素添加两个类

如何向被选元素添加两个 class。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("intro note");
  });
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:blue;
}
.note
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>向第一个 p 元素添加两个类</button>
</body>
</html>

改变元素的类

如任何使用 addClass() 和 removeClass() 来移除 class，并添加新的 class。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").removeClass("intro").addClass('main');
  });
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
.main
{
font-size:90%;
color:blue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>改变第一个段落的类</button>
</body>
</html>