1、載入DOM
$(document).ready()方法，替代傳統的JavaScript中的window.load()
區別:
1、windows.onload()只可以使用一次，$(document).ready()可以使用多次。
2、windows.onload()在窗體載入完畢後觸發，而$(document).ready()在DOM完全就緒的時候就可以被呼叫
3、簡寫方式$(document).ready()可以簡寫成$(function(){});,還可以簡寫成$().ready(function(){})
2、事件繫結
bind()方法可以用來繫結事件，且可以多次呼叫，格式為:
bind(type[ , data],fn);第一個引數為事件型別，包括：blur、focus、load、resize、click等，也可以自定義。
第二個引數為可選引數，作為event.data屬性值傳遞給事件物件的額外資料物件。
第三個引數用來繫結的處理函式。
$(function(){
$("#body h5.head").bind("click",function(){
$(this).next().show(); //獲取$(this).next()元素
})
});2.1 改變繫結事件的型別
$(function(){
$("#body h5.head").bind("mouseover",function(){
$(this).next().show(); //繫結mouseover事件
}).bind("mouseout",function(){
$(this).next().hide(); //繫結mouseout事件
})
});-
等待DOM裝載完畢。
-
找到#body所在元素，繫結mouseover事件
-
找到內容元素，執行事件
-
找到#body所在元素，繫結mouseout事件
-
找到內容元素，執行事件
簡寫繫結事件的方式
$(function(){
$("#body h5.head").mouseover(function(){
$(this).next().show(); //繫結mouseover事件
}).mouseout(function(){
$(this).next().hide(); //繫結mouseout事件
})
});3. 事件冒泡
事件冒泡
: 這個概念通俗來講，就是頁面上多個元素響應了同一個事件，這些元素有可能是包含、巢狀關係，當事件發生時，會按照元素的巢狀順序從內向外進行執行，直到頂端。
為了解決這些問題，引入以下內容：
3.1 事件物件
在程式中使用事件物件，只需要在函式
$(function(){
$("#element").bind("mouseover",function(event){
//event:事件物件
});當點選element元素時，事件物件被建立，這個物件只有在事件處理函式才可以訪問到，事件處理函式執行完畢後，事件物件就會被銷燬。
3.2 停止事件冒泡
停止事件冒泡可以阻止事件中其他物件的事件處理函式被執行。jQuery提供了stopPropagation()方法來停止事件冒泡。
$(function(){
$("#element").bind("mouseover",function(event){
//event:事件物件
event.stopPropagation();//停止事件冒泡
});3.3 阻止預設行為
網頁上的元素有自己預設的行為，jQuery提供了preventDefault()方法來阻止元素的預設行為。
$(function(){
$("#submit").bind("click",function(event){
//event:事件物件
event.preventDefault();//阻止預設行為（表單提交）
});如果同時想對事件物件停止冒泡和預設行為，可以在事件處理函式中返回false，這是對在事件上同時呼叫stopPrapagation()和preventDefault()方法的一種簡寫形式。
3.4 事件捕獲
與事件冒泡相反的兩個過程，事件捕獲是從最頂端往下開始觸發。但是jQuery目前不支援事件捕獲。
4 事件物件的屬性
-
event.type 獲取到事件的型別
-
event.preventDefault() 阻止事件的預設行為
-
event.stopPropagation() 阻止事件冒泡
-
event.target() 獲取到觸發事件的元素
-
event.relatedTarget 獲取到觸發事件的元素
-
event.pageX和event.pageY 獲取到游標相對頁面的x座標和y座標
-
event.which 在滑鼠點選事件中獲取滑鼠的左1、中2、右3鍵，和鍵盤的按鍵
-
event.metaKey 為鍵盤事件中獲取ctrl按鍵
5 移除事件
5.1 移除按鈕元素上以前註冊的事件
$("#submit").unbind();//刪除所有繫結事件
$("#submit").unbind("click");//刪除click事件如果沒有引數，則移除所有的繫結事件，若提供事件型別引數，則只刪除該型別的繫結事件。
5.2 one()方法
jQuery提供的one()方法，可以為元素繫結處理函式，當函式觸發一次後，立即被刪除。即在每個物件上，事件處理函式只會被執行一次。
6 模擬操作
模擬操作
: 模擬使用者操作的方式，觸發類似於click型別的事件。
$("#submit").trigger("click");//模擬click事件有時候trigger()方法執行後，會執行瀏覽器預設行為，例如：
$("input").trigger("focus");
//不僅會觸發繫結的focus事件，也會使input本身得到焦點若只想觸發繫結的focus事件，而不想執行瀏覽器預設操作，可以使用另一個類似的方法triggerHandler("focus")
7 事件其他用法
7.1 繫結多個事件型別
$("input").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});7.2 新增事件名稱空間，便於管理
$("div").bind("mouseover.plugin mouseout",function(){
$(this).toggleClass("over");
});
$("div").bind("click.plugin",function(){
$(this).toggleClass("over");
});
$("div").bind("dbclick.plugin",function(){
$(this).toggleClass("over");
});
$("button").click(){
$("div").unbind(".plugin");
});
在繫結事件型別後面新增名稱空間，這在刪除事件時只需要置頂名稱空間即可。
7.3相同事件名稱，不同名稱空間執行方法
可以為元素繫結相同的事件型別，然後以名稱空間的不同按需呼叫。
$("div").bind("click",function(){
$(this).toggleClass("over");
});
$("div").bind("click.plugin",function(){
$(this).toggleClass("over");
});
$("button").click(){
$("div").trigger("click!");
//帶！號，匹配所有不包含在名稱空間中的click方法
});
$("div").bind("click.plugin",function(){
$("div").trigger("click");
//去掉！，兩者都會被觸發
});