使用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 相关文章推荐
js 文本滚动效果的实例代码
Aug 17 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
vue.js学习之递归组件
Dec 13 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
layer.prompt输入层的例子
Sep 24 Javascript
vue el-table实现自定义表头
Dec 11 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 和 HTML
2006/10/09 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
Python 内置函数complex详解
2016/10/23 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Django权限机制实现代码详解
2018/02/05 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
python中adb有什么功能
2020/06/07 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
村官个人总结范文
2015/03/03 职场文书
趣味运动会赞词
2015/07/22 职场文书
小学远程教育工作总结
2015/08/13 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
MySQL查询日期时间
2022/05/15 MySQL