<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dbjr.com.cn/" />

<title>addClass函數(shù)-腳本之家</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">點(diǎn)擊查看效果</button>

</body>

</html>

以上代碼可以為div添加兩個(gè)類，能夠設(shè)置div的邊框和字體的樣式。

語(yǔ)法結(jié)構(gòu)二:

以函數(shù)的返回值作為要添加的類名。

復(fù)制代碼代碼如下:

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

參數(shù)列表:

參數(shù)	描述
function(index,oldclass)	函數(shù)定義返回需要添加的一個(gè)或多個(gè)類名。 index - 可選，接受選擇器的索引位置。 oldclass- 可選，接受選擇器的當(dāng)前的類名。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dbjr.com.cn/" />

<title>addClass()函數(shù)-腳本之家</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">點(diǎn)擊查看效果</button>

</body>

</html>