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中封装函数传递当前元素的方法示例
May 05 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
如何基于jQuery实现五角星评分
Sep 02 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
十大“创意”战术!
2020/03/04 星际争霸
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
详解jQuery简单的表格应用
2016/12/16 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Python验证码截取识别代码实例
2020/05/16 Python
基于opencv实现简单画板功能
2020/08/02 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
全球性的女装店:storets
2019/06/12 全球购物
建筑工地大门标语
2014/06/18 职场文书
党性观念心得体会
2014/09/03 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
python获取对象信息的实例详解
2021/07/07 Python
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
零基础学java之循环语句的使用
2022/04/10 Java/Android