一、页面载入
ready(fn)
用法：
说明：当DOM载入就绪就可以查询及操纵时绑定一个要执行的函数，最为重要的函数，极大提高了web应用程序响应速度。
Demo：
1 //在DOM加载完成时运行的代码，可以这样写：
2 $(document).ready(function(){
3 // 在这里写你的代码...
4 });
5
6 //简写
7 $(function($) {
8 // 你可以在这里继续使用$作为别名...
9 });
注意：$(function(){}) 与 window.onload = function(){} 区别
1. 执行时机不同：
① jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象后就执行，可能与 DOM 元素关联的东西并没有加载完
② 原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容（如图片，音频视频等）加载完毕后才能执行；
2. 触发的顺序
① jQuery 页面加载完成之后先执行；
② 原生 js 的页面加载完成后执行
3. 执行的次数
① 原生 js 的页面加载完成之后，只会执行最后一次的赋值函数；
② jQuery 的页面加载完成之后是全部把注册的 function 函数，依次按照顺序全部执行；
二、事件处理
1、on(eve,[sel],[data],fn)
用法：
说明：在选择元素上绑定一个或多个事件的事件处理函数，自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）
Demo:
1 //给所有的段落绑定 单击 事件
2 $("p").on("click", function(){
3 alert( $(this).text() );
4 });
5
6 //也可以传递参数给函数赋值
7 function myHandler(event) {
8 alert(event.data.foo);
9 }
10 $("p").on("click", {foo: "bar"}, myHandler)
2、off(eve,[sel],[fn])
语法：
说明：在选择元素上移除一个或多个事件的事件处理函数，自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品
注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数
Demo：
1 // 移除段落上面的所有事件
2 $("p").off()
3
4 //从所有段落中删除所有单击处理函数：
5 $("p").off( "click", "**" )
3、bind(type,[data],fn)
用法：
说明：为每个匹配的元素的特定事件绑定事件处理函数
Demo：
1 //当每个段落被点击时，弹出其文本
2 $("p").bind("click", function(){
3 alert( $(this).text() );
4 });
5
6 //bind多个事件，并判断分别是什么事件
7 $("#areaDiv").bind("mouseover mouseout",function (event) {
8 if (event.type == "mouseover") {
9 console.log("鼠标移入");
10 } else if (event.type == "mouseout") {
11 console.log("鼠标移出");
12 }
13 });
4、one(type,[data],fn)
用法：
说明：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
注意：在每个对象上，这个事件处理函数只会被执行一次，这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为
Demo：
1 //当所有段落被第一次点击的时候，显示所有其文本。
2 $("p").one("click", function(){
3 alert( $(this).text() );
4 });
5、trigger(type,[data])
用法：
说明：在每一个匹配的元素上触发某类事件以及事件的默认行为（比如表单提交）
注意：该方法与 triggerHandler() 方法类似，不同的是 triggerHandler() 不触发事件的默认行为
与 triggerHandler() 方法相比的不同之处：
① 它不会引起事件的（比如表单提交）的默认行为；
② trigger() 会操作 jQuery 对象匹配的所有元素，而 triggerHandler() 只影响第一个匹配元素；
③ 右 triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情
Demo：
1 //提交第一个表单，但不用 submit()
2 $("form:first").trigger("submit")
6、triggerHandle(type,[data])
用法：
说明：该方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡
Demo：
1 //如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。
2
3 //HTML代码
4 <button id="old">.trigger("focus")</button>
5 <button id="new">.triggerHandler("focus")</button><br/><br/>
6 <input type="text" value="To Be Focused"/>
7 //jQuery代码
8 $("#old").click(function(){
9 $("input").trigger("focus");
10 });
11 $("#new").click(function(){
12 $("input").triggerHandler("focus");
13 });
14 $("input").focus(function(){
15 $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
16 });
7、unbind(t,[d | f])
用法：
说明：bind() 的反向操作，从每一个匹配的元素中删除绑定的事件。
参数：① 如果没有参数，则删除所有绑定的事件；
② 如果提供了事件类型作为参数，则只删除该类型的绑定事件;
③ 如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
Demo：
1 //把所有段落的所有事件取消绑定
2 $("p").unbind()
3
4 //将段落的click事件取消绑定
5 $("p").unbind( "click" )
6
7 //删除特定函数的绑定，将函数作为第二个参数传入
8 var foo = function () {
9 // 处理某个事件的代码
10 };
11
12 $("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
13
14 $("p").unbind("click", foo); // ... 再也不会被触发 foo
三、事件委派
1、live(type,[data],fn)
用法：
说明：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
Demo：
1 //HTML代码
2 <body>
3 <div class="clickme">Click here</div>
4 </body>
5
6 //jQuery代码
7 $('.clickme').live('click', function() {
8 alert("Live handler called.");
9 });
10
11 //新增元素，依然能够触发事件处理函数
12 $('body').append('<div class="clickme">Another target</div>');
2、die(type,[fn])
用法：
说明：从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)
参数：① 不带参数，则所有绑定的 live 事件都会被移除
② 提供了 type 参数，那么会移除对应的 live 事件
③ 指定了第二个参数 function，则只移除指定的事件处理函数
Demo：
1 //给按钮解除 click 事件
2 function aClick() {
3 $("div").show().fadeOut("slow");
4 }
5 $("#unbind").click(function () {
6 $("#theone").die("click", aClick)
7 });
3、delegate(s,[t],[d],fn)
用法：
说明：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
注意：使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
Demo：
1 //当点击鼠标时，隐藏或显示 p 元素
2 //HTML代码
3 <div style="background-color:red">
4 <p>这是一个段落。</p>
5 <button>请点击这里</button>
6 </div>
7 //jQuery代码
8 $("div").delegate("button","click",function(){
9 $("p").slideToggle();
10 });
4、undelegate([s,[t],fn])
用法：
说明：删除由 delegate() 方法添加的一个或多个事件处理程序。
Demo：
1 //从p元素删除由 delegate() 方法添加的所有事件处理器 2 $("p").undelegate(); 3 4 //从p元素删除由 delegate() 方法添加的所有click事件处理器 5 $("p").undelegate( "click" )
四、事件切换
1、hover([over,]out)
用法：
说明：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
参数： ① over：鼠标移到元素上要触发的函数；
② out：鼠标移出元素要触发的函数；
Demo：
1 // 鼠标悬停的表格加上特定的类
2 $("td").hover(
3 function () {
4 $(this).addClass("hover");
5 },
6 function () {
7 $(this).removeClass("hover");
8 }
9 );
10
11 //hover()方法通过绑定变量"handlerInOut"来切换方法。
12 $("td").bind("mouseenter mouseleave",handlerInOut);
13 $("td").hover(handlerInOut);
2、toggle([spe],[eas],[fn])
用法：
说明：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
Demo：
1 //对表格切换显示/隐藏
2 $('td).toggle();
3
4 //对表格的切换一个类
5 $("td").toggle(
6 function () {
7 $(this).addClass("selected");
8 },
9 function () {
10 $(this).removeClass("selected");
11 }
12 );
13
14 //用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。
15 $("p").toggle("fast",function(){
16 alert("Animation Done.");
17 });
五、常用事件
1、blur([[data],fn])
用法：
格式： $("p").blur() 触发所有段落的 blur 事件
说明：当元素失去焦点时触发 blur 事件
2、change([[data],fn])
用法：
格式：$(selector).change() 触发被选元素的 change 事件
说明：当元素的值发生改变，并失去焦点时触发该事件。
注意：该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生
3、click([[data],fn])
用法：
格式：$("p").click() 触发页面内所有段落的点击事件
说明：触发每一个匹配元素的单击事件
4、dblclick([[data],fn])
用法：
格式：$("p").dblclick() 触发页面所有段落的双击事件
说明：当双击元素时，会发生 dblclick 事件
5、error([[data],fn])
用法：
说明：当元素遇到错误（没有正确载入）时，发生 error事件
Demo：
1 //隐藏无效的图像
2 $("img").error(function(){
3 $(this).hide();
4 });
6、focus([[data],fn])
用法：
说明：当元素获取焦点时，触发 focus 事件，可以通过鼠标点击或者键盘上的TAB导航触发。
Demo：
1 //当页面加载后将 id 为 'login' 的元素设置焦点
2 $(document).ready(function(){
3 $("#login").focus();
4 });
5
6 //使人无法使用文本框
7 $("input[type=text]").focus(function(){
8 this.blur();
9 });
7、focusin([[data],fn])
用法：
说明：当元素获得焦点时，触发 focusin 事件。focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
Demo：
1 //获得焦点后会触发动画
2 //HTML代码
3 <p><input type="text" /> <span>focusout fire</span></p>
4 <p><input type="password" /> <span>focusout fire</span></p>
5 //jQuery
6 $("p").focusin(function() {
7 $(this).find("span").css('display','inline').fadeOut(1000);
8 });
8、focusout([[data],fn])
用法：
说明：当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，它可以在父元素上检测子元素失去焦点的情况
Demo：
1 //失去焦点后会触发动画
2 //HTML代码
3 <p><input type="text" /> <span>focusout fire</span></p>
4 <p><input type="password" /> <span>focusout fire</span></p>
5 //jQuery代码
6 $("p").focusout(function() {
7 $(this).find("span").css('display','inline').fadeOut(1000);
8 });
9、keydown()
用法：
说明：当键盘或按钮被按下时，发生 keydown 事件。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
Demo：
1 //在页面内对键盘按键做出回应
2 $(window).keydown(function(event){
3 switch(event.keyCode) {
4 // ...
5 // 不同的按键可以做不同的事情
6 // 不同的浏览器的keycode不同
7 // 更多详细信息: http://unixpapa.com/js/key.html
8 // ...
9 }
10 });
10、keypress()
用法：
说明：当键盘或按钮被按下时，发生 keypress 事件。
注意：keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
Demo:
1 //计算在输入域中的按键次数
2 $("input").keydown(function(){
3 $("span").text(i+=1);
4 });
11、keyup()
用法：
说明：当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
注意：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生
Demo：
1 //当按下按键时，改变文本域的颜色
2 $("input").keyup(function(){
3 $("input").css("background-color","#D6D6FF");
4 });
12、mousedown()
用法：
说明：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
注意：mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生
Demo：
1 //当按下鼠标按钮时，隐藏或显示元素
2 $("button").mousedown(function(){
3 $("p").slideToggle();
4 });
13、mouseenter()
用法：
说明：当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用
注意：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
Demo：
1 //当鼠标指针进入（穿过）元素时，改变元素的背景色
2 $("p").mouseenter(function(){
3 $("p").css("background-color","yellow");
4 });
14、mouseleave()
用法：
说明：当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用
注意：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件
Demo：
1 //当鼠标指针离开元素时，改变元素的背景色
2 $("p").mouseleave(function(){
3 $("p").css("background-color","#E9E9E4");
4 });
15、mousemove()
用法：
说明：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
注意：mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标
Demo：
1 //获得鼠标指针在页面中的位置
2 $(document).mousemove(function(e){
3 $("span").text(e.pageX + ", " + e.pageY);
4 });
16、mouseout()
用法：
说明：当鼠标指针从元素上移开时，发生 mouseout 事件，该事件大多数时候会与 mouseover 事件一起使用。
注意：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件
Demo：
1 //当鼠标从元素上移开时，改变元素的背景色
2 $("p").mouseout(function(){
3 $("p").css("background-color","#E9E9E4");
4 });
17、mouseover()
用法：
说明：当鼠标指针位于元素上方时，会发生 mouseover 事件，该事件大多数时候会与 mouseout 事件一起使用
注意：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件
Demo：
1 //当鼠标指针位于元素上方时时，改变元素的背景色
2 $("p").mouseover(function(){
3 $("p").css("background-color","yellow");
4 });
18、mouseup()
用法：
说明：当在元素上放松鼠标按钮时，会发生 mouseup 事件
注意：与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件
Demo：
1 //当松开鼠标按钮时，隐藏或显示元素
2 $("button").mouseup(function(){
3 $("p").slideToggle();
4 });
19、resize()
用法：
说明：当调整浏览器窗口的大小时，发生 resize 事件
Demo：
1 //每次改变页面窗口的大小时很郁闷的方法
2 $(window).resize(function(){
3 alert("Stop it!");
4 });
20、scroll()
用法：
说明：当用户滚动指定的元素时，会发生 scroll 事件
注意：scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
Demo：
1 //当页面滚动条变化时，执行的函数
2 $(window).scroll( function() { /* ...do something... */ } );
3
4 //对元素滚动的次数进行计数
5 $("div").scroll(function() {
6 $("span").text(x+=1);
7 });
21、select()
用法：
说明：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
注意：这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
Demo：
1 //触发所有input元素的select事件
2 $("input").select();
3
4 //当文本框中文本被选中时执行的函数
5 $(":text").select( function () { /* ...do something... */ } );
22、submit()
用法：
说明：当提交表单时，会发生 submit 事件
注意：该事件只适用于表单元素
Demo：
1 //提交第一个表单
2 $("form:first").submit();
3
4 //阻止表单提交
5 $("form").submit( function () {
6 return false;
7 } );
23、unload()
用法：
说明：在当用户离开页面时，会发生 unload 事件。
以下几种情况，会发出 unload 事件：
① 点击某个离开页面的链接
② 在地址栏中输入了新的 URL
③ 使用前进或后退按钮
④ 关闭浏览器
⑤ 重新加载页面
Demo：
1 //页面卸载的时候弹出一个警告框
2 $(window).unload( function () { alert("Bye now!"); } );
六、事件冒泡
1、事件冒泡概述
事件冒泡：父子元素同时监听同一个事件，当触发子元素的事件的时候， 同一个事件也被传递到了父元素的事件里去
响应。 事件会按照 DOM 层次结构像水泡一样不断向上直至顶端。
2、解决方法
① 在子元素事件函数体内，return false；可以阻止事件的冒泡传递；
② 获取事件对象，然后调用 event.stopPropagation() 方法，DOM 中停止事件传播的标准方法