jQuery 合成事件

jQuery有两个合成事件—— hover() 方法和 toggle() 方法，类似ready() 方法，hover() 方法和 toggle() 方法都属于 jQuery 自定义的方法。

1. hover() 方法

hover() 方法的语法结构为：hover(enter, leave);

hover() 方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数（enter)；当光标移出这个元素时，会触发指定的第2个函数（leave)。

将上面的例子改写成使用hover() 方法，jQuery代码如下：

$(function(){
    $("#panel h5.head").hover(function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();   
    })
})

代码运行后的效果与下面代码运行后的效果是一样的。当光标滑过“标题”链接时，相应的“内容”将被显示；当光标滑出“标题”链接后，相应的“内容”则被隐藏。

$(function(){
    $("#panel h5.head").mouseover(function(){
        $(this).next().show();
    }).mouseout(function(){
        $(this).next().hide();
    })
})

注意:（1) CSS中有伪类选择符，例如“:hover”，当用户光标悬停在元素上时，会改变元素的外观。在大多数符合规范的浏览器中，伪类选择符可以用于任何元素。然而在IE 6浏览器中，伪类选择符仅可用于超链接元素。对于其他元素，可以使用jQuery的 hover() 方法。

(2) hover() 方法准确来说是替代 jQuery 中的 bind("mouseenter") 和 bind("mouseleave")，而不是替代 bind("mouseover") 和 bind("mouseout") 。因此当需要触发 hover() 方法的第2个函数时，需要用 trigger("mouseleave”）来触发，而不是 trigger("mouseout")。

2. toggle() 方法

toggle() 方法的语法结构为：toggle(fn1, fn2, ...fnN);

toggle() 方法用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数（ fn1 ) ; 当再次单击同一元素时，则触发指定的第2个函数（ fn2)；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

在前面的加强效果的例子中，使用了以下 jQuery 代码：

$(function(){
    $("#panel h5.head").bind("click",function(){
        var $content = $(this).next();
        if($content.is(":visible")){
            $content.hide();
        }else{
            $content.show();
        }
    })
})

虽然上面的代码能实现需要的效果，但是选择的方法并不是最适合的。如果需要连续单击“标题”链接，来达到使“内容”隐藏和显示的目的，那么很适合使用 toggle() 方法。代码如下：

$(function(){
    $("#panel h5.head").toggle(function(){
            $(this).next().show();
    },function(){
            $(this).next().hide();
    })
})

通过使用 toggle() 方法不仅实现了同样的效果，同时也简化了代码。

toggle() 方法在 jQuery 中还有另外一个作用：切换元素的可见状态。如果元素是可见的，单击切换后则为隐藏；如果元素是隐藏的，单击切换后则为可见的。因此上面的代码还可以写成如下 jQuery 代码：

$(function(){
    $("#panel h5.head").toggle(function(){
            $(this).next().toggle();
    },function(){
            $(this).next().toggle();
    })
})
// 也可以写成下面的代码
/*$(function(){
    $("#panel h5.head").click(function(){
            $(this).next().toggle();
    })
})*/

3.再次加强效果

为了能有更好的用户体验，现在需要在用户单击“标题”链接后，不仅显示“内容”，而且高亮显示“标题”。为了完成这一功能，首先在CSS中定义一个高亮的样式，CSS代码如下：

.highlight{ background:#FF3300;}

$(function(){
    $("#panel h5.head").toggle(function(){
            $(this).addClass("highlight");
            $(this).next().show();
    },function(){
            $(this).removeClass("highlight");
            $(this).next().hide();
    });
})