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 相关文章推荐
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
react 创建单例组件的方法
Apr 26 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
webpack的tree shaking的实现方法
Sep 18 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
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
python写日志封装类实例
2015/06/28 Python
Python操作Excel之xlsx文件
2017/03/24 Python
深入理解Django的中间件middleware
2018/03/14 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
python判断是空的实例分享
2020/07/06 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python如何获取文件路径/目录
2020/09/22 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
干部鉴定材料
2014/05/18 职场文书
植树节标语
2014/06/27 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
Python中Permission denied的解决方案
2021/04/02 Python