QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com

我是如何去了解jquery的(四),切换事件hover&toggle

我是如何去了解jquery的(四),切换事件hover&toggle

作者:田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

 我用两篇文章的时间讲述了如何利用jquery去查询找到dom节点,现在又要用两篇文章的时间来说明jquery的事件驱动,在上一篇里已经明确说明了这一点,包括js里最常用到的点击click事件的使用,诸如其他事件,都是和click类似的处理。如表单事件submit,写时$("form").submit(/*fuc*/);又如键盘事件keydown,$("div").keydown(/*fuc*/);还有鼠标的mouveover(鼠标移入对象时触发),所以,这节就没有必要再次去说明这些常用事件了,这节我们要讲的是事件的切换hover|toggle。

 本文案例及源码请点击 这里

 先来看API里对于hover(over/*function*/,out/*function*/)的说明:

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

 它的人类语言说法就是,当鼠标移入一个对象时,它会触发一个方法,移出时又会触发另一个方法,说白了,就是onmouseover和onmouseout的结合体,也就是一个节点上同时绑定了这两个事件。

好,我们用它来完成一个功能来说明它的用法,比如上前一节里,页面上有一个表格式形式的数据,由于数据量较大,或许我们需要在鼠标移上去时,让该行的背景色变深,这样更能够集中注意力,然后鼠标移去这一行时,我们需要把背景色还原,代码如下:

js:
$(".list tr").hover(function(){
   $(this).css("backgroundColor","blue");
},function(){
   $(this).css("backgroundColor","#fff");        
});

这样写很好理解是吧,不过有个问题是如果原来table就有背景色的话,这样写会把原有的背景色变成白色,假设我们还是让奇偶数行的颜色不一样

$(".list tr:even").css("backgroundColor","#ddddee");
$(".list tr:odd").css("backgroundColor","#999");

那我要怎么做才能移进去有色,移出来还原成原来的颜色呢?我们可以使用css里的class,我们建一个class类.brTR

<style>
.brTR
{ background-Color:blue;}
</style>

 然后把刚才的JS改成:

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

结果你一试,发现还是不行,为什么呢,因为你刚才把奇偶行变色时用的是css(),这个设置的是style,又因为style的权重比class要大,所以浏览器会优先使用style的样式,所以刚才的变色还得这样改:

css:
  tr.brTR{background-color:blue;}
  .odd{background-color:#999;}
  .even{background-color:#ddddee;}

JS:
    $(".list tr:even").addClass("event");
    $(".list tr:odd").addClass("odd");

这里我把brTR改成了tr.brTR,这样是为了提升这个class的权重,不然的话它的权重和.odd是一样的,而.odd是在后面,所以还是只会显示.odd或.even的背景.在CSS权重中,一般情况是style>ID>class>div,如果是同等级的话,越详细权重就越大,这个如果你有兴趣可以查阅相关资料。

我们发现这种写法是简便了许多,但还是觉得有点重复,因为在移入和移出事件中,都是添加删除相同的class,jquery有没有更简便的方法呢,答案是肯定地,在jquery还有一个toggleClass,就是针对这种状态在两种之间切换的样式而出的。它的作用是如果有该class就移除,没有就添加。所以上面的代码还可以继续简化为:

$(".list tr").hover(function(){        
    $(this).toggleClass("brTR");
});

 我们甚至连第二个函数都省略掉了,只有这一行就可以完成,鼠标移动变色还原的效果了,在省略第二个参数out/*function*/时,它默认会在out时继续调用第一个参数,所以toggleClass也是有它的用武之地的。

又有需求了,我想查看多个行的数据,这样方便对比,我希望它们保持不同的背景色,比如一级用红色,二级用绿色,三级用黄色等。好,那我们就要引入下一个jquery切换事件了toggle, 它的说明是:每次点击都依次调用参数函数。所以这个功能很简单,可以这样做:

$(".list tr").toggle(function(){       
   $(this).css("backgroundColor","red");
},function(){
   $(this).css("backgroundColor","green");
},function(){ 
   $(this).css("backgroundColor","yellow");
});

这样你就可以完成多个状态间的切换了,toggle做的就是click事件,它就是把多个click按顺序来一次性执行。正因为它可以切换click事件,所以我们最常用的点击显示隐藏功能就可以用它来完成了。比如我们有个广告浮动条,想点击之后关闭,然后再有个还原点击,应该怎么做呢,考虑30秒。

好了,30秒到了,请看下面的代码片断:

html:
<p class="ad">
<a class="close">关闭</a>
<img src="index.jpg" width="50px"/>
</p>

js:
$(".ad a.close").toggle(function(){
        $(".ad img").hide();
$(this).html("还原");
    },function(){$(".ad img").show();$(this).html("关闭");});

好,今天就到这里了,大家可以多试用下这两个切换方法,比如常用的导航菜单,模拟复选框等。如果你有任何的疑问都不要问我,请重复再重复阅读本文。或加入我的Q群70210212进行讨论。

 本文案例及源码请点击这里

posted @ 2011-11-14 12:41 田想兵 阅读(...) 评论(...) 编辑 收藏
联系QQ:55342775,QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com