使用jquery hover事件实现表格的隔行换色功能示例
jQuery hover事件
hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
参数:
over (Function) : 鼠标移到元素上要触发的函数
out (Function): 鼠标移出元素要触发的函数
示例:
鼠标悬停的表格加上特定的类
$(".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]});
相关推荐
-
jQuery 鼠标经过(hover)事件的延时处理示例
一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处理.但是,有时候,为了避免不必要的干扰,常会对鼠标hover事件进行延时处理.所谓干扰,就是当用户鼠标不经意划过摸个链接,选项卡,或是其他区域时,本没有显示隐藏层,或是选项卡切换,但是由于这些元素上绑定了hover事件(或是mouseover事件),且无延时,这些时间就会立即触发,反而会对用户进行干
-
jQuery实现hover合成事件的方法
本文实例讲述了jQuery实现hover合成事件的方法.分享给大家供大家参考.具体如下: jQuery hover合成事件,利用合成Hover事件制作折合面板,鼠标Hover上面即可展开面板,与Click不尽相同,此特效代码来自锋利的jQuery一书. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
-
jQuery中多个元素的Hover事件解决方案
1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: 复制代码 代码如下: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求. 不过,有些时候我们希望当鼠标进入两个或多个元素时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件.例如两个元素紧挨着的HTML元素,如下图: 当鼠标进入二者的区域时触发fun1,离开时触发fun2.你也许
-
jquery中取消和绑定hover事件的实现代码
在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑定的事件呢? 一.如何绑定hover事件 先看以下代码,假设我们给a标签绑定一个click和hover事件: $(document).ready(function(){ $('a').bind({ hover: function(e) { // Hover event handler alert("
-
浅谈jQuery hover(over, out)事件函数
hover(over, out)事件函数 当鼠标移动一个匹配的元素上面,会触发指定的第一个函数 当鼠标移出这个元素时,会触发指定的第二个函数 over(function):鼠标移到元素上触发的函数 out(function):鼠标移出元素触发的函数 <nav class="main-nav"> <a href="/"><span>首页</span></a> <a href="/about&q
-
完美解决jQuery的hover事件在IE中不停闪动的问题
在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百度上找了N久,没有找到解决方法.在这里吐槽一下,百度太2了,收录的内容都没什么价值,最后还是在google找到了解决方法,下面就把这个jQuery的hover在IE中会导致不停闪动的解决方法教给大家. $("#category ul").find("li").each(
-
JQuery中使用on方法绑定hover事件实例
文本教你用on方法,模拟hover方法. 代码如下: 复制代码 代码如下: $(obj).on("mouseover mouseout",function(event){ if(event.type == "mouseover"){ //鼠标悬浮 }else if(event.type == "mouseout"){ //鼠标离开 } }) 赶紧去试试吧~
-
使用jquery给新生的th绑定hover事件的实例
这是昨天在做一个动态的table时遇到的一个小问题,table的th需要让鼠标在移入和移出时显示颜色变化,之前th是固定写死的,直接可以用jquery的hover()方法来实现.现在th需要用js/ajax来动态生成加载到页面,用hover()也就没效果了(因为要重新给th绑定mouseover和mouseout事件,而且考虑到可能会有多次加载th等情况,bind也要多次绑定,比较麻烦),在这里我使用了live来解决给新生的th绑定hover事件: 代码如下: $(function(){ //.
-
jQuery hover事件简单实现同时绑定2个方法
本文实例讲述了jQuery hover事件简单实现同时绑定2个方法.分享给大家供大家参考,具体如下: 这里将hover事件同时挂2个方法: 1个是悬停的时候执行的,另外一个是离开的时候执行 代码如下: $(document).ready(function() { $("#orderedlist li").hover( function() {$(this).addClass("blue");}, function() {$(this).removeClass(&qu
-
jQuery的live()方法对hover事件的处理示例
hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个函数. 复制代码 代码如下: $('.myDiv').hover(function() { doSomething... }, function() { doSomething... }); 而问题是有些元素比如菜单是通过AJAX动态加载的,hover方法执行的时候 菜单还没加载出来呢,所以就要用到
随机推荐
- 基于AngularJS实现iOS8自带的计算器
- Access日期与时间函数汇总
- 解锁redis锁的正确姿势
- Linux下把tomcat日志按日期自动分割
- js调用activeX获取u盘序列号的代码
- 用php获取本周,上周,本月,上月,本季度日期的代码
- 在Python的Django框架中包装视图函数
- Android手机获取Mac地址的方法
- 浅谈MySQL存储引擎选择 InnoDB与MyISAM的优缺点分析
- sqlserver数据库主键的生成方式小结(sqlserver,mysql)
- .httacces文件的密码保护和防止盗链的实现方法
- Linux 下C语言获取文件大小
- Bootstrap每天必学之导航
- jQuery ajax全局函数处理session过期后的ajax跳转问题
- jQuery学习笔记之控制页面实现代码
- 完美解决浏览器跨域的几种方法(汇总)
- 一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
- SpringMvc接收参数方法总结(必看篇)
- 使用科汛系统的安全小常识
- jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】