第4章 jQuery中的事件和动画

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

4.1 jQuery中的事件

4.1.1 加载DOM

jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的。

1.执行时机

$(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行，JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。

若要当页面元素加载完后才进行方法调用，可以使用jQuery中另一个关于页面加载的方法—load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容(包括窗口、框架、对象和图像等加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。如：

2.多次使用

JavaScript的onIaod事件一次只能保存对一个函数的引用，它会自动用后面的函数搜盖前面的函数，因此不能在现有的行为上添加新的行为。

而jQuery的$(document).ready()方法能够很好地处理这些情况，每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。例如如下 jQuery代码:

会先弹出字符串“one”对话框，然后弹出字符串“two”对话框。

3.简写方式

可简写为：

另外，$(docurnent)也可以简写为$()。当$()不带参数时，默认参数就是”document”，因此可以简写为:

4.1.2 事件绑定

在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为:

Note

可以发现，jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了“on”。例如鼠标单击事件在jQuery中对应的是click事件，而在JavaScript中对应的是onclick()函教。

简写绑定事件

像click，mouseover和mouseout这类事件，在程序中经常会使用到，jQuery为此也提供了一套简写的方法。简写方法和bind[)方法的使用类似，实现的效果也相同，惟一的区别是能够减少代码量。

4.1.3 合成事件

jQuery有两个合成事件——hover（）方法和toggle（）方法。

1.hover()方法

语法结构为：

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

语法结构为：

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

4.1.4 事件冒泡

1.什么是冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时<body>元素上也绑定了click事件。

只单击内部<span>元素，就会触发外部<div>元素和<body>元素上绑定的click事件。这是由事件冒泡引起的。

之所以称为冒泡，是因为事件会按照DoM的层次结构像水泡一样不断向上直至顶端，如下图：

2.事件冒泡引发的问题

事件对象

在程序中使用事件对象非常简单，只需要为函数添加一个参数，jQuery代码如下:

这样，当单击“element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。

停止事件冒泡

停止事件冒泡以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡泡。

阻止默认行为

网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。

在jQuery中，提供了preventDefault()方法来阻止元素的默认行为。如当输入值不合法时，阻止表单提交：

事件捕获

事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。

还是冒泡事件的例子，其中元素的click事件会按照以下顺序捕获：

Note:

停止事件冒泡stopPrapagation()方法和阻止默认行为preventDefault()方法有种简写方式：

或者

改写为：

4.1.5 事件对象的属性

（1）event.type()方法

该方法的作用是可以获取到事件的类型。如“click”。

（2）event.preventDefault()方法

该方法的作用是阻止默认的事件行为。

（3）event.stopPropagation()方法

该方法的作用是阻止事件的冒泡。

（4）event.target()方法

该方法的作用是获取到触发事件的元素。

（5）event.pageX()/event.pageY()

该方法的作用是获取到光标相对于页面的x坐标和y坐标。

（6）event.which()方法

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键; 在键盘事件中获取键盘的按键。

（7）event.metaKey()方法

该方法为键盘事件中获取ctrl按键。

4.1.6 移除事件

1.移除按钮元素上以前注册的事件

如当点击id为delAll的元素时，移除id为btn的元素的click事件，jQuery代码为：

unbind()方法结构：

第1个参数是事件类型，第2个参数是将要移除的函数，具体说明如下。

（1）如果没有参数，则删除所有绑定的事件。

（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件。

（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。(看见下面的例子)
2.移除<button>元素的其中一个事件

当单击“删除第二个事件”按钮后，再次单击“点击我”按钮，显示下图效果：

另外，对于只需要触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写方法——one()方法。one()方法可以为元素绑定处理函数。当处理函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。

4.1.7 模拟操作

trigger(type, [,data])

1.常用模拟

以上的例子都是用户必须通过单击按钮，才能触发click事件，但是有时，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。

在jQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。当页面装载完毕后，就会立刻输出想要的效果:

也可以直接用简化写法click()，来达到同样的效果:

2.触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件，jQuery代码如下:

想要触发这个事件，可以使用以下代码来实现:
3.传递数据

下面是一个传递数据的例子:
4.执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。例如:

以上代码不仪会触发为<input>元素绑定的focus事件，也会使<input>元素本身得到焦点(这是浏览器的默认操作)。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法—triggerHandler()方法。

文本框只触发绑定的focus事件，不会得到焦点。

4.1.8 其他用法

1.绑定多个事件类型

等同于：
2.添加事件命名空间，便于管理

例如可以把为元素绑定的多个事件类型用命名空间规范起来，jQuery代码如下：
3.相同事件名称，不同命名空间执行方法

例如可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用 jQuery代码如下：

当单击 div 元索后，会同时触发click事件和click.plugin事件。如果只是单机button元素，则只触发click事件，而不触发click.plugin事件。注意，trigger(“click!)后面的感叹号的作用是匹配所有不包含在命名空间中的click方法。

4.2 jQuery中的动画

4.2.1 show()方法和hide()方法

1.show()方法和hide()方法

$("element").hide(); 效果等同于 element.css("display","none");

$("element").show()
2.show()方法和hide()方法让元素动起来

元素慢慢地显示出来，可以为show()方法指定一个速度参数，例如，指定一个速度关键字“slow”。jQuery代码如下:

$("element").show("slow"); 或者指定时间(毫秒) $("element").show(1000);

hide()方法与之类似。
Note

有参数时如show(600)或hide(600)，会同时影响“内容”的高度、宽度和不透明度。若只想影响其中某个维度，则使用下面介绍的方法。

4.2.2 fadeIn()方法和fadeout()方法

与show[)方法不相同的是，fadeln()方法和fadeOut()方法只改变元素的不透明度。

4.2.3 slideUp()方法和slideDown()方法

这两个方法只会改变元素的高度。

>
Note:
jQuery中的任何动画效果，都可以指定3种速度参数，即“slow”、”normal”和”fast” (‘时间长度分别是0.6秒、0.4秒和0.2秒)。当使用速度关键字时要加引号，例如show(“slow”),如果用数字作为时间参数时就不需要加引号，例如show(1000).

4.2.4 自定义动画方法animate()

其语法结构为:

参数说明如下：
( 1 ) params: 一个包含样式属性及值的映射，比如{property1 :”value 1” ， property2:”value2”, ..}。
( 2 ) speed: 速度参数，可选。
( 3 ) callback: 在动画完成时执行的函数，可选。

1.自定义简单动画

例如，使得id为panel的元素在点击是横向移动：
2.累加、累减动画

如果在500px之前加上“+=”或者“-=”符号即表示在当前位置累加或者累减。代码如下:
3.多重动画

（1）同时执行多个动画

例如在元素向右滑动的同时，放大元素的高度。

（2）按顺序执行多个动画（以下是链式写法）
4.综合动画

使用链式方式对多个动画进行排队。

4.2.5 动画回调函数

如集想在最后动画中改变元素的CSS样式，直接将css()方法附加在动画后面，并不能达到预期效果。出现这个问题的原因是css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。代码如下:

4.2.6 停止动画和判断是否处于动画状态

1.停止元素的动画

很多时候需要停止匹配元素正在进行的动画，例如上例的动画，如果需要在某处停止动画，需要使用stop()方法。stop()方法的语法结构为:

参数cIearQueue和gotoEnd都是可选的参数，为Boolean值(ture或 false) 。

（1）clearQueue代表是否要清空未执行完的动画队列；

（2）gotoEnd代表是否直接将正在执行的动画跳转到末状态，通常用于后一个动画需要基于前个动画的末状态的情况，可以通过stop(false,true)这种方式来让当前动画直接到达末状态；

（3）若没有参数，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。

Note:

注意，jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。

2.判断元素是否处于动画状态

在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。户快速在某个元素上执行animate()动画时，就会出现动画积累。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。代码如下:

4.2.7 其他动画方法

除了上面提到的动画方法，jQuery中还有3个专门用于交互的动画方法。

.toggle( speed, [callback])。

.slideToggle( speed, [callback])。

.fadeTo( speed, opacity, [callback])。

1.toggle()方法

toggle()方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的;如果元素是隐藏的，则切换为可见的。

相当于：
2.slideToggle()方法

slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。

相当于：
3.fadeTo()方法

fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。

4.2.8 动画方法概括

1.改变样式属性
2.动画队列

（1）一组元素上的动画效果

当在一个animate()方法中应用多个属性时，动画是同时发生的.

当以链式的写法应用动画方法时，动画是按照顺序发生的。

（2）多组元素上的动画效果

默认情况下，动画都是同时发生的。

当以回调的形式应用动画方式时，动画是按照回调顺序发生的。