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 相关文章推荐
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 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 fckeditor 调用的函数
2009/06/21 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
党员公开承诺书范文
2014/03/25 职场文书
工作评语大全
2014/04/26 职场文书
助理政工师申报材料
2014/06/03 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
预备党员转正材料
2014/12/19 职场文书
房屋质量投诉书
2015/07/02 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL