jQuery实现隔行变色的方法分析(对比原生JS)


Posted in Javascript onNovember 18, 2016

本文实例分析了jQuery实现隔行变色的方法。分享给大家供大家参考,具体如下:

原生js:

var tab = document.getElementByTagName('table')[0];
var tr = tab.getElementByTagName('tr');
for(var i=0;i<tr.length;i++){
  if(i%2==0){
    tr[i].style.background="orange";
  }else{
    tr[i].style.background="#abcdef";
  }
}

jquery dom选择器:

$('table tr:odd').css('background','orange');
$('table tr:even').css('background','#abcdef');

jquery 方法选择器:

$('table tr').filter(':odd').css('background','orange').end().filter(':even').css('background','#abcdef');

有很多的方法 ,多学一点知识,少写一行代码。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
javascript简易画板开发
Apr 12 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
原生js实现五子棋游戏
May 28 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 #Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 #Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 #Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 #Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 #Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 #Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 #Javascript
You might like
法压式咖啡之制作法
2021/03/03 冲泡冲煮
php 中英文语言转换类代码
2011/08/11 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Django中cookie的基本使用方法示例
2018/02/03 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
一道SQL面试题
2012/12/31 面试题
Linux Interview Questions For software testers
2012/06/02 面试题
活动总结书
2014/05/08 职场文书
超市客服工作职责
2014/06/11 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
小学社团活动总结
2014/06/27 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
优秀班主任材料
2014/12/16 职场文书
Python jiaba库的使用详解
2021/11/23 Python