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学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 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重定向的3种方式
2013/03/07 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
js资料prototype 属性
2007/03/13 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
vue实现搜索功能
2019/05/28 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
python学生信息管理系统
2018/03/13 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
python读写LMDB文件的方法
2018/07/02 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
红旗方阵解说词
2014/02/12 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
保护动物的标语
2014/06/11 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书