这节本身没有太多的价值，重点在它提供的这个例子上。我将代码帖出来然后对重点部分注释一下：我们先来看看Thewatchmakerproject传统的做法：预览地址(你可以查看一下源代码)。再来看看jQuery是如何用5行代码来搞定的: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>StripingTable</title><script src="jquery-latest.pack.js" type="text/javascript"></script> <!--将jQuery引用进来--><script type="text/javascript">$(document).ready(function(){  //这个就是传说的ready        $(".stripe tr").mouseover(function(){                  //如果鼠标移到class为stripe的表格的tr上时，执行函数                $(this).addClass("over");}).mouseout(function(){                                 //给这行添加class值为over，并且当鼠标一出该行时执行函数                $(this).removeClass("over");})  //移除该行的class        $(".stripe tr:even").addClass("alt");                //给class为stripe的表格的偶数行添加class值为alt});</script><style>th {        background:#0066FF;        color:#FFFFFF;        line-height:20px;        height:30px;} td {        padding:6px 11px;        border-bottom:1px solid #95bce2;        vertical-align:top;        text-align:center;} td * {        padding:6px 11px;} tr.alt td {        background:#ecf6fc;  /*这行将给所有的tr加上背景色*/} tr.over td {        background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/} </style></head> <body><table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0"> <!--用class="stripe"来标识需要使用该效果的表格--><thead>  <tr>    <th>姓名</th>    <th>年龄</th>    <th>QQ</th>    <th>Email</th>  </tr></thead><tbody>  <tr>    <td>邓国梁</td>    <td>23</td>    <td>31540205</td>    <td>gl.deng@gmail.com</td>  </tr>  <tr>    <td>邓国梁</td>    <td>23</td>    <td>31540205</td>    <td>gl.deng@gmail.com</td>  </tr>  <tr>    <td>邓国梁</td>    <td>23</td>    <td>31540205</td>    <td>gl.deng@gmail.com</td>  </tr>  <tr>    <td>邓国梁</td>    <td>23</td>    <td>31540205</td>    <td>gl.deng@gmail.com</td>  </tr>  <tr>    <td>邓国梁</td>    <td>23</td>    <td>31540205</td>    <td>gl.deng@gmail.com</td>  </tr>  <tr>    <td>邓国梁</td>    <td>23</td>    <td>31540205</td>    <td>gl.deng@gmail.com</td>  </tr></tbody></table><p>PS: 飘飘说我的table没有<thead>,我知错了...</p></body></html>

 

这里有一个jQuery的技巧不得不提一下：jQuery的链式操作，什么是链式操作呢？ 我们来看看，本来应该写成这样子的： 

$(".stripe tr").mouseover(function(){          $(this).addClass("over");}) $(".stripe tr").mouseout(function(){          $(this).removeClass("over"); })

但是我们写成了： 

$(".stripe tr").mouseover(function(){               $(this).addClass("over");}).mouseout(function(){                  $(this).removeClass("over");})

在jQuery中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作