jQuery——隔行变色和列表高亮显示的案例

1.隔行变色：奇红偶黄

    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            //点击按钮
            $("#btn").click(function(){
                $("#uu>li:even").css("backgroundColor","red");
                $("#uu>li:odd").css("backgroundColor","yellow");
            });
        });
    </script>
......
	<input type="button" value="显示效果" id="btn"/>
	<ul id="uu">
    	<li>在我的时代 还有唱片行</li>
    	<li>如同博物馆 装满了希望</li>
    	<li>披头与枪花 爱情和忧伤</li>
    	<li>永远骄傲 高唱</li>
    	<li>成就如沙堡 生命如海浪</li>
    	<li>浪花会淘尽 所有的幻象</li>
	</ul>

2.列表的高亮显示

    <style>
        ul{
            list-style-type: none;
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        //高亮显示效果：鼠标进入，当前li有背景颜色，离开颜色就消失
        //获取ul中所有li标签，添加鼠标进入和鼠标离开事件
        //页面加载
        $(function(){
        //链式编程
            $("#uu>li").mouseenter(function(){
                $(this).css("backgroundColor","red");
            }).mouseleave(function(){
                $(this).css("backgroundColor","");
            });
        });
    </script>
......
	<ul id="uu">
    	<li>1999年《第一张创作专辑》</li>
    	<li>2000年《爱情万岁》</li>
    	<li>2001年《人生海海》</li>
    	<li>2003年《时光机》</li>
    	<li>2004年《神的孩子都在跳舞》</li>
    	<li>2006年《为爱而生》</li>
    	<li>2008年《后青春期的诗》</li>
    	<li>2011年《第二人生》</li>
    	<li>2016年《自传》</li>
	</ul>