jQuery學(xué)習(xí)筆記之jQuery的事件
一.事件綁定
1.事件綁定函數(shù)
事件的綁定函數(shù)為如下形式:
.bind(type [,data],fn)
type:類型 如click.....
data:參數(shù)
fn:事件執(zhí)行的函數(shù)
例子
$(function(){
$(#id1).click(function(){
$(#id2).show();//id2顯示
}) ;
});
二.合成事件
1.鼠標(biāo)滑過事件
.hover(enter,leave)
enter:鼠標(biāo)光標(biāo)移動到對象時(shí)觸發(fā)的函數(shù)
leave:鼠標(biāo)光標(biāo)移出對象觸發(fā)的函數(shù)
例子:
$(function(){
$(#id1).hover(function(){
$(#id2).show();//id2顯示
},function(){
$(#id2).hide();//id2隱藏
}) ;
});
2.連續(xù)單擊事件
.toggle(fn1,fn2.......,fnN)
fn:單擊第一次執(zhí)行fn1,第二次fn2,以此類推
三.事件冒泡
事件總是由內(nèi)層開始執(zhí)行,一直到最外層,不單擊了那個(gè)對象,所有包含了此對象的對象所綁定的事件都將執(zhí)行一次,這是我們不愿意看到的,jQuery給我們定義了一些阻止事件執(zhí)行的方法
1.事件對象獲取
獲取事件對象的方法就是為事件執(zhí)行函數(shù)添加一個(gè)參數(shù)
$(#id1).click(function(even){});//even就是獲取到的事件對象
2.阻止事件冒泡
我們可以在事件執(zhí)行函數(shù)中加入如此啊代碼,阻止事件冒泡
even.stopPropagation();
3.阻止默認(rèn)事件
瀏覽器默認(rèn)事件是指,按鈕單擊后提交,單擊鏈接后打開鏈接等,jQuery也可以阻止這些默認(rèn)事件的執(zhí)行
even.preventDefault();
四.獲取事件對象的屬性
even.type();//獲取事件的類型,
如:
$(#id1).click(function(even){
alert(even.type);
return false;
});//返回“click”
even.target();//獲取觸發(fā)事件的對象
even.while();獲取鼠標(biāo)單擊的1=左,2=中,3=右鍵
五.移除事件
.unbind(type [,data]);
例子:
$(function(){
$(#id1).bind("click",fn1=function(){alert(“事件1”);})
.bind("click",fn2=function(){alert(“事件2”);});
.bind("click",fn3=function(){alert(“事件3”);});
});
$("#id2").click(function(){
$(#id1).unbind("click",fn2);//刪除fn2的click事件
});
六.其他操作
1.綁定多個(gè)事件
.bind(type [,data],fn).bind(type [,data],fn)...... ;
.bind(type type..... [,data],fn) ;
2.添加事件命名空間
.bind(type.namespace [,data],fn) ;
使用時(shí)只需指定命名空間即可,如:$(#id1).unbind(".namespace")
相關(guān)文章
jquery的flexigrid無法顯示數(shù)據(jù)提示獲取到數(shù)據(jù)
升級了IE10,發(fā)現(xiàn)flexigrid無法顯示數(shù)據(jù),提示獲取到了數(shù)據(jù),但沒任何報(bào)錯(cuò)任何顯示,經(jīng)過試驗(yàn)和跟蹤,修改如下,有類似問題的朋友可以參考下哈2013-07-07
淺談jQuery中對象遍歷.eq().first().last().slice()方法
本文給大家分析了jQuery中的對象遍歷.eq().first().last().slice()方法的使用,以及他們之間的區(qū)別,jQuery源碼中的使用。2014-11-11
jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號大小效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號大小效果,需要的朋友可以參考下2014-03-03
淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
仿新浪微博返回頂部的jquery實(shí)現(xiàn)代碼
在web頁面中,如果頁面較高,為了方便用戶快速地返回頂部,都會添加一個(gè)返回頂部按鈕2012-10-10
當(dāng)jquery ajax遇上401請求的解決方法
下面小編就為大家?guī)硪黄?dāng)jquery ajax遇上401請求的解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05

