jQuery 屬性與樣式（五）
在做某些效果的時(shí)候，可能會(huì)針對(duì)同一節(jié)點(diǎn)的某一個(gè)樣式不斷的切換，也就是addClass與removeClass的互斥切換，比如隔行換色效果
jQuery提供一個(gè)toggleClass方法用于簡(jiǎn)化這種互斥的邏輯，通過(guò)toggleClass方法動(dòng)態(tài)添加刪除Class，一次執(zhí)行相當(dāng)于addClass，再次執(zhí)行相當(dāng)于removeClass
toggleClass( )方法：在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類(lèi),取決于這個(gè)樣式類(lèi)是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類(lèi)
????toggleClass( className )：在匹配的元素集合中的每個(gè)元素上用來(lái)切換的一個(gè)或多個(gè)（用空格隔開(kāi)）樣式類(lèi)名
????toggleClass( className, switch )：一個(gè)布爾值，用于判斷樣式是否應(yīng)該被添加或移除
????toggleClass( [switch ] )：一個(gè)用來(lái)判斷樣式類(lèi)添加還是移除的 布爾值
????toggleClass( function(index, class, switch) [, switch ] )：用來(lái)返回在匹配的元素集合中的每個(gè)元素上用來(lái)切換的樣式類(lèi)名的一個(gè)函數(shù)。接收元素的索引位置和元素舊的樣式類(lèi)作為參數(shù)
注：
????toggleClass是一個(gè)互斥的邏輯，也就是通過(guò)判斷對(duì)應(yīng)的元素上是否存在指定的Class名，如果有就刪除，如果沒(méi)有就增加
????toggleClass會(huì)保留原有的Class名后新增，通過(guò)空格隔開(kāi)
下面我們來(lái)寫(xiě)一個(gè)實(shí)例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隔行換色</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
body,table,td,{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.h {
background: #f3f3f3;
color: #000;
}
.c {
background: #ebebeb;
color: #000;
}
</style>
</head>
<body>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>php中文網(wǎng)</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文網(wǎng)</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文網(wǎng)</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文網(wǎng)</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文網(wǎng)</td>
<td>php.cn</td>
</tr>
</table>
</div>
<script type="text/javascript">
//給所有的tr元素加一個(gè)class="c"的樣式
$("#table tr").toggleClass("c");
</script>
<script type="text/javascript">
//給所有的偶數(shù)tr元素切換class="c"的樣式
//所有基數(shù)的樣式保留，偶數(shù)的被刪除
$("#table tr:odd").toggleClass("c");
</script>
<script type="text/javascript">
//第二個(gè)參數(shù)判斷樣式類(lèi)是否應(yīng)該被添加或刪除
//true，那么這個(gè)樣式類(lèi)將被添加;
//false，那么這個(gè)樣式類(lèi)將被移除
//所有的奇數(shù)tr元素，應(yīng)該都保留class="c"樣式
$("#table tr:even").toggleClass("c", true); //這個(gè)操作沒(méi)有變化，因?yàn)闃邮揭呀?jīng)是存在的
</script>
</body>
</html>
