我是如何去了解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进行讨论。

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