jQuery学习笔记— jQuery中的事件和动画

一. jQuery中的事件

1. 加载DOM

在常规的 JavaScript 代码中，通常使用 window.onload 方法，而在 jQuery 中，使用的是$(document).ready()方法。$(document).ready 方法和 window.onload 方法之间的区别：

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

(2) 多次使用：window.onload方法后面添加的函数会自动覆盖前面的函数。每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

(3) 简写方式：

$(function(){

})

$().ready(function(){

})

2. 事件绑定

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

bind(type [,  data],  fn);

第1个参数为事件类型，类型包括：blur，focus，load，resize，scroll，unload，click，dblclick，mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter，mouseleave，change，select，submit，keydown，keypress，keyup和error等，当然也可以是自定义名称。

第2个参数为可选参数。

第3个参数则是用来绑定的处理函数。

注意：jQuery中的事件绑定类型比普通的 JavaScript 事件绑定类型少了“on”。

类似click，mouseover和mouse out这类事件，在程序中会经常用到，jQuery为此也提供了一套简写的方法。

3. 合成事件

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

(1)  hover() 方法：用于模拟光标悬停事件。hover(enter, leave);

(2)  toggle() 方法：toggle(fn1, fn2, … fnN); toggle()方法用于模拟鼠标连续点击事件；toggle() 方法还有另外一个作用，切换元素的可见状态。

4. 事件冒泡

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

网页中的元素有自己的默认行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。在jQuery中，提供了 preventDefault() 方法来阻止元素的默认行为。

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回 false。这是对事件对象上同时调用 stopPropagation() 和 preventDefault() 方法的一种简写。

事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。并非所有的主流浏览器都支持事件捕获，并且这个缺陷无法通过 JavaScript 来修复。

5. 事件对象的属性

(1) event.type: 获取事件的类型

(2) event.preventDefault()方法：阻止默认的事件行为

(3) event.stopPropagation() 方法：阻止事件的冒泡

(4) event.target()：获取到触发事件的元素

(5) event.relatedTarget()：relatedTarget 事件属性返回与事件的目标节点相关的节点。对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。对于其他类型的事件来说，这个属性没有用。

(6) event.pageX 和 event.pageY：获取光标相对于页面的x坐标和y坐标

(7) event.which：鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

(8) event.metaKey：为键盘中获取<ctrl>按键

6. 移除事件

unbind方法可以删除元素的所有某个事件，也可以不传任何参数直接调用unbind()方法，也可以传入function函数来解除绑定

one()方法可以为元素绑定处理函数，处理函数触发一次后，立马会被删除。

7. 模拟操作

在jQuery中，可以使用trigger() 方法完成模拟操作。

trigger() 方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

trigger(type, [data]) 方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发还是用户触发。

trigger() 方法触发事件后，会执行浏览器默认操作。如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用 jQuery 的triggerHandler()方法。

8. 其他用法

在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。

二. jQuery中的动画

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

show() 方法和 hide()方法是 jQuery 中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将元素的 display 样式改为“none”。

当把元素隐藏后，可以使用show() 方法将元素的 display 样式设置为先前的显示样式(block, inline或者其他除了none之外的值)。

show() 方法和 hide() 方法在不带任何参数的情况下，相当于 css(“display”, “none/block/inline”)，作用是立即隐藏或显示匹配的元素，不会有任何动画。如果希望在调用 show() 方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数。

2. fadeIn() 方法和 fadeOut() 方法

与show() 方法不同的是，fadeIn() 方法和 fadeOut() 方法只改变元素的不透明度。fadeOut() 方法会在指定的一段时间内降低元素的不透明度，知道元素完全消失(display:none)。fadeIn()方法则相反。

3. slideUp() 方法和 slideDown() 方法

slideUp() 方法和 slideDown() 方法只会改变元素的高度。

4. 自定义动画方法 animate()

show() 方法和 hide() 方法会同时修改元素的多个样式属性，即高度、宽度和不透明度；fadeOut()方法和 fadeIn() 方法只会修改元素的不透明度；slideDown() 方法和 slideUp()方法只会修改元素的高度。

在jQuery中，可以使用animate()方法来自定义动画。 animate(params, speed, callback)：

(1) params：一个包含样式属性及值的映射

(2) speed：速度参数，可选

(3) callback：在动画完成时执行的函数，可选

多个动画效果，如果写在一个animate函数中，会同时执行多个动画；如果写着多个animate函数，则会按顺序执行多个动画。

5. 动画回调函数

可以使用回调函数(callback)对非动画方法实现排队

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

(1) 停止元素的动画

使用stop()方法来停止动画: stop([clearQueue], [gotoEnd]);

参数clearQueue 和 gotoEnd 都是可选的参数，为 Boolean 值 (true或false)。clearQueue代表是否清空未执行完的动画队列，gotoEnd代表是否直接将在正在执行的动画跳转到末状态。

如果直接使用stop() 方法，则会立即停止当前正在执行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。第1个参数(clearQueue)设置为true，此时程序会把当前元素接下来尚未执行完的动画队列清空。第2个参数(gotoEnd)可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况。

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

在使用animate() 方法的时候，要避免动画积累而导致的动画与用户的行为不一致。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

if (!$(element).is(“:animated”)) { // 判断元素是否正处于动画状态

// 如果当前没有进行动画，则添加新动画

}

(3) 延迟动画

在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用delay()方法。delay() 方法允许我们将队列中的函数延时执行，它既可以推迟动画队列中函数的执行，也可以用于自定义队列。

7. 其他动画方法

(1) toggle() 方法：切换元素的可见状态

(2) slideToggle() 方法：通过高度变化来切换匹配元素的可见性

(3) fadeTo() 方法：可以把元素的不透明度以渐进方式调整到指定的值

(4) fadeToggle() 方法：通过不透明度变化来切换匹配元素的可见性