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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
原生JS实现烟花效果
Mar 10 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
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python随机数函数代码实例解析
2020/02/09 Python
详解Python中的分支和循环结构
2020/02/11 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
幼儿园门卫制度
2014/01/29 职场文书
学生会部长竞聘书
2014/03/31 职场文书
劳动竞赛口号
2014/06/16 职场文书
安全第一课观后感
2015/06/18 职场文书
六一儿童节致辞
2015/07/31 职场文书
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS