jQuery中addClass()方法用法實(shí)例

更新時(shí)間：2015年01月05日 11:24:37 投稿：shichen2014

這篇文章主要介紹了jQuery中addClass()方法用法,實(shí)例分析了addClass()方法的功能、定義及向匹配元素添加一個(gè)或多個(gè)類的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery中addClass()方法用法。分享給大家供大家參考。具體分析如下：

此方法向匹配元素添加一個(gè)或多個(gè)類。
此方法有多個(gè)語法形式。

語法結(jié)構(gòu)一:

為匹配元素添加指定的類名。如果要一次性添加多個(gè)類名，它們之間要用空格分隔。

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

$(selector).addClass(class)

參數(shù)列表:

參數(shù)	描述
class	定義被添加類的名稱

實(shí)例代碼:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

<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的邊框和字體的樣式。

語法結(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.dhdzp.com/" />

<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>