jQuery中過濾器的基本用法示例
本文實例講述了jQuery中過濾器的基本用法。分享給大家供大家參考,具體如下:
HTML正文:
<input type="button" id="b1" value="偶數(shù)行紅色"><br> <input type="button" id="b2" value="奇數(shù)行綠色"><br> <table border=1 width="100px"> <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr> <tr><td>2</td><td>2</td><td>2</td><td>2</td></tr> <tr><td>3</td><td>3</td><td>3</td><td>3</td></tr> <tr><td>4</td><td>4</td><td>4</td><td>4</td></tr> <tr><td>5</td><td>5</td><td>5</td><td>5</td></tr> </table><br> <input type="button" id="b3" value="奇數(shù)列紅色"><br> <input type="button" id="b4" value="偶數(shù)列綠色"><br> <table border=1 width="100px"> <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr> <tr><td>2</td><td>2</td><td>2</td><td>2</td></tr> <tr><td>3</td><td>3</td><td>3</td><td>3</td></tr> <tr><td>4</td><td>4</td><td>4</td><td>4</td></tr> <tr><td>5</td><td>5</td><td>5</td><td>5</td></tr> </table><br> <input type="button" id="b5" value="奇數(shù)元素綠色"><br> <table border=1 width="100px"> <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr> <tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr> <tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr> <tr><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td></tr> <tr><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td></tr> </table>
Javascript操作代碼:
$('#b1').click(function(){ /*table:eq(0) tr:even table:eq(0):篩選出第一張表格 tr:even:篩選出tr屬性的對象 *注意table和tr對象中間有空格,表示從屬關(guān)系 */ $('table:eq(0) tr:even').css("background","red"); }); $('#b2').click(function(){ $('table:eq(0) tr:odd').css("background","green"); }); $('#b3').click(function(){ $('table:eq(1) td:even').css("background","red"); }); $('#b4').click(function(){ $('table:eq(1) td:odd').css("background","green"); }); $('#b5').click(function(){ $('table:eq(2) td:even').css("background","green"); });
效果:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery表格(table)操作技巧匯總》、《jQuery表單操作總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jQuery中可見性過濾器簡單用法示例
- JQuery的常用選擇器、過濾器、方法全面介紹
- jQuery使用contains過濾器實現(xiàn)精確匹配方法詳解
- jQuery可見性過濾器:hidden和:visibility用法實例
- JQuery選擇器、過濾器大整理
- jQuery表單域?qū)傩赃^濾器用法分析
- Jquery 過濾器(first,last,not,even,odd)的使用
- 從jquery的過濾器.filter()方法想到的
- jQuery contains過濾器實現(xiàn)精確匹配使用方法
- jQuery ajax 路由和過濾器使用說明
- jquery中通過過濾器獲取表單元素的實現(xiàn)代碼
- JQuery 選擇器、過濾器介紹
- jQuery中內(nèi)容過濾器簡單用法示例
相關(guān)文章
jQuery插件EasyUI獲取當(dāng)前Tab中iframe窗體對象的方法
這篇文章主要介紹了jQuery插件EasyUI獲取當(dāng)前Tab中iframe窗體對象的方法,涉及EasyUI窗體操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08基于jQuery實現(xiàn)自動輪播旋轉(zhuǎn)木馬特效
這篇文章主要介紹了基于jQuery實現(xiàn)自動輪播旋轉(zhuǎn)木馬特效,圖片輪播效果特別適合做產(chǎn)品展示,感興趣的小伙伴可以參考下。2015-11-11jQuery 追加元素的方法如append、prepend、before
jQuery - 追加元素的方法有很多如append、prepend、before等等,下面為大家詳細(xì)介紹下2014-01-01jQuery實現(xiàn)Meizu魅族官方網(wǎng)站的導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實現(xiàn)Meizu魅族官方網(wǎng)站的導(dǎo)航菜單效果,可實現(xiàn)導(dǎo)航菜單項鼠標(biāo)滑過出現(xiàn)下劃線動態(tài)跟隨的功能,通過jQuery插件實現(xiàn)該功能,需要的朋友可以參考下2015-09-09Jquery 自定義事件實現(xiàn)發(fā)布/訂閱的簡單實例
下面小編就為大家?guī)硪黄狫query 自定義事件實現(xiàn)發(fā)布/訂閱的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06