CSS3、jQuery、JavaScript分别实现隔行变色
本文从三个技术角度实现网页效果中常见的隔行变色,为什么要采用隔行变色呢?
1、从用户体验角度来看,无疑对提高用户对页面的友好感情会有很大的帮助;
2、从网页设计的角度来看,页面色彩不再那么单一的白或者其他颜色,非常好地提高页面的可读性;
3、从前端开发的角度来评的话,在WEB开发的今天,这种效果不再单单使用JS来控制,随着CSS3的日益成熟,页面开发也变得越来越简单。
下面我从CSS3、jQuery、原生JavaScript,这三种技术角度来分析和实现隔行变色。
一、使用CSS3的选择器(浏览器支持:IE9+、Firefox 4+、webkit内核浏览器、pera 11.5+)
使用CSS3一句样式属性就可以实现,三种方法中最简单
实战中的应用:
较新的现代浏览器可以放心使用,如果要考虑到IE8-,可以使用一种JS库来模拟CSS3选择器,别外也可以使用下面介绍的jQuery方法和原生JavaScript方法。
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>CSS3、jQuery、JS分别实现隔行变色--贺炳应、学习之路</title> <style> ul,li{ list-style: none;} ul{ width: 650px;} li{ border-bottom: 1px solid #CCC; height: 30px;} /*CSS3选择器方法*/ li:nth-child(even){ background: #EEE;} </style> </head> <body> <h1>隔行变色</h1> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
二、使用jQuery的选择器(浏览器支持:All)
实战中的应用:
jQuery是全球使用最多的一个js库,对浏览器的兼容也非常好,但前提是需要引用jQuery库。
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>CSS3、jQuery、JS分别实现隔行变色--贺炳应、学习之路</title> <style> ul,li{ list-style: none;} ul{ width: 650px;} li{ border-bottom: 1px solid #CCC; height: 30px;} </style> <script src="http://code.jquery.com/jquery-1.9.1.min.js";></script> <script> $(function(){ $('ul li:nth-child(even)').css("background","#EEE"); }); </script> </head> <body> <h1>隔行变色</h1> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
三、使用原生JavaScript(浏览器支持:All)
实战中的应用:
这三种方法中,原生JavaScript是最复杂的一种,但实现这个效果还是比较简单的,也没有什么浏览器兼容问题,只是比JQ要多写一些代码而已
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>CSS3、jQuery、JS分别实现隔行变色--贺炳应、学习之路</title> <style> ul,li{ list-style: none;} ul{ width: 650px;} li{ border-bottom: 1px solid #CCC; height: 30px;} </style> <!-- 原生JavaScript方法 --> <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++) { if(i%2!=0) { aLi[i].style.background='#EEE'; } else { aLi[i].style.background=''; } } } </script> </head> <body> <h1>隔行变色</h1> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
综合以上三种方法,最简单的就是CSS3了,不过在实际应用中还是下面两种运用得多一些,因为我们不得不考虑到浏览器兼容问题。