jquery入門(mén)—選擇器實(shí)現(xiàn)隔行變色實(shí)例代碼
更新時(shí)間：2013年01月04日 17:15:58 作者：
JQuery入門(mén)—選擇器實(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)隔行變色，示例代碼如下：
<!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)隔行變色的代碼如下：
<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)隔行變色代碼：
</script>
<script type="text/javascript">
$(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd");
})
</script>
兩者相比，明顯JQuery代碼更簡(jiǎ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 animate和CSS3相結(jié)合實(shí)現(xiàn)緩動(dòng)追逐效果附源碼下載
這篇文章主要介紹了jQuery animate和CSS3相結(jié)合實(shí)現(xiàn)緩動(dòng)追逐效果的相關(guān)資料,需要的朋友可以參考下2016-04-04
jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)
下面小編就為大家?guī)?lái)一篇jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
jQuery動(dòng)畫(huà)效果實(shí)現(xiàn)圖片無(wú)縫連續(xù)滾動(dòng)
這篇文章主要為大家介紹了jQuery動(dòng)畫(huà)效果實(shí)現(xiàn)圖片無(wú)縫連續(xù)滾動(dòng)，實(shí)現(xiàn)類(lèi)似連續(xù)不間斷的滾動(dòng)廣告位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了jQuery取消特定的click事件實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery簡(jiǎn)單實(shí)現(xiàn)事件綁定及取消事件綁定的相關(guān)技巧,需要的朋友可以參考下2016-02-02
jQuery插件Validation快速完成表單驗(yàn)證的方式
這篇文章主要為大家詳細(xì)介紹了jQuery插件Validation快速完成表單驗(yàn)證的方式，感興趣的小伙伴們可以參考一下2016-07-07
jQuery中DOM樹(shù)操作之使用反向插入方法實(shí)例分析
這篇文章主要介紹了jQuery中DOM樹(shù)操作之使用反向插入方法,實(shí)例分析了反向插入方法與插入方法回調(diào)的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)無(wú)縫輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
jQuery彈出窗口簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery彈出窗口的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
下拉菜單是網(wǎng)站導(dǎo)航常用的表現(xiàn)形式之一，能夠呈現(xiàn)更多的導(dǎo)航內(nèi)容。如果網(wǎng)站能夠設(shè)計(jì)出有吸引力的網(wǎng)站導(dǎo)航，將會(huì)吸引更多的用戶(hù)去瀏覽網(wǎng)站的內(nèi)容2012-06-06
jQuery Validate插件實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了jQuery Validate插件實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-08-08