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

it2022-05-06  0

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>

最新回复(0)