jQuery中过滤器的基本用法示例
2017-10-11 10:57
1066 查看
本文实例讲述了jQuery中过滤器的基本用法。分享给大家供大家参考,具体如下:
HTML正文:
<input type="button" id="b1" value="偶数行红色"><br> <input type="button" id="b2" value="奇数行绿色"><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="奇数列红色"><br> <input type="button" id="b4" value="偶数列绿色"><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="奇数元素绿色"><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对象中间有空格,表示从属关系 */ $('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"); });
效果:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jQuery中可见性过滤器简单用法示例
- JQuery的常用选择器、过滤器、方法全面介绍
- jQuery使用contains过滤器实现精确匹配方法详解
- jQuery可见性过滤器:hidden和:visibility用法实例
- JQuery选择器、过滤器大整理
- jQuery表单域属性过滤器用法分析
- Jquery 过滤器(first,last,not,even,odd)的使用
- 从jquery的过滤器.filter()方法想到的
- jQuery contains过滤器实现精确匹配使用方法
- jQuery ajax 路由和过滤器使用说明
- jquery中通过过滤器获取表单元素的实现代码
- JQuery 选择器、过滤器介绍
- jQuery中内容过滤器简单用法示例
相关文章推荐
- jQuery中可见性过滤器简单用法示例
- jQuery基本过滤选择器用法示例
- jQuery中内容过滤器简单用法示例
- jQuery的基本用法
- jQuery 8 基本过滤器
- jquery.validate.js的基本用法入门[转]
- Jquery基本用法总结
- AspNetPager控件的最基本用法示例介绍
- Jquery-zTree的基本用法
- 黑马day16 jquery&基本过滤器
- linux不带缓冲的文件操作基本函数及用法示例
- Android Volley入门到精通:初识Volley的基本用法(示例,出错代码)
- jQuery的基本用法
- jQuery中$.fn的用法示例介绍
- jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
- jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
- Jquery基本选择器 层次选择器 过滤选择器 表单选择器使用示例 带注释
- jquery 初步(三) 基本过滤器
- jQuery中的基本选择器用法学习教程
- jQuery弹出层插件popShow(改进版)用法示例