jQuery隔行變色與普通JS寫法的對(duì)比

更新時(shí)間：2013年04月21日 16:43:09 作者：

普通JS寫法與jQuery選擇器寫法,選擇table的行，隔一行，選擇一行，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助

 
<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給一個(gè)DIV復(fù)制內(nèi)容時(shí)，不需要檢測(cè)該DIV是否存在 
// $('#divMain').html('這是一個(gè)檢測(cè)頁(yè)面'); 
}) 
</script> 
</head> 
<body> 
<table id="tbStu" cellpadding="0" cellspacing="0" > 
<tbody> 
<tr> 
<th>學(xué)號(hào)</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> 

您可能感興趣的文章:

相關(guān)文章

jquery Deferred 快速解決異步回調(diào)的問題
下面小編就為大家?guī)硪黄猨query Deferred 快速解決異步回調(diào)的問題。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-04-04
基于jQuery的一個(gè)擴(kuò)展form序列化到j(luò)son對(duì)象
jQuery沒有直接支持form到j(luò)son的序列化方法，目前網(wǎng)上有一個(gè)實(shí)現(xiàn)是這樣的
2010-12-12
jquery遍歷input取得input的name
非常簡(jiǎn)單的一句話即可實(shí)現(xiàn)，大家可以看看。
2009-04-04
jquery中each循環(huán)的簡(jiǎn)單回滾操作
本篇文章主要介紹了jquery中each循環(huán)的簡(jiǎn)單回滾操作的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-05-05
常用jQuery選擇器匯總
元素選擇是一切操作的前提，jQuery中$()函數(shù)最強(qiáng)大最常用的功能之一就是使用選擇器選擇DOM元素。這里就匯總一些十分常用的jQuery選擇器。
2017-02-02
設(shè)置jquery UI 控件的大小方法
下面小編就為大家?guī)硪黄O(shè)置jquery UI 控件的大小方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-12-12
JQery jstree 大數(shù)據(jù)量問題解決方法
Jquery 結(jié)合jstree 動(dòng)態(tài)生成一棵樹，如果某一節(jié)點(diǎn)下目錄超過500個(gè)，IE 會(huì)提示是否允許JS腳本運(yùn)行，并且目錄加載不全，大約只加載了300左右。
2010-03-03
jquery獲取自定義屬性(attr和prop)實(shí)例介紹
jquery中用attr()方法來獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會(huì)經(jīng)常用到attr()，attr()有4個(gè)表達(dá)式
2013-04-04
jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能示例
這篇文章主要介紹了jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能,結(jié)合實(shí)例形式分析了jQuery.cookie.js插件的常用函數(shù)功能及實(shí)現(xiàn)換膚功能的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
jQuery圖片的展開和收縮實(shí)現(xiàn)代碼
圖片的展開和收縮使用jquery實(shí)現(xiàn)不可思議吧，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery 有所幫助
2013-04-04