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插件
Mar 29 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现影院选座订座效果
Apr 13 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
2009/06/29 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
jquery实现图片翻页效果
2013/12/23 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
javascript数据类型详解
2017/02/07 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
netbeans7安装python插件的方法图解
2013/12/24 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Python pandas常用函数详解
2018/02/07 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
大学生个人简历中的自我评价
2013/12/27 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
购房协议书范本
2014/10/02 职场文书
大一新生检讨书
2014/10/29 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
Java常用函数式接口总结
2021/06/29 Java/Android
基于Python实现一个春节倒计时脚本
2022/01/22 Python