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.Pin垂直滚动时固定导航
May 24 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery实现可以扩展的日历
Dec 01 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
jquery提交form表单简单示例分享
2014/03/03 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
python读写csv文件的方法
2019/08/13 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Unix如何添加新的用户
2014/08/20 面试题
护士毕业自我鉴定
2014/02/07 职场文书
社区工作者感言
2014/03/02 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
小学生寒假家长评语
2014/04/16 职场文书
派出所所长先进事迹
2014/05/19 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
高一地理教学工作总结
2015/08/12 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python
搭建Yolov5服务器
2022/04/30 Servers