参考锋利的jQuery第二版
1.加载DOM
（1）执行时机
若想为某个DOM元素绑定事件（或者是其他操作），这需要文档加载完成后才能进行绑定（或其他操作），否则会报错。所以对于这种情况，javascript提供了，window.onload方法；而jQuery提供了，$(document).ready()（简写为$()）方法。
虽然这两个方法有类似的功能，但是执行的时机方面还是有区别的。Window.onload方法是在网页所有的元素（包括元素的所有关联文件）完全加载到浏览器后才能执行，即javascript此时才能访问页面中的任何元素。而通过jQuery的$(document).ready()方法注册事件处理程序，在DOM完全就绪时就可以调用，此时网页的所有元素对于jQuery来说都是可以访问的，但这并不意味着这些元素关联文件已经下载完成。
例如有一个大型的图片库，为网页中的图片添加某些行为（点击图片显示和隐藏切换），如果使用window.onload方法，那么需要等到每一张图片都加载完成后才能进行操作。如果使用jQuery的$(document).ready方法，则只需要DOM加载就绪就可以进行操作，无需等待所有图片都加载完毕。
虽然使用使用jQuery的$(document).ready方法能提供效率，但是有时候我们需要等待资源完全加载完成后在进行操作，这时jQuery提供了$(window).load()方法，这等价于原生javascript的window.onload方法。
（2）多次使用
Window.onload方法不能编写多个，如果存在多个，那么最后一个会覆盖前面的，代码如下：
Function one(){
Alert(“one”);
}
Function two(){
Alert(“two”);
}
Window.onload=one;
Window.onload=two;
这里只会弹出“two”对话框。
$(document).ready()方法能多次使用，每次调用$(document).ready()时，都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。
$(document).ready(function(){
one();
});
$(document).ready(function(){
two();
});
这里会先弹出“one”对话框，然后弹出“two”对话框。
2.事件绑定
bind( type [,data] ,fn) type:事件类型；data可选参数，作为event.data属性值传递给事件对象的额外数据对象；fn事件处理函数。它和ready方法一样，可以多次调用。
3.合成事件
jQuery有两个合成事件，分别是hover()方法和toggle()方法。
hover()方法的语法结构为：
hover(enter ,leave) 第一个函数(enter)，当光标移动到元素上面时触发；第二个函数（leave），当光标离开元素时触发。
toggle()方法语法结构：
toggle(fn1 ,fn2 ,fn3 ,....... ,fnn)该方法用于模拟鼠标连续点击事件。第一次点击元素时，触发fn1；第二次点击该元素时，触发fn2,；如果有更多函数，则依次调用，直到最后一个。之后每次点击都会对这几个函数轮番调用。
4.事件冒泡
说到事件冒泡，不得不先说同心圆的问题。说白了，就是说一个页面上面有n个同心圆，如果点击最里面的那个圆，那么实际上是点击了所有的圆。若是为每一个圆绑定了click事件，那么根据事件冒泡机制，就会依次触发所有的事件。如下图：
会依次触发click1，click2，click3，click4.等等。如果想要只触发当前点击元素的事件，则需要阻止事件冒泡行为（event.stopPropagation()）。
4.默认事件
网页中的元素也有自己的默认行为，如单击超链接后会跳转，点击提交按钮后表单会被提交。有时候我们并不希望触发这些默认的行为，这是jQuery提供了event.preventDefault()方法类阻止元素的默认行为。(还可以通过return false来阻止默认事件和事件冒泡，推荐用这个)。
5.事件对象属性
|
event.type |
获取事件的类型 |
|
event.preventDefault() |
阻止默认事件 |
|
event.stopPropagation() |
阻止事件冒泡 |
|
event.target |
获取触发的元素 |
|
event.pageX,event.pageY |
分别表示页面的x、y坐标。当时IE浏览器是为event.x/event.y,FireFox下为event.pageX/event.pageY。通过jQuery封装统一为event.pageX,event.pageY。 |
|
event.which |
在鼠标的点击事件中，获取鼠标的左、中、右键。 1-左键 2-中键 3-右键 |
|
event.metaKey |
针对不同浏览器对键盘的ctrl键解释不同，jQuery进行封装，并规定event.metaKey为键盘事件中获取ctrl按键。 |
6.移除事件
unbind(type [,data]),type为参数类型，data为绑定的事件处理函数。
（1）当没有参数是，则删除所有绑定的事件；
（2）当只穿事件类型（type）参数时，则只删除该类型的绑定事件；
（3）如果来那个参数都传，则只会删除该事件类型下所绑定的对于事件处理函数；
7.模拟操作
(1)常用模拟
在jQuery中通过trigger方法来完成模拟操作。
如下是触发id为btn的按钮的click事件：
$(“#btn”).trigger(“click”);
(2)触发自定义事件
该方法还可以触发自定义名称的事件，如：
$(“#btn”).bind(“myClick”,function(){
alert(“hello wrod”);
})
$(“#btn”).trigger(“myClick”);
(3)传递数值
trigger(type [,data]),type触发事件的类型，传递给事件处理函数的附加函数，以数组的形式传递。如下代码：
$(“#btn”).bind(“myClick”,function(evant, messagel1,messagel2){
alert(messagel1+messagel2);
})
$(“#btn”).trigger(“myClick”,[“hello”,”Eric”]); //alert出 helloEric;
(4)执行默认操作
trigger()方法触发事件后，会执行浏览器默认的操作。
如： $(“input”).trigger(“focus”);
以上代码不仅会触发绑定在input元素上的focus事件，还会使得元素本身获取焦点（浏览器默认操作）。
如果只想触发绑定的focus事件，不想执行浏览器默认的操作，可以是有jQuery的另外一个方法——triggerHandler()方法。
$(“input”).triggerHandler(“focus”)，这样仅仅会触发绑定的focus事件，如何执行浏览器默认的操作。
8.事件委托
Html代码如下：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
若想为上面的li绑定click事件处理程序，并且希望后续添加的li元素也具有该事件，这时我们可以考虑使用事件委托的方式实现，这样不仅书写方便，性能方面也大大提高。
用delegate方法
$("ul").delegate("li","click",function(){/*显示更多信息*/});
也可以使用on方法
$("ul").on("click","li",function(){/*显示更多信息*/});
9.其他用法
(1)可以绑定多个事件类型：
如下代码：
$(“#myDiv”).bind(“mouseover mouseout”,function(){
//执行代码
});
(2)可以为事件添加命名空间，便于管理
如下代码：
$(“#myDiv”).bind(“click.plugin”,function(){
//执行代码
});
$(“#myDiv”).bind(“mouseover.plugin” mouseout”,function(){
//执行代码
});
$(“#myDiv”).bind(“dbclickmouseout”,function(){
//执行代码
});
//移除命名空间为“plugin”的事件，即移除click和mouseover事件
$(“#myDiv”).unbind(“.plugint”);
(3)相同事件名称，不同命名空间执行方法
$(“#myDiv”).trigger(“click!”);//触发所有不包含在命名空间的click方法。