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>