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 URL传中文参数引发的乱码问题
Sep 02 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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实现读取和编写XML DOM代码
2010/04/07 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
JavaScript中的闭包介绍
2015/03/15 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
简单了解python协程的相关知识
2019/08/31 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
售后主管岗位职责
2013/12/08 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
2014年生产部工作总结
2014/12/17 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL