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>