快捷導(dǎo)航

jquery入門—選擇器實(shí)現(xiàn)隔行變色實(shí)例代碼

更新時(shí)間：2013年01月04日 17:15:58 作者：

JQuery入門—選擇器實(shí)現(xiàn)隔行變色如何實(shí)現(xiàn)呢？JQuery選擇器繼承了CSS、path語(yǔ)音的部分語(yǔ)法，允許通過(guò)標(biāo)簽名、屬性名、內(nèi)容對(duì)DOM元素進(jìn)行快速、準(zhǔn)確的選擇,接下來(lái)詳細(xì)介紹，需要的朋友可以參考下

1、JQuery選擇器繼承了CSS、path語(yǔ)音的部分語(yǔ)法，允許通過(guò)標(biāo)簽名、屬性名、內(nèi)容對(duì)DOM元素進(jìn)行快速、準(zhǔn)確的選擇。
2、JQuery選擇器與JavaScript相比，具有代碼簡(jiǎn)單、完善的檢測(cè)機(jī)制的優(yōu)勢(shì)。
3、使用JQuery選擇器實(shí)現(xiàn)隔行變色，示例代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> 使用JQuery實(shí)現(xiàn)隔行變色 </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style type="text/css"> 
body{font-size:12px;text-align:center} 
#tbStu{width:260px;border:solid 1px #666;background-color:#eee} 
#tbStu tr{line-height:23px} 
#tbStu tr th{background-color:#ccc;color:#fff} 
#tbStu .trOdd{background-color:#fff} 
</style> 
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$("#tbStu tr:nth-child(even)").addClass("trOdd"); 
}) 
</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> 
</tbody> 
</table> 
</BODY> 
</HTML> 

效果圖如：

4、使用JavaScript實(shí)現(xiàn)隔行變色的代碼如下：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
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"; 
} 
} 
} 
</script> 

JQuery實(shí)現(xiàn)隔行變色代碼：

復(fù)制代碼代碼如下:

 
</script> 
<script type="text/javascript"> 
$(function(){ 
$("#tbStu tr:nth-child(even)").addClass("trOdd"); 
}) 
</script> 

兩者相比，明顯JQuery代碼更簡(jiǎn)單。

您可能感興趣的文章:

相關(guān)文章

JQuery UI的拖拽功能實(shí)現(xiàn)方法小結(jié)
JQuery UI是JQuery官方支持的WebUI 代碼庫(kù)，包含底層交互、動(dòng)畫、特效等API，并且封裝了一些Web小部件（Widget）。同時(shí)，JQuery UI繼承了jquery的插件支持，有大量的第三方插件可以豐富JQuery UI的功能
2012-03-03
基于jquery實(shí)現(xiàn)的定時(shí)顯示與隱藏div廣告的實(shí)現(xiàn)代碼
有時(shí)候我們需要在jquery中要顯示與隱藏層，很簡(jiǎn)單的方法就是直接使用hide與show方法就可以了，但要定時(shí)我們需要結(jié)合setTimeout函數(shù)來(lái)實(shí)現(xiàn)
2013-08-08
jQuery中prop()方法用法實(shí)例
這篇文章主要介紹了jQuery中prop()方法用法,以實(shí)例形式較為詳細(xì)的分析了prop()方法的功能、定義及獲取或者設(shè)置匹配元素屬性值的各種常見使用技巧,需要的朋友可以參考下
2015-01-01
jquery拖拽效果完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了jquery拖拽效果實(shí)現(xiàn)方法,詳細(xì)介紹了jQuery實(shí)現(xiàn)拖拽功能的具體步驟與相關(guān)技巧,并附代碼了demo源碼供讀者下載參考,需要的朋友可以參考下
2016-01-01
jquery如何獲取復(fù)選框的值
獲取復(fù)選框的值的方法有很多，舉不勝舉，在本文將為大家介紹下jquery是如何獲取復(fù)選框的值的，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
CSS3,HTML5和jQuery搜索框集錦
小編收集了13個(gè)有用的CSS3,HTML5和jQuery搜索表單腳本來(lái)幫助大家從頭開始創(chuàng)建一個(gè)搜索框。希望能夠幫助到大家，讓我們一起來(lái)看看吧！
2014-12-12
基于JQuery和原生JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)定位導(dǎo)航特效
本文通過(guò)實(shí)例代碼給大家介紹了基于JQuery和原生JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)定位導(dǎo)航特效，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-04-04
JQuery自定義模態(tài)框效果
這篇文章主要為大家詳細(xì)介紹了JQuery自定義模態(tài)框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
jquery mobile 實(shí)現(xiàn)自定義confirm確認(rèn)框效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery mobile 實(shí)現(xiàn)自定義confirm確認(rèn)框效果的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jQuery中delegate()方法用法實(shí)例
這篇文章主要介紹了jQuery中delegate()方法用法,實(shí)例分析了delegate()方法的功能、定義及為匹配元素的子元素添加一個(gè)或多個(gè)事件,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行函數(shù)的使用技巧,需要的朋友可以參考下
2015-01-01