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 相关文章推荐
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
js中split和replace的用法实例
Feb 28 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
教你部署vue项目到docker
Apr 05 Vue.js
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 远程关机操作的代码
2008/12/05 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
python中字符串内置函数的用法总结
2018/09/13 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python获取array中指定元素的示例
2019/11/26 Python
Python 绘制可视化折线图
2020/07/22 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
婚假请假条格式及范文
2014/04/10 职场文书
《称象》教学反思
2014/04/25 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
初三化学教学反思
2016/02/22 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS