jQuery 使用手冊,大家可以耐心的看完,就基本上入門了。
六:事件處理
hover(Function, Function) 當鼠標move over時觸發第一個function,當鼠標move out時觸發第二個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) 當匹配元素第一次被點擊時觸發第一個函數,當第二次被點擊時觸發第二個函數樣式:<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) 用戶將一個事件和觸發事件的方式綁定到匹配對象上。
trigger(type) 用戶觸發type形式的事件。$("p").trigger("click")
還有:
unbind() unbind(type) unbind(type, fn)
Dynamic event(Function) 綁定和取消綁定提供函數的簡捷方式例:
$("#a").bind("click",function() {
$(this).addClass("red");
})
也可以這樣寫:
$("#a").click(function() {
$(this).addClass("red");
});
最終效果是當鼠標點擊id為a的層上時圖層增加一個red樣式,
jQuery提供的函數
用於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):增加一個點擊時觸發某函數的事件
click():可以在其他事件中執行匹配對象的click事件。
unclick ():不執行匹配對象的click事件。
oneclick(fn):只增加可以執行一次的click事件。
unclick (fn):增加一個點擊時不觸發某函數的事件。
上面列舉的用於browers、form、keyboard、mouse、UI的事件都可以按以上方法擴展。