jQuery中过滤器的基本用法示例


Posted in jQuery onOctober 11, 2017

本文实例讲述了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程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery中extend函数简单用法示例
Oct 11 #jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 #jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 #jQuery
jQuery实现的form转json经典示例
Oct 10 #jQuery
认识jQuery的Promise的具体使用方法
Oct 10 #jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 #jQuery
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
jQuery链使用指南
2015/01/20 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
Python random模块常用方法
2014/11/03 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
电信营业员自我评价分享
2014/01/17 职场文书
模范教师事迹材料
2014/02/10 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
运动会口号16字
2014/06/07 职场文书
工会趣味活动方案
2014/08/18 职场文书
委托证明书
2014/09/17 职场文书
学生犯错保证书
2015/05/09 职场文书