使用jquery hover事件实现表格的隔行换色功能示例


Posted in Javascript onSeptember 03, 2013

jQuery hover事件

hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

参数:
over (Function) : 鼠标移到元素上要触发的函数
out (Function): 鼠标移出元素要触发的函数

示例:
鼠标悬停的表格加上特定的类

jQuery 代码:

$(".table_list tr").hover( 
function () { 
$(this).addClass("hover"); 
}, 
function () { 
$(this).removeClass("hover"); 
} );

这里自己注意几点:

1,.hover是个类,想要什么效果自己写。

2,别忘记引入jquery.js文件,要不然不起作用还报错。

3,相比于传统的css,比如this.bgColor='red'这样的方式,简单很多了,不需要再一行行添加了。

4,当然可以实现奇偶行效果不同,读者自己去研究吧。

今日发现一个更为简单的办法,就是使用jquery的each方法,这个只需要一行代码既可以实现隔行换色效果。只不过不会随着鼠标的移动而变化罢了。

$(".tablist tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]});
Javascript 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
javascript截取字符串小结
Apr 28 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
使用js操作cookie的一点小收获分享
Sep 03 #Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 #Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 #Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 #Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 #Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 #Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 #Javascript
You might like
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Python实现Linux的find命令实例分享
2017/06/04 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
质检部职责
2013/12/28 职场文书
青年文明号事迹材料
2014/01/18 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
小学四年级学生评语
2014/12/26 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
子女赡养老人协议书
2016/03/23 职场文书
Mysql Show Profile
2021/04/05 MySQL
python 实现德洛内三角剖分的操作
2021/04/22 Python
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python