1. 在頁面加載后執行任務

??? 1.1 代碼執行的時機選擇

????????? $('document').ready() 指頁面的DOM加載完成后執行、并不意味著關聯的文件都下載完畢

????????? window.onload 指頁面上所有元素都加載完成后執行

??? 1.2 基于一個頁面執行多個腳本

????????? $('document').ready() 可以向內部的行為隊列中添加函數、并按照添加的次序執行

????1.3 縮短代碼的簡寫方式：$()函數

????????? 1) 當不傳遞參數給它時、默認傳遞了document參數

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

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

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

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

??????????????? 簡寫成

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

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

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

?????????? 2) 當傳遞另一個函數作為參數時、$()會隱含對.ready()調用一次

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

?????????????? 上面的代碼可簡寫成：

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

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

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

2. 簡單的事件：jQuery將DOM元素與事件綁定分離

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

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

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

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

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

?????????????????????? 該方法表示為this引用的相應元素創建一個jQuery對象。

??? 2.3 removeClass('參數')：當參數省略時表示移除所有的類。

??? 2.4 簡寫的事件：

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

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

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

????????? })

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

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

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

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

3. 復合事件

??? jQuery中的多數事件處理方法都會直接響應JavaScript的本地方法、如click方法。

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

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

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

????????? 1)說明：該方法接受兩個函數作為參數，第一次在元素上單擊調用第一個函數，第二次第二個，

????????????????????? 以后交替執行。

????????? 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)說明：該方法接收連個函數參數，第一個在鼠標進入元素時執行，第二個

????????????????????? 在鼠標離開元素時執行。

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

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

?????3.3 事件的旅程

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

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

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

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

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

??????????????因此，我們總是可以假定最具體的元素首先獲得響應事件的機會。

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

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

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

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

?????????????????? A)事件對象：是一種js的結構，它會在元素獲得處理事件的機會時被傳遞給相應的事件處理程序。

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

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

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

?????????????????? 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)默認操作：像錨元素有默認的鏈接操作，這些操作不屬于事件傳播。要阻止默認操作需使用

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

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

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

?????????????????? 和默認操作，可以在事件處理程序中返回false，這是對在事件對象上同時調用.stopPropagation()和

???????????????????.preventDefault()的一種簡寫方式。

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

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

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

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

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

???

???

jQuery事件