ajax hover,jQuery / 使用hover()和toggle()切换事件 - 汇智网

切换事件

在jQuery中提供了hover()和toggle()这两个方法用于事件的切换。所谓的切换事件，就是有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。

hover()方法：

hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切换效果。

语法形式：$(selector).hover(over，out);

over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。

toggle()方法：

toggle()方法toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

语法形式：$(selector).toggle(fun1(),fun2(),funN(),...)

注意：toggle()方法在1.9.0之后的版本是不支持的。

也可用于切换被选元素的 hide() 与 show() 方法。

语法形式：$(selector).toggle(speed,callback)

speed参数可选，作用是规定hide/show效果的速度；callback()参数可选，当toggle()方法完成是执行的函数。

示例如下：

$(function(){ // hover()方法的使用

$("div").hover(

function(){

$(this).append(":爆装备");

},

function(){

$("b").remove();

}

);

})

$(function(){//给div改变背景颜色

$("#btn").toggle(

function(){

$("div").css("background-color","green");

},

function(){

$("div").css("background-color","red");

},

function(){

$("div").css("background-color","yellow");

}

);

})

$(function(){//显示和隐藏div

$("#btn").click(function(){

$("div").toggle(1000);

});

})

...省略代码

切换事件

打土豪

鼠标移上去看看

任务：把上面jQuery中的操作分别在代码框中重现。