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

本文介绍了如何使用jQuery实现表格行的隔行变色效果,通过奇偶行判断实现颜色交替,以及对列表元素进行高亮显示,提升用户交互体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值