这里有一个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等方法之后，都会返回当前的对象，所以可以进行链式操作
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>mouseover.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.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="1"> <!--用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> </td> </tr> <tr> <td> 邓国梁 </td> <td> 23 </td> <td> 31540205 </td> <td> </td> </tr> <tr> <td> 邓国梁 </td> <td> 23 </td> <td> 31540205 </td> <td> </td> </tr> <tr> <td> 邓国梁 </td> <td> 23 </td> <td> 31540205 </td> <td> </td> </tr> <tr> <td> 邓国梁 </td> <td> 23 </td> <td> 31540205 </td> <td> </td> </tr> <tr> <td> 邓国梁 </td> <td> 23 </td> <td> 31540205 </td> <td> </td> </tr> </tbody> </table> </body> </html>http://wiki.jquery.org.cn/doku.php?id=jquery%E4%B8%AD%E6%96%87%E6%8C%87%E5%AF%BC:15%E5%A4%A9%E5%AD%A6%E4%BC%9Ajquery
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦