第1章 WEB前端开发工程师-jQuery框架 1-18：jQuery复合事件

                                                        jQuery复合事件

 

本节课所讲内容：

1. jQuery复合事件

                                                                            主讲教师：Head老师

一． 复合事件

jQuery 提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功

能、智能加载等。

外部插入节点方法

方法名	描述
ready(fn)	当 DOM 加载完毕触发事件
hover([fn1,]fn2)	当鼠标移入触发第一个 fn1，移出触发 fn2
toggle(fn1,fn2[,fn3..])	低版本已废弃，当鼠标点击触发 fn1,再点击触发 fn2...

//背景移入移出切换效果

$('div').hover(function () {

$(this).css('background', 'black'); //mouseenter 效果

}, function () {

$(this).css('background', 'red'); //mouseleave 效果，可省略

});

注意：.hover()方法是结合了.mouseenter()方法和.mouseleva()方法，并非.mouseover()

和.mouseout()方法。

.toggle()这个方法比较特殊，这个方法有两层含义，第一层含义就是已经被 1.8 版废用、

1.9 版删除掉的用法，也就是点击切换复合事件的用法。第二层函数将会在动画那章讲解到。

既然废弃掉了，就不应该使用。被删除的原因是：以减少混乱和提高潜在的模块化程度。

但你又非常想用这个方法，并且不想自己编写类似的功能，可以下载 jquery-migrate.js

文件，来向下兼容已被删除掉的方法。

//背景点击切换效果(1.9 版删除掉了)

<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>

$('div').toggle(function () { //第一次点击切换

$(this).css('background', 'black');

}, function () { //第二次点击切换

$(this).css('background', 'blue');

}, function () { //第三次点击切换

$(this).css('background', 'red');

});

注意：由于官方已经删除掉这个方法，所以也是不推荐使用的，如果在不基于向下兼容

的插件 JS。我们可以自己实现这个功能。

var flag = 1; //计数器

$('div').click(function () {

if (flag == 1) { //第一次点击

$(this).css('background', 'black');

flag = 2;

} else if (flag == 2) { //第二次点击

$(this).css('background', 'blue');

flag = 3

} else if (flag == 3) { //第三次点击

$(this).css('background', 'red');

flag = 1

}

});