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闭包的理解和实例
Aug 12 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
js 调用百度分享功能
Feb 27 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
vue实现井字棋游戏
Sep 29 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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设计模式之责任链模式的深入解析
2013/06/13 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
jQuery.extend 函数及用法详细
2015/09/06 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python实现图片九宫格分割
2021/03/07 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
数组越界问题
2015/10/21 面试题
钳工实习自我鉴定
2013/09/19 职场文书
商场端午节活动方案
2014/01/29 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
《月迹》教学反思
2014/02/19 职场文书
教师教学评估方案
2014/05/09 职场文书
人事任命书范文
2014/06/04 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
Redis Lua脚本实现ip限流示例
2022/07/15 Redis