.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> <h4>.toggleClass(className)和.toggleClass(className,switch)</h4> <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> <tr> <td>慕課jQuery入門</td> <td>慕課jQuery入門</td> </tr> <tr> <td>慕課jQuery入門</td> <td>慕課jQuery入門</td> </tr> <tr> <td>慕課jQuery入門</td> <td>慕課jQuery入門</td> </tr> <tr> <td>慕課jQuery入門</td> <td>慕課jQuery入門</td> </tr> <tr> <td>慕課jQuery入門</td> <td>慕課jQuery入門</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>