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

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=gb2312" />

"jquery-latest.pack.js" type="text/javascript"> 
<!--将jQuery引用进来-->
"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
});



 

class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0"> 
<!--用class="stripe"来标识需要使用该效果的表格-->














































  
    
姓名
    
年龄
    
QQ
    
Email
  
  
    
邓国梁
    
23
    
31540205
    
gl.deng@gmail.com
  
  
    
邓国梁
    
23
    
31540205
    
gl.deng@gmail.com
  
  
    
邓国梁
    
23
    
31540205
    
gl.deng@gmail.com
  
  
    
邓国梁
    
23
    
31540205
    
gl.deng@gmail.com
  
  
    
邓国梁
    
23
    
31540205
    
gl.deng@gmail.com
  
  
    
邓国梁
    
23
    
31540205
    
gl.deng@gmail.com
  

PS: 飘飘说我的table没有,我知错了...

预览地址

这里有一个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");})

因为鼠标移入移除都是发生在同一个对象上的，所以我们可以将发生在同一个对象上的动作连起来写，这样子如果有很多对象并且在他们身上发生了很多动作那么就会节省很多代码。（我暂时是这样理解的，也不知道对不对希望高手能够斧正。）