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对象数组按属性快速排序
Jan 31 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
浅谈react useEffect闭包的坑
Jun 08 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 include加载文件两种方式效率比较
2010/08/08 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
html+js实现动态显示本地时间
2013/09/21 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
从setTimeout看js函数执行过程
2017/12/19 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python如何重载模块实例解析
2018/01/25 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python流程控制 while循环实现解析
2019/09/02 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
自主招生自荐信
2013/12/08 职场文书
党员的自我评价范文
2014/01/02 职场文书
干部行政关系介绍信
2014/01/17 职场文书
优秀团支部申报材料
2014/12/26 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript