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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
基于vue实现分页效果
2017/11/06 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python的randrange()方法使用教程
2015/05/15 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
在python中画正态分布图像的实例
2019/07/08 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
什么是数组名
2012/05/10 面试题
如何写你的创业计划书
2014/01/07 职场文书
学生自我评价范文
2014/02/02 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
小组名称和口号
2014/06/09 职场文书
2014年客房部工作总结
2014/11/22 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB