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）多组元素上的动画效果
默认情况下，动画都是同时发生的。
当以回调的形式应用动画方式时，动画是按照回调顺序发生的。
另外，在动画方法中，要注意其他非动画方法会插队，例如css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中。