1. 事件
1.1 載入DOM
在頁面載入完畢後，瀏覽器會通過JavaScript為DOM元素新增事件。在JavaScript程式碼中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。$(document).ready()方法和window.onload方法有相似的功能，但是在執行時機方面是有區別的。window.onload方法是在網頁中所有的元素完全載入到瀏覽器後才執行，而$(document).ready()方法註冊的事件處理程式，在DOM完成就緒時就可以被呼叫。
由於在$(document).ready()方法內註冊的事件，只要DOM就緒就會被執行，因此可能此時元素的關聯檔案未下載完。要解決這個問題，可以使用jQuery中另一個關於頁面載入的方法load()方法。load()方法會在元素的onload事件中繫結一個處理函式。如果處理函式繫結給window物件，則會在所有內容載入完畢後觸發，例如：
$(window).load(function(){
});
每次呼叫$(document).ready()方法都會在現有的行為上追加新的行為，這些行為函式會根據註冊的順序依次執行。它也可以簡寫為：
$(function(){
});
另外，$(document)也可以簡寫為$()，例如：
$().ready(function(){
});
1.2 事件繫結
在文件裝載完成後，如果要為元素繫結事件來完成某些操作，可以使用bind()方法來對匹配元素進行特定事件的繫結，例如：
bind(type[,data],fn);
第一個引數是事件型別，包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。
第二個引數是可選引數，作為event.data屬性值傳遞給事件物件的額外資料物件。
第三個引數則是用來繫結的處理函式。
例如：
$("#mydiv").bind("click",function(){
$(this).next("div.content").show();
});
與ready()方法一樣，bind()方法也可以多次呼叫。像click、mouseover和mouseout這類事件，在程式中經常用到，jQuery為此也提供了一套簡寫方法，例如：
$("#mydiv").mouseover(function(){
$(this).next("div.content").show();
});
1.3 合成事件
jQuery有兩個合成事件：hover()方法和toggle()方法。hover()方法的語法結構為：
hover(enter,leave);
hover()方法用於模擬游標懸停事件。當游標移動到元素上時，會觸發指定的第一個函式，當游標移出這個元素時，會觸發指定的第二個函式。
toggle(fn1,fn2,...fnN);
toggle()方法用於模擬滑鼠連續單擊事件，第一次單擊元素，觸發指定的第一個函式，當再次單擊同一個元素時，則觸發指定的第2個函式，以此類推，直到最後一個。
1.4 事件冒泡
在頁面上可以有多個事件，也可以多個元素響應同一個事件。由於IE-DOM和標準DOM實現事件物件的方式不同，在不同瀏覽器中獲取事件物件比較困難。jQuery進行了相應的擴充套件和封裝，從而使在任何瀏覽器中都能輕鬆獲取事件物件，例如：
$("element").bind("click",function(event){
});
停止事件冒泡可以阻止事件中其他物件的事件處理函式被執行，在jQuery中提供了stopPropagation()方法來停止事件冒泡，例如：
$("span").bind("click",function(event){
var txt = $("#msg").html() + "<p>click!</p>";
$("#msg").html(txt);
event.stopPropagation();
});
網頁中的元素有自己預設的行為，例如單擊超連結後會跳轉等。在jQuery中，提供了preventDefault()方法來阻止元素的預設行為，例如：
$("#button").bind("click",function(event){
var txt = $("#msg").html() + "<p>click!</p>";
$("#msg").html(txt);
event.preventDefault();
});
如果想同時對事件物件停止冒泡和預設行為，可以在事件處理函式中返回false。
1.5 事件物件的屬性
jQuery在遵循W3C規範的情況下，對事件物件的常用屬性進行了封裝，使事件處理在各瀏覽器下都可以正常執行而不需要進行瀏覽器型別判斷。常用的方法如下：
1) event.type(): 獲取到事件的型別。
2) event.preventDefault(): 阻止預設的事件行為。
3) event.stopPropagation(): 阻止事件的冒泡。
4) event.target(): 獲取到觸發事件的元素。
5) event.relatedTarget(): 獲取事件發生的相關元素。
6) event.pageX()/event.pageY(): 獲取到游標相對於頁面的x座標和y座標。
7) event.which(): 在滑鼠單擊事件中獲取到滑鼠的左、中、右鍵。
8) event.metaKey(): 鍵盤事件中獲取<ctrl>鍵。
9) event.originalEvent(): 指向原始的事件物件。
1.6 移除事件
unbind()方法可以用於刪除元素的事件，語法結構如下：
unbind([type][,data]);
如果沒有引數，則刪除所有繫結的事件。如果提供了事件型別，則只刪除該型別的繫結事件。如果把在繫結時傳遞的處理函式作為第二個參婁和，則只有這個特定事件處理函式才會被刪除，例如：
$("#delAll").click()(
$("#btn").unbind("click");
);
one()方法的結構與bind()方法類似，使用方法也與bind()方法相，語法結構如下：
one(type[,data],fn);
使用one()方法為元素幫定事件後，只在第一次觸發時執行，之後毫無作用。
1.7 模擬操作
有時需要通過模擬使用者操作，來達到單擊效果，可以使用trigger()方法完成，例如：
$("#btn").trigger("click");
也可以直接用簡化寫法click()來達到同樣的效果。
trigger(type[,data])方法有兩個引數，第二個引數是要傳遞給事件處理函式的附加資料，以陣列形式傳遞。
trigger()方法觸發事件後，會執行瀏覽器預設操作，例如：
$("input").trigger("focus");
以上程式碼不僅會觸發focus事件，也會使input元素本身得到焦點，如果不想執行瀏覽器預設操作，可以使用另一個類似的方法triggerHandler()方法。
2. 動畫
2.1 show()方法和hide()方法
show()方法和hide()方法是jQuery中最基本的動畫方法。為一個元素呼叫hide()方法，會將該元素的display樣式改為”none”，例如：
$("#mydiv").hide();
當把元素隱藏後，可以使用show()方法將元素的display樣式設定為先前的顯示狀態，例如：
$("#mydiv").show();
show()方法可以指定一個速度引數，例如，指定一個速度關鍵字”slow”，例如：
$("#mydiv").show("slow");
執行該程式碼後，元素將在600毫秒內慢慢顯示，其他的速度關鍵字還有”normal”和”fast”，不僅如此，還可以為顯示速度指定一個數字，單位是毫秒。
2.2 fadeIn()方法和fadeOut()方法
與show()方法不同的時，fadeIn()和fadeOut()方法只改變元素的不透明度。fadeOut()方法會在指定時間內降低元素的不透明度，直到元素完全消失。fadeIn()方法則相反，例如：
$("#mydiv").fadeOut();
2.3 slideUp()方法和slideDown()方法
slideUp()方法和slideDown()方法只會改變元素的高度。如果一個元素的display屬性值為”none”，當呼叫slideDown()方法時，這個元素將由上至下延伸顯示。slideUp()方法正好相反，元素將由下到上縮短隱藏，例如：
$("#mydiv").slideDown();
2.4 自定義動畫方法animate()
如果需要採取一些高階的自定義動畫來解決更多控制的問題，可以使用animate()方法來自定義動畫，語法結構為：
animate(params,speed,callback);
params包含樣式屬性及值的對映，比如{property1:”value1″,property2:”value2″,…}，speed是可選的速度引數，callback是在動畫完成時執行的函式，例如：
$("#mydiv").animate({left:"+=500px"},300);
“+=”符號或”-=”符號即表示在當前位置累加或者累減。如果需要同時執行多個動畫，可以寫如下程式碼：
$("#mydiv").animate({left:"500px",height:"200px"},3000);
如果只想按順序執行動畫，只需把程式碼拆開即可，例如：
$("#mydiv").animate({left:"500px"},3000);
$("#mydiv").animate({height:"200px"},3000);
或者：
$("#mydiv").animate({left:"500px"},3000).animate({height:"200px"},3000);
2.5 停止動畫和判斷是否處於動畫狀態
很多時候需要停止匹配元素正在進行的動畫，需要使用stop()方法，語法結構為：
stop([clearQueue][,gotoEnd]);
引數clearQueue和gotoEnd都是可選的引數，為Boolean值，clearQueue代表是否要清空未執行完的動畫佇列，gotoEnd代表是否直接將正在執行的動畫跳轉到末狀態。
在使用animate()方法的時候，要避免動畫積累而導致的動畫與使用者的行為不一致，解決方法是判斷元素是否正處於動畫狀態，例如：
if(!$("#mydiv").is("animated")){
}
2.6 其他動畫方法
jQuery中還有3個專門用於互動的動畫方法：toggle(speed,[callback])，slideToggle(speed,[callback]),fadeTo(speed,opacity,[callback])。
toggle()方法可以切換元素的可見狀態，例如：
$("#mydiv").click(function(){
$(this).next("div.content").toggle();
});
slideToggle()方法通過高度變化來切換匹配元素的可見性，例如：
$("#mydiv").click(function(){
$(this).next("div.content").slideToggle();
});
fadeTo()方法可以把元素的不透明度以漸進方式調整到指定的值，例如：
$("#mydiv").click(function(){
$(this).next("div.content").fadeTo(600,0.2);
});