1. 在頁(yè)面加載后執(zhí)行任務(wù)

??? 1.1 代碼執(zhí)行的時(shí)機(jī)選擇

????????? $('document').ready() 指頁(yè)面的DOM加載完成后執(zhí)行、并不意味著關(guān)聯(lián)的文件都下載完畢

????????? window.onload 指頁(yè)面上所有元素都加載完成后執(zhí)行

??? 1.2 基于一個(gè)頁(yè)面執(zhí)行多個(gè)腳本

????????? $('document').ready() 可以向內(nèi)部的行為隊(duì)列中添加函數(shù)、并按照添加的次序執(zhí)行

????1.3 縮短代碼的簡(jiǎn)寫(xiě)方式：$()函數(shù)

????????? 1) 當(dāng)不傳遞參數(shù)給它時(shí)、默認(rèn)傳遞了document參數(shù)

?????????????? 示例：

????????????????$(document).ready(function(){

?????????????????? //todo;

??????????????? });

??????????????? 簡(jiǎn)寫(xiě)成

??????????????? $().ready(function(){

?????????????????? //todo;

??????????????? });

?????????? 2) 當(dāng)傳遞另一個(gè)函數(shù)作為參數(shù)時(shí)、$()會(huì)隱含對(duì).ready()調(diào)用一次

?????????????? 示例：

?????????????? 上面的代碼可簡(jiǎn)寫(xiě)成：

???????????????$(function(){

???????????????? //todo;

???????????????});

2. 簡(jiǎn)單的事件：jQuery將DOM元素與事件綁定分離

??? 2.1?bind('事件',函數(shù)); 為元素事件綁定函數(shù)。

????????? $('#switch-large').bind('click', function(){

???????????? //todo;

????????? });?

??? 2.2 $(this)：this引用的是DOM元素而不是jQuery對(duì)象。

?????????????????????? 該方法表示為this引用的相應(yīng)元素創(chuàng)建一個(gè)jQuery對(duì)象。

??? 2.3 removeClass('參數(shù)')：當(dāng)參數(shù)省略時(shí)表示移除所有的類。

??? 2.4 簡(jiǎn)寫(xiě)的事件：

????????? 示例：

????????? .bind('click',function(){

??????????? //todo

????????? })

??????????等同于

????????? .click(function(){

??????????? //todo

??????????})

3. 復(fù)合事件

??? jQuery中的多數(shù)事件處理方法都會(huì)直接響應(yīng)JavaScript的本地方法、如click方法。

??? 但是也有少數(shù)處于跨瀏覽器優(yōu)化和方便性考慮而添加的自定義處理程序。如.ready();

??? .toggle();.hover();他們被稱為復(fù)合事件。

??? 3.1 .toggle(arg1 arg2)方法

????????? 1)說(shuō)明：該方法接受兩個(gè)函數(shù)作為參數(shù)，第一次在元素上單擊調(diào)用第一個(gè)函數(shù)，第二次第二個(gè)，

????????????????????? 以后交替執(zhí)行。

????????? 2)可使用.toggleClass('className')代替。

????????? 3)示例：

?????????????$(document).ready(

??????????????? function(){

?????????????????? $('#switcher h3').toggle(
??????????????????????function(){
?????????????????????????$('#switcher .button').addClass('hidden');
??????????????????????},
????????????????????? function(){
?????????????????????????$('#switcher .button').removeClass('hidden');??
??????????????????????});
???????????????? });

?????????????? 可替換為

????????????? $(document).ready(
???????????????? ?function(){
???????????????????? $('#switcher h3').bind('click',
??????????????????????? function(){
???????????????????????????$('#switcher .button').toggleClass('hidden');
?????????????????????????});
???????????????? ?});

????3.2 .hover(arg1,arg2)方法

??????????1)說(shuō)明：該方法接收連個(gè)函數(shù)參數(shù)，第一個(gè)在鼠標(biāo)進(jìn)入元素時(shí)執(zhí)行，第二個(gè)

????????????????????? 在鼠標(biāo)離開(kāi)元素時(shí)執(zhí)行。

??????????2)示例：

???????????? $(document).ready(
??????????????? function(){
?????????????????? $('#switcher .button').hover(
?????????????????????? function(){
????????????????????????? $(this).addClass('hover');??
???????????????????????},
?????????????????????? function(){
????????????????????????? $(this).removeClass('hover');
???????????????????????}
?????????????????? );
??????????????? }
??????????????);

?????3.3 事件的旅程

?????????? 1)事件捕獲(Netscape)

?????????????

???????????2)事件冒泡(Microsoft)

?????????????

?????????? 3)為了跨瀏覽器的一致性，jQuery始終會(huì)在模型的冒泡階段注冊(cè)事件處理程序

??????????????因此，我們總是可以假定最具體的元素首先獲得響應(yīng)事件的機(jī)會(huì)。

?????????? 4)事件冒泡的副作用：子元素的行為傳播給了父元素。

???? 3.4 限制和終止事件：從時(shí)間(阻止事件在某個(gè)時(shí)間發(fā)送)和空間(阻止事件被傳播到某些元素)上限制

?????????? 1)阻止事件冒泡

??????????????(1)指定事件目標(biāo)（空間）

?????????????????? A)事件對(duì)象：是一種js的結(jié)構(gòu)，它會(huì)在元素獲得處理事件的機(jī)會(huì)時(shí)被傳遞給相應(yīng)的事件處理程序。

?????????????????? B)示例：

????????????????????? $(document).ready(
????????????????????? ?? function(){
??????????????????????????? $('#switcher').click(
?????????????????????????????? function(event){
????????????????????????????????? if(event.target==this){
??????????????????????????????????? $('#switcher .button').toggleClass('hidden');
????????????????????????????????? }
???????????????????????? });
???????????????????? });

????????????? (2)停止事件傳播（時(shí)間）

?????????????????? A) .stopPropagation()方法：該方法可以完全阻止事件冒泡

?????????????????? B)示例：

????????????????????? $(document).ready(
??????????????????????????function(){
???????????????????????????? $('#switcher .button').click(
?????????????????????????????? ?function(event){
????????????????????????????????? ?$('body').removeClass();
????????????????????????????????????? if(this.id=='switcher-narrow'){
?????????????????????????????????????? ?$('body').addClass('narrow');
????????????????????????????????????? }else if(this.id=='switcher-larger'){
????????????????????????????????????????$('body').addClass('large');
????????????????????????????????????? }
?????????????????????????????????? $('#switcher .button').removeClass('selected');
?????????????????????????????????? $(this).addClass('selected');
?????????????????????????????????? event.stopPropagation();
??????????????????????????????? });
?????????????????????????? });

???????????????(3)默認(rèn)操作：像錨元素有默認(rèn)的鏈接操作，這些操作不屬于事件傳播。要阻止默認(rèn)操作需使用

??????????????????????????????????.preventDefault()方法

???????????????(4)事件傳播和默認(rèn)操作

???????????????????他們是相互獨(dú)立的兩套機(jī)制，在二者任何一方發(fā)生時(shí)，都可以終止另一方。如果想要同時(shí)停止事件傳播

?????????????????? 和默認(rèn)操作，可以在事件處理程序中返回false，這是對(duì)在事件對(duì)象上同時(shí)調(diào)用.stopPropagation()和

???????????????????.preventDefault()的一種簡(jiǎn)寫(xiě)方式。

?????????????? (5)移除事件

?????????????????? A) .unbind('event' function) ：移除綁定的函數(shù)

?????????????????? B).one('event' function)?：綁定函數(shù)執(zhí)行一次就移除??

?????????3.5 模擬用戶操作

???????????????.trigger('event')? ：js自己觸發(fā)事件。?????????????????????????
??????????????

???

???

jQuery事件