jquery隔行換色效果實(shí)現(xiàn)方法

更新時(shí)間：2015年01月15日 10:35:00 投稿：shichen2014

這篇文章主要介紹了jquery隔行換色效果實(shí)現(xiàn)方法,涉及even及odd選擇器的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery隔行換色效果實(shí)現(xiàn)方法。分享給大家供大家參考。具體分析如下：

使用 jquery 來(lái)實(shí)現(xiàn)隔行換行的效果，簡(jiǎn)單得就跟吃飯一樣。來(lái)吧，看看代碼到底有多么的簡(jiǎn)單

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

 $(function(){

  $("#stu tr:even").addClass("bg");

  $("#stu tr:odd").addClass("bg1");

 });

</script>

<style type="text/css">

#stu{width:300px;border:solid 1px green;border-spacing:0px;}

#stu th{background:#ccc;}

.bg{background:blue;}

.bg1{background:yellow;}

</style>

</head>

<body>

<table id="stu">

 <tr><th>學(xué)號(hào)</th><th>姓名</th><th>專(zhuān)業(yè)</th></tr>

 <tr><td>0812124</td><td>羊羊羊</td><td>生物工程</td></tr>

 <tr><td>0812120</td><td>燕燕燕</td><td>軟件工程</td></tr>

 <tr><td>0812124</td><td>王美人</td><td>計(jì)算機(jī)</td></tr>

 <tr><td>0812124</td><td>海飛絲</td><td>商務(wù)英語(yǔ)</td></tr>

 <tr><td>0812124</td><td>宋夫人</td><td>藥物研究</td></tr>

</table>

</body>

</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js jquery獲取隨機(jī)生成id的服務(wù)器控件的三種方法
由于ASP.NET網(wǎng)頁(yè)運(yùn)行后，服務(wù)器控件會(huì)隨機(jī)生成客戶(hù)端id，jquery獲取時(shí)候不太好操作,下面為大家整理了三種方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
JQuery 學(xué)習(xí)筆記 element屬性控制
JQuery元素屬性控制
2009-07-07
基于JSON格式數(shù)據(jù)的簡(jiǎn)單jQuery幻燈片插件(jquery-slider)
jquery-slider幻燈片插件通過(guò)json數(shù)據(jù)來(lái)提供圖片地址和描述信息，同時(shí)也可以更換json數(shù)據(jù)來(lái)動(dòng)態(tài)切換不同的圖片，對(duì)json數(shù)據(jù)jquery幻燈片插件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
淺析jQuery的鏈?zhǔn)秸{(diào)用之each函數(shù)
如果對(duì)于jquery的$()包裝器函數(shù)還不是很清楚，請(qǐng)先參閱我的上一篇日志：淺析jQuery的鏈?zhǔn)秸{(diào)用
2010-12-12
JavaScript實(shí)現(xiàn)的滾動(dòng)公告特效【基于jQuery】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的滾動(dòng)公告特效,結(jié)合完整實(shí)例形式詳細(xì)分析了基于jQuery實(shí)現(xiàn)的頁(yè)面元素間歇修改,最終達(dá)到滾動(dòng)公告效果的相關(guān)操作技巧,需要的朋友可以參考下
2019-07-07
jquery設(shè)置按鈕停頓3秒不可用
設(shè)置按鈕停頓3秒不可用的方法有很多，下面為大家介紹下使用jquery是如何實(shí)現(xiàn)的
2014-03-03
jquery高級(jí)編程的最佳實(shí)踐詳解
這篇文章主要介紹了jquery高級(jí)編程的最佳實(shí)踐詳解,學(xué)習(xí)JQ的朋友一定需要這個(gè)，參考下吧
2014-03-03
jquery+json實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了如何利用jquery結(jié)合json實(shí)現(xiàn)分頁(yè)效果，感興趣的小伙伴們可以參考一下
2016-03-03
jquery 得到當(dāng)前頁(yè)面高度和寬度的兩個(gè)函數(shù)
得到當(dāng)前頁(yè)面高度和寬度的兩個(gè)函數(shù)
2010-02-02
jquery不會(huì)自動(dòng)回收xmlHttpRequest對(duì)象導(dǎo)致了內(nèi)存溢出
在園子里面看到kuibono的文章說(shuō)JQuery不會(huì)自動(dòng)回收xmlHttpRequest對(duì)象，并且在每次Ajax請(qǐng)求之后都會(huì)創(chuàng)建一個(gè)新的xmlHttpRequest對(duì)象，感到驚訝，索性寫(xiě)了一個(gè)程序驗(yàn)正了一下，果然如kuibono所言
2012-06-06