jQuery实现的隔行变色功能【案例】


Posted in jQuery onFebruary 18, 2019

本文实例讲述了jQuery实现的隔行变色功能。分享给大家供大家参考,具体如下:

实现效果如图:

jQuery实现的隔行变色功能【案例】

html结构代码:

<ul id="ul1">
 <li>我是第1个li标签</li>
 <li>我是第2个li标签</li>
 <li>我是第3个li标签</li>
 <li>我是第4个li标签</li>
 <li>我是第5个li标签</li>
 <li>我是第6个li标签</li>
 <li>我是第7个li标签</li>
 <li>我是第8个li标签</li>
 <li>我是第9个li标签</li>
 <li>我是第10个li标签</li>
</ul>

JQuery代码:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
 $ ( function () {
  //1.把奇数行li标签的背景色设置为天蓝色.
  $('li:odd').css('backgroundColor','skyblue');
  //2.把偶数行li标签的背景色设置为红色.
  $('li:even').css('backgroundColor','red');
  //3. 鼠标移入事件
  var bgColor=null;//先声明一个变量把颜色存起来
  $('li').mouseover(function ( ) {
   // 3.1在鼠标移入到这个li标签时,没有改变颜色之前,把他之前的颜色给记录下来.
   bgColor=$(this).css('backgroundColor');
   $(this).css('backgroundColor','green')
  })
  //4. 鼠标移出事件
  $('li').mouseout(function ( ) {
   $(this).css('backgroundColor',bgColor)
  })
 } )
</script>

完整实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery隔行变色</title>
</head>
<body>
<ul id="ul1">
 <li>我是第1个li标签</li>
 <li>我是第2个li标签</li>
 <li>我是第3个li标签</li>
 <li>我是第4个li标签</li>
 <li>我是第5个li标签</li>
 <li>我是第6个li标签</li>
 <li>我是第7个li标签</li>
 <li>我是第8个li标签</li>
 <li>我是第9个li标签</li>
 <li>我是第10个li标签</li>
</ul>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
 $ ( function () {
  //1.把奇数行li标签的背景色设置为天蓝色.
  $('li:odd').css('backgroundColor','skyblue');
  //2.把偶数行li标签的背景色设置为红色.
  $('li:even').css('backgroundColor','red');
  //3. 鼠标移入事件
  var bgColor=null;//先声明一个变量把颜色存起来
  $('li').mouseover(function ( ) {
   // 3.1在鼠标移入到这个li标签时,没有改变颜色之前,把他之前的颜色给记录下来.
   bgColor=$(this).css('backgroundColor');
   $(this).css('backgroundColor','green')
  })
  //4. 鼠标移出事件
  $('li').mouseout(function ( ) {
   $(this).css('backgroundColor',bgColor)
  })
 } )
</script>
</body>
</html>

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 #jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 #jQuery
jquery无缝图片轮播组件封装
Nov 25 #jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
You might like
php getsiteurl()函数
2009/09/05 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
Python中针对函数处理的特殊方法
2014/03/06 Python
Python中zfill()方法的使用教程
2015/05/20 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
详解Python sys.argv使用方法
2019/05/10 Python
Django model update的多种用法介绍
2020/03/28 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
学生干部的自我评价分享
2014/01/18 职场文书
化妆品活动策划方案
2014/05/23 职场文书
80后婚前协议书范本
2014/10/24 职场文书
匿名检举信范文
2015/03/02 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
员工升职自我评价
2019/03/26 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js