这里有一个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
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦