快捷導(dǎo)航

jQuery 使用手冊(六)

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

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

六：事件處理

hover(Function, Function) 當(dāng)鼠標(biāo)move over時觸發(fā)第一個function，當(dāng)鼠標(biāo)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");
                          });
})

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

toggle(Function, Function) 當(dāng)匹配元素第一次被點(diǎn)擊時觸發(fā)第一個函數(shù)，當(dāng)?shù)诙伪稽c(diǎn)擊時觸發(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");
                            });
})

最終效果是當(dāng)鼠標(biāo)點(diǎn)擊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");
});

最終效果是當(dāng)鼠標(biāo)點(diǎn)擊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)

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