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了，不过在实际应用中还是下面两种运用得多一些，因为我们不得不考虑到浏览器兼容问题。
