jQuery隔行变色与普通JS写法的对比

159 阅读 0 评论 105 点赞

我是靠谱客的博主英勇诺言，最近开发中收集的这篇文章主要介绍jQuery隔行变色与普通JS写法的对比，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<style type="text/css"> 
body { 
font-size:12px;text-align:center; 
} 
#tbStu { 
width:260px;border:1px solid #666;background-color:#eee; 
} 
#tbStu tr { 
line-height:23px; 
} 
#tbStu tr th { 
background-color:#ccc;color:#fff; 
} 
#tbStu .trOdd { 
background-color:#fff; 
} 
</style> 
<script src="jQuery/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
//普通JS写法 
//window.onload = function () { 
// var oTb = document.getElementById('tbStu'); 
// for (var i = 0; i < oTb.rows.length-1; i++) { 
// if (i % 2) 
// { 
// oTb.rows[i].className = "trOdd"; 
// } 
// } 
//} 
//jQuery选择器写法（选择table的行，隔一行，选择一行） 
$(function () { 
$('#tbStu tr:nth-child(even)').addClass("trOdd"); 
//jQuery给一个DIV复制内容时，不需要检测该DIV是否存在 
// $('#divMain').html('这是一个检测页面'); 
}) 
</script> 
</head> 
<body> 
<table id="tbStu" cellpadding="0" cellspacing="0" > 
<tbody> 
<tr> 
<th>学号</th><th>姓名</th><th>性别</th><th>部分</th> 
</tr> 
<tr> 
<td>1001</td><td>张小明</td><td>男</td><td>320</td> 
</tr> 
<tr> 
<td>1002</td><td>李明琪</td><td>女</td><td>350</td> 
</tr> 
<tr> 
<td>1003</td><td>张三</td><td>男</td><td>150</td> 
</tr> 
</tbody> 
</table> 
</body> 