jQuery 屬性與樣式（五）
在做某些效果的時候，可能會針對同一節點的某一個樣式不斷的切換，也就是addClass與removeClass的互斥切換，例如隔行換色效果
jQuery提供一個toggleClass方法用於簡化這種互斥的邏輯，透過toggleClass方法動態添加刪除Class，一次執行相當於addClass，再次執行相當於removeClass
toggleClass( )方法：在匹配的元素集合中的每個元素上新增或刪除一個或多個樣式類別,取決於這個樣式類別是否存在或值切換屬性。即：如果存在（不存在）就刪除（新增）一個類別
toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類別名稱
toggleClass( className, switch )：一個布林值，用於判斷樣式是否應該被新增或移除
toggleClass( [switch ] )：一個用來判斷樣式類別新增還是移除的布林值
toggleClass( function(index, class, switch) [, switch ] )：用來傳回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類別作為參數
註：
toggleClass是互斥的邏輯，也就是透過判斷對應的元素上是否存在指定的Class名，如果有就刪除，如果沒有就增加
toggleClass會保留原有的Class名後新增，透過空格隔開
下面我們來寫一個實例
<!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中文网</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文网</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文网</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文网</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文网</td>
<td>php.cn</td>
</tr>
</table>
</div>
<script type="text/javascript">
//给所有的tr元素加一个class="c"的样式
$("#table tr").toggleClass("c");
</script>
<script type="text/javascript">
//给所有的偶数tr元素切换class="c"的样式
//所有基数的样式保留，偶数的被删除
$("#table tr:odd").toggleClass("c");
</script>
<script type="text/javascript">
//第二个参数判断样式类是否应该被添加或删除
//true，那么这个样式类将被添加;
//false，那么这个样式类将被移除
//所有的奇数tr元素，应该都保留class="c"样式
$("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
</script>
</body>
</html> 
