jQuery的addClass()方法

2024-04-27 15:00:29

字体：大中小

来源：转载

供稿：网友

addClass()方法的定义和用法:

此方法向匹配元素添加一个或多个类。

此方法有多个语法形式。

语法结构一:

为匹配元素添加指定的类名。如果要一次性添加多个类名，它们之间要用空格分隔。

$(selector).addClass(class)

参数列表:

参数	描述
class	定义被添加类的名称

实例代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/CSS">div{  height:200px;  width:200px;}.border{  border:1px solid red;}.reset{  font-size:20px;  color:green;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/Javascript">$(document).ready(function(){  $("#btn").click(function(){    $("div").addClass("border reset");  })})</script></head><body><div>蚂蚁部落欢迎您</div><button id="btn">点击查看效果</button></body></html>

以上代码可以为div添加两个类，能够设置div的边框和字体的样式。

语法结构二:

以函数的返回值作为要添加的类名。

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

参数列表:

参数	描述
function(index,oldclass)	函数定义返回需要添加的一个或多个类名。 index - 可选，接受选择器的索引位置。 oldclass- 可选，接受选择器的当前的类名。

实例代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">div{  height:200px;  width:200px;}.border{  border:1px solid red;}.reset{  font-size:20px;  color:green;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){  $("#btn").click(function(){    $("div").addClass(function(){      return "border reset";    })  })})</script></head><body>  <div>蚂蚁部落欢迎您</div>  <button id="btn">点击查看效果</button></body></html>