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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php的hash算法介绍
2014/02/13 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python如何安装第三方模块
2020/05/28 Python
工程承包协议书
2014/04/22 职场文书
英文演讲稿
2014/05/15 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL