在网页设计中，隔行换色是一种常见的视觉优化技巧，用于提高表格或列表的可读性。jQuery 提供了一种简洁的方法来实现这一效果，特别是通过使用 `toggleClass()` 函数。这个函数允许我们动态地切换元素的 CSS 类，从而改变其样式。在本例中，我们将详细探讨如何使用 jQuery 的 `toggleClass()` 实现隔行换色，并了解这一方法的工作原理。
我们来看一下基本的 HTML 结构，这里有一个包含多行数据的表格：
```html
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<!-- 多行数据 -->
<tr>
<td width="30" align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
<td>蓝枫前端</td>
<td>蓝枫前端</td>
</tr>
<!-- 更多行... -->
</table>
```
在 CSS 中，我们定义了两个类 `.h` 和 `.c` 来分别表示高亮和普通状态：
```css
.h { background:#f3f3f3; color:#000; }
.c { background:#ebebeb; color:#000; }
```
`.h` 类用于高亮显示，`.c` 类则用于非高亮状态，颜色较淡。
接下来，我们使用 jQuery 的 `toggleClass()` 方法来实现隔行换色。有两种不同的实现方式：
### 第一种方法：使用 `hover()` 事件
```javascript
$(function() {
$("#table tr").hover(function() {
$(this).addClass("h");
}, function() {
$(this).removeClass("h");
});
});
```
这段代码会在鼠标悬停在表格行上时添加 `.h` 类，离开时移除 `.h` 类，实现鼠标悬停时的高亮效果。
### 第二种方法：使用 `toggleClass()` 和 `click()` 事件
```javascript
$(function() {
$("#table tr").toggleClass("c");
$("input").click(function() {
if ($(this).attr("checked")) {
$(this).closest("tr").addClass("c");
} else {
$(this).closest("tr").removeClass("c");
}
});
});
```
在这个例子中，我们首先对所有表格行应用 `.c` 类，然后监听输入框（checkbox）的点击事件。当 checkbox 被选中时，我们添加 `.c` 类；反之，如果 checkbox 未被选中，我们就移除 `.c` 类。这样可以实现根据 checkbox 状态改变行的背景色。
`toggleClass()` 方法的核心在于它会检查元素是否已经包含了指定的类。如果元素有这个类，那么 `toggleClass()` 就会移除它；如果没有，就会添加这个类。这就是为什么我们可以用它来实现隔行换色，以及根据用户交互切换行的样式。
总结起来，jQuery 的 `toggleClass()` 方法在网页开发中非常实用，它简化了动态改变元素样式的操作。在隔行换色的例子中，我们看到了如何结合其他事件处理函数（如 `hover()` 和 `click()`）来实现更复杂的交互效果。通过熟练掌握这些技巧，开发者可以为用户提供更加友好和直观的界面体验。
