jQuery事件機制

1 事件操作

1.1 頁面載入事件

$(document).ready(function(){
  // 在這裏寫你的代碼...
});
或者
$(function($) {
  // 你可以在這裏繼續使用$作為別名...
});

1.2 事件綁定

on(eve,[sel],[data],fn)      1.7+ 在選擇元素上綁定一個或多個事件的事件處理函數
bind(type,[data],fn)         3.0- 請使用on()
one(type,[data],fn)            為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數

1.3 解除事件綁定

off(eve,[sel],[fn])         1.7+ 在選擇元素上移除一個或多個事件的事件處理函數
unbind(t,[d|f])                3.0- 請使用off()

1.4 觸發事件

trigger(type,[data])         在每一個匹配的元素上觸發某類事件

triggerHandler(type, [data]) 
這個特別的方法將會觸發指定的事件類型上所有綁定的處理函數。但不會執行瀏覽器默認動作，也不會產生事件冒泡
這個方法的行為表現與trigger類似，但有以下三個主要區別：
* 第一，他不會觸發瀏覽器默認事件。
* 第二，只觸發jQuery對象集合中第一個元素的事件處理函數。
* 第三，這個方法的返回的是事件處理函數的返回值，而不是據有可鏈性的jQuery對象。此外，如果最開始的jQuery對象集合為空，則這個方法返回 undefined 。
 

1.5 事件委派

live(type,[data],fn)    1.7-
die(type,[fn])            1.7-
delegate(s,[t],[d],fn)    3.0-
undelegate([s,[t],fn])    3.0-
全部移除了，請使用 on()

$(document).on(‘click‘, ‘button‘, fn)

1.6 事件切換

hover([over,]out)           一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法
toggle([spe],[eas],[fn])   1.9-用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件
 

2 事件列表

blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)         
    當元素獲得焦點時，觸發 focusin 事件。 focusin事件跟focus事件區別在於，他可以在父元素上檢測子元素獲取焦點的情況

focusout([data],fn)
    當元素失去焦點時觸發 focusout 事件。focusout事件跟blur事件區別在於，他可以在父元素上檢測子元素失去焦點的情況。

keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
    當鼠標指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一起使用。與 mouseover 事件不同，只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。如果鼠標指針穿過任何子元素，同樣會觸發 mouseover 事件。

mouseleave([[data],fn])
    當鼠標指針離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用。與 mouseout 事件不同，只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。如果鼠標指針離開任何子元素，同樣會觸發 mouseout 事件。

mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])

3 事件對象

屬性

eve.currentTarget        在事件冒泡階段中的當前DOM元素
eve.data                當前執行的處理器被綁定的時候，包含可選的數據傳遞給jQuery.fn.bind
eve.delegateTarget        1.7+ 當currently-called的jQuery事件處理程序附加元素
eve.namespace            當事件被觸發時此屬性包含指定的命名空間
eve.pageX                鼠標相對於文檔的左邊緣的位置
eve.pageY                鼠標相對於文檔的頂部邊緣的位置
eve.relatedTarget        在事件中涉及的其它任何DOM元素
eve.result                這個屬性包含了當前事件事件最後觸發的那個處理函數的返回值，除非值是 undefined
eve.target                最初觸發事件的DOM元素
eve.timeStamp            返回事件觸發時距離1970年1月1日的毫秒數
eve.type                事件類型
eve.which                針對鍵盤和鼠標事件，這個屬性能確定你到底按的是哪個鍵或按鈕

方法

eve.preventDefault()            阻止默認事件行為的觸發
eve.isDefaultPrevented()        根據事件對象中是否調用過 event.preventDefault() 方法來返回一個布爾值
eve.stopPropagation()            防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函數
eve.isPropagationStopped()        檢測 event.stopPropagation() 是否被調用過
eve.stopImmediatePropagation()     阻止剩余的事件處理函數執行並且防止事件冒泡到DOM樹上
eve.isImmediatePropagation()     檢測 ev

ent.stopImmediatePropagation() 是否被調用過

動畫效果

1. 基本效果

show([s,[e],[fn]])        顯示隱藏的匹配元素
hide([s,[e],[fn]])        隱藏顯示的元素
toggle([s],[e],[fn])    如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的

參數詳解

speed    : 三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing    : (Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
fn        : 在動畫完成時執行的函數，每個元素執行一次。

2. 滑動效果

slideDown([s],[e],[fn])        通過高度變化（向下增大）來動態地顯示所有匹配的元素
slideUp([s,[e],[fn]])        通過高度變化（向上減小）來動態地隱藏所有匹配的元素
slideToggle([s],[e],[fn])    通過高度變化來切換所有匹配元素的可見性

參數詳解

speed    : 三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing    : (Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
fn        : 在動畫完成時執行的函數，每個元素執行一次。

3 淡入淡出效果

fadeIn([s],[e],[fn])        通過不透明度的變化來實現所有匹配元素的淡入效果
fadeOut([s],[e],[fn])        通過不透明度的變化來實現所有匹配元素的淡出效果
fadeToggle([s,[e],[fn]])    通過不透明度的變化來開關所有匹配元素的淡入和淡出效果
fadeTo([[s],o,[e],[fn]])    把所有匹配元素的不透明度以漸進方式調整到指定的不透明度

參數詳解

speed    : 三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing    : (Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"
fn        : 在動畫完成時執行的函數，每個元素執行一次。

opacity    : (用戶fadeTo)一個0至1之間表示透明度的數字。

4 自定義動畫

animate(p,[s],[e],[fn])

參數詳解

params    : 一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
speed    : 三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing    : 要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".
fn        : 在動畫完成時執行的函數，每個元素執行一次。

5 動畫控制

stop([c],[j])        停止所有在指定元素上正在運行的動畫
delay(d,[q])        設置一個延時來推遲執行隊列中之後的項目
finish([queue])        停止當前正在運行的動畫，刪除所有排隊的動畫，並完成匹配元素所有的動畫

6 設置

//關閉頁面上所有的動畫
jQuery.fx.off = true;

工具和其他操作

1 jQuery 對象訪問

each(callback)                遍歷jquery dom
size()                        1.8- 返回dom集合中的個數 同length
length                        返回dom集合中的個數
selector                    返回選擇器
context                        返回原生js dom
get([index])                獲取dom集合中一個
index([selector|element])    索引值
toArray()                    轉為純數組

2 數組和對象操作

$.each(object,[callback])        遍歷數組 對象
$.extend([d],tgt,obj1,[objN])    合並對象 合並到第一個參數
$.grep(array,fn,[invert])        過濾數組
$.makeArray(obj)                把類數組對象變為數組
$.map(arr|obj,callback)            操作數組的每一單元
$.inArray(val,arr,[from])        判斷值是否在數組中
$.merge(first,second)            合並數組
$.unique(array)                    去重
$.parseJSON(json)                解析json
$.parseXML(data)                解析xml

3 類型檢測

$.contains(c,c)            判斷一個元素是否是另一個元素的後代嗎元素
$.type(obj)                判斷類型
$.isarray(obj)            是否為數組
$.isFunction(obj)        是否是function
$.isEmptyObject(obj)    是否為空對象
$.isPlainObject(obj)    是否為純粹的對象
$.isWindow(obj)            是否是window對象
$.isNumeric(value)        1.7+是否是number

4 其他操作

$.trim(str)                    去除左右兩邊的空格
$.param(obj,[traditional])    把對象或數組 轉為 特殊格式的字符串 序列化

jQuery事件機制，動畫效果，工具和其他操作（三）