jQuery实现隔行变色的方法分析(对比原生JS)
程序员文章站
2022-03-14 09:20:49
...
本文实例分析了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');
有很多的方法 ,多学一点知识,少写一行代码。
推荐阅读
-
原生js实现复制对象、扩展对象 类似jquery中的extend()方法教程
-
jQuery隔行变色与普通JS写法的对比
-
原生JS实现列表子元素顺序反转的方法分析
-
原生js 和 jQuery 分别实现隔行变色(简单的方法)
-
原生js+cookie实现购物车功能的方法分析
-
jQuery实现table隔行换色和鼠标经过变色的两种方法
-
原生js实现复制对象、扩展对象 类似jquery中的extend()方法教程
-
jQuery实现table隔行换色和鼠标经过变色的两种方法_jquery
-
原生js实现复制对象、扩展对象 类似jquery中的extend()方法_javascript技巧
-
jQuery隔行变色与普通JS写法的对比_jquery