jQuery 使用手冊(六)

更新時間：2009年09月23日 17:32:10 作者：

jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。

六：事件處理

hover(Function, Function) 當鼠標move over時觸發(fā)第一個function，當鼠標move out時觸發(fā)第二個function
樣式：<style>.red{color:#FF0000}</style>
Html代碼： <div id="a">sdf</div>
jQuery代碼及效果

$(function(){
  $("#a").hover(function(){$(this).addClass("red");},
                            function(){ $(this).removeClass("red");
                          });
})

最終效果是當鼠標移到id為a的層上時圖層增加一個red樣式，離開層時移出red樣式

toggle(Function, Function) 當匹配元素第一次被點擊時觸發(fā)第一個函數(shù)，當?shù)诙伪稽c擊時觸發(fā)第二個函數(shù)
樣式：<style>.red{color:#FF0000}</style>
Html代碼： <div id="a">sdf</div>
jQuery代碼及效果

$(function(){
  $("#a"). toggle (function(){$(this).addClass("red");},
                              function(){ $(this).removeClass("red");
                            });
})

最終效果是當鼠標點擊id為a的層上時圖層增加一個red樣式，離開層時移出red樣式

bind(type, fn)   用戶將一個事件和觸發(fā)事件的方式綁定到匹配對象上。
trigger(type)   用戶觸發(fā)type形式的事件。$("p").trigger("click")
還有：unbind()   unbind(type)    unbind(type, fn)

Dynamic event(Function)    綁定和取消綁定提供函數(shù)的簡捷方式
例：

$("#a").bind("click",function() {
$(this).addClass("red");
})

也可以這樣寫：

$("#a").click(function() {
$(this).addClass("red");
});

最終效果是當鼠標點擊id為a的層上時圖層增加一個red樣式，

jQuery提供的函數(shù)
用于browers事件
error(fn)    load(fn)     unload(fn)    resize(fn)    scroll(fn)

用于form事件
change(fn)    select(fn)    submit(fn)

用于keyboard事件
keydown(fn)    keypress(fn)    keyup(fn)

用于mouse事件
click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
mouseout(fn) mouseover(fn)     mouseup(fn)

用于UI事件
blur(fn) focus(fn)

以上事件的擴展再擴展為5類
舉例，click(fn) 擴展 click() unclick() oneclick(fn) unclick(fn)
click(fn)：增加一個點擊時觸發(fā)某函數(shù)的事件
click()：可以在其他事件中執(zhí)行匹配對象的click事件。
unclick ()：不執(zhí)行匹配對象的click事件。
oneclick(fn)：只增加可以執(zhí)行一次的click事件。
unclick (fn)：增加一個點擊時不觸發(fā)某函數(shù)的事件。
上面列舉的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法擴展。