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>