这节本身没有太多的价值,重点在它提供的这个例子上。我将代码帖出来然后对重点部分注释一下:我们先来看看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
});
</script>
<style type="text/css">
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.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>
</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等方法之后,都会返回当前的对象,所以可以进行链式操作

posted on 2008-11-03 22:38 leweslove 阅读(230) 评论(0)  编辑  收藏 所属分类: JavaScript

只有注册用户登录后才能发表评论。


网站导航:
 
Copyright@2008-2009 By Evan