第五章

jQuery中的事件與動畫

本章技能目標(biāo)

使用常用的簡單事件制作網(wǎng)頁特效

使用鼠標(biāo)事件制作主導(dǎo)航特效

使用鍵盤鍵盤事件制作表單特效

使用hover()方法制作下拉框菜單特效

使用鼠標(biāo)事件及動畫制作彈出對話框

1.jQuery中的事件

基礎(chǔ)事件

語法:

事件名=”函數(shù)名()”;

jQuery中的典型的事件方法

事件 典型事件方法 說明

單機事件 click(fn) 單機鼠標(biāo)時發(fā)生,fn代表函數(shù)

按下鍵盤觸發(fā) keydown(fn) 按下鍵盤時發(fā)生,fn(函數(shù))

失去焦點事件 blur(fn) 失去焦點發(fā)生,fn(函數(shù))

1.Window事件:

例如:打開網(wǎng)頁時加載頁面,關(guān)閉窗口,調(diào)整窗口大小,移動窗口等操作,比如文檔就緒事件,他對應(yīng)的方法是ready()方法.

2.鍵盤事件:

常用的鼠標(biāo)事件的方法

方法 描述 執(zhí)行時機

click() 觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的click事件 單機鼠標(biāo)時

Mouseover() 觸發(fā)或?qū)⒑瘮?shù)綁定到制定元素的mouseover事件 鼠標(biāo)指針移過時

Mouseout() 觸發(fā)或?qū)⒑瘮?shù)綁定到制定元素的mouseout事件 鼠標(biāo)指針移出時

3.鍵盤事件

常用鍵盤事件的方法

方法 描述 執(zhí)行時機

Keydown() 觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keydown事件 按下按鍵時

Keyup() 觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keyup事件 釋放按鍵時

Keypress() 觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keypress事件 產(chǎn)生可打印的字符時

鍵盤事件例:

$(“input”).keydown(function(event){

If(event.keyCode==13){

Alert(“您按下的是回車!”);

}

});

4.表單事件

常用的表單事件的方法

方法 描述 執(zhí)行時機

Focus() 觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的focus事件 獲取焦點時

Blur() 觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的blur事件 失去焦點時

鍵盤事件例:

$(function(){

$(“input”).focus(function(){

$(this).css(‘background’,’red’);

});

$(“input”).blur(function(){

$(this).css(‘background’,’white’);

});

});

綁定事件與移除事件

1.綁定事件

語法:bind(type,[data],fn)

Bind()方法有3個參數(shù),其中參數(shù)data不是必須的詳細(xì)說明:

Bind()方法的參數(shù)說明

類型 定義 描述

Type 事件類型 主要包括blur,focus,click,mouseout,等基礎(chǔ)事件,還可以是自定義事件

[data] 可選參數(shù) 作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象,該參數(shù)可選

Fn 處理函數(shù) 用來綁定的處理函數(shù)

1.綁定單個事件

假設(shè)需要完成單機按鈕,為所有<p>元素添加紅色背景,可以使用click(),也可以使用 bind(),下面使用bind方法完成該功能

$(function(){

$(“input”).bind(“click”,function(){

$(“p”).css(“background”,”red”);

});

});

2.同事綁定多個事件

$(function(){

$(“input”).bind({

Mouseover:function(){

$(“ul”).css(‘background’,’red’);

}

Mouseout:function(){

$(“ul”).css(‘background’,’white’);

}

});

});

3.移除事件

移除事件與綁定事件是相對的,在jQuery中為匹配元素移除單個元素或多個元素,可以使用unbind方法

語法:

Unbind([type],[fn]).

Unbind方法有兩個參數(shù),兩個參數(shù)都是可選的,如果沒有參數(shù)則是移除全部事件,

UnBind()方法的參數(shù)說明

類型 定義 描述

[type] 事件類型 包括:blur,focus,click,mouseout,等 事件,可以是自定義事件

[fn] 處理函數(shù) 用來接觸綁定的處理函數(shù)

例如:

$("input").unbind({mouseover:t1});

復(fù)合事件

在jQuery中有兩個復(fù)合事件 hover() 和 toggle() 方法

這兩個方法與ready()方法類似,都是jQuery自定義方法

1.hover()方法

Hover()方法用于模仿鼠標(biāo)指針懸停事件

語法: hover(enter,leave);

$(function(){

$(“input”).hover(function(){

$(“ul”).show();

}),function(){

$(“ul”).hide();

}

});

2.toggle()方法

在jQuer中,toggle()方法用于模擬鼠標(biāo)連續(xù)click事件,第一次單機元素,觸發(fā)指定的第一個函數(shù)(fn1),第二個(fn2),第三個(fn3),等等(更多),隨后每次單機重復(fù)這幾個函數(shù)的調(diào)用

Toggle()方法的語法:

Toggle(fn1,fn2,fn3);

例子:

$(functoin(){

$(“body”).toggle(

Function(){

$(this).css(‘backgorund’,’red’);

},

Function(){

$(this).css(‘backgorund’,’blue’);

},

Function(){

$(this).css(‘backgorund’,’white’);

}

);

});

jQuery中的動畫

控制元素顯示與隱藏

1.控制元素顯示

語法: $(selector).show([speed],[callback]);

Show()與hide()的參數(shù)說明

參數(shù) 描述

可選,規(guī)定從隱藏到全可見的速度,默認(rèn)為0;

Speed 可能值:毫秒(如:1000)

在設(shè)置輸?shù)那闆r下,元素從隱藏到完全可見的 過程,逐漸改變元素的高寬,內(nèi)外邊距,透明度

Callback 可選,show函數(shù)執(zhí)行后,要執(zhí)行的函數(shù)

2.控制元素隱藏

在jQuery中,與show方法對應(yīng)的是hide方法

Hide方法用于隱藏(可以控制元素的隱藏速度)

語法:

$(selector).hide([speed],[callback]);

他的參數(shù)與show方法的參數(shù)一樣,第一個是

隱藏的速度,第二個是隱藏后調(diào)用的函數(shù)

3.切換元素的可見狀態(tài)

$(function(){

$(“input”).click(function(){

//其他代碼省略

$(“l(fā)i:gt(5):not(:last)”).toggle();

});

});

中間代碼實現(xiàn)了只讓中間的代碼隱藏

改變元素透明度

1.控制元素淡入與淡出

控制元素淡出使用fadeout

控制元素淡入使用fadein

語法:

Fadein: $(selector).fadein([speed],[callback]);

Fadeout: $(selector).fadeout([speed],[callback]);

Fadeout()與fadein()的參數(shù)說明

參數(shù) 描述

可選,規(guī)定從隱藏到全可見的速度,默認(rèn)為0;

Speed 可能值:毫秒(如:1000)

在設(shè)置輸?shù)那闆r下,元素會慢慢透明或者慢慢 呈現(xiàn)出來

Callback 可選,show函數(shù)執(zhí)行后,要執(zhí)行的函數(shù)

除非設(shè)置了speed參數(shù),否則不能設(shè)置該參數(shù)

改變元素的高度

用于改變元素的高度的方法是slideup與slidedown

若一個元素隱藏,當(dāng)調(diào)用slidedown方法顯示該元素時,這個 元素會從上向下延伸顯示,而slideup相反,元素會從下到上

縮短直到隱藏

本章總結(jié)

1.在jQuery中,提供了click()方法等一系列基礎(chǔ)綁定方法,支持window事件,鼠標(biāo)事件,鍵盤事件和表單事件等基礎(chǔ)事件的綁定.

2.使用bind()方法可以一次性綁定一個或多個時間處理方法,使用unbind()方法可以移除事件綁定

3.在jQuery中,提供了hover()和toggle()等復(fù)合事件方法

4.在jQuery中,提供了一系列顯示動畫效果的方法,其中show()方法控制元素顯示,hide()方法隱藏,使用toggle()方法切換元素的可見狀態(tài),使用fadein()方法和fadeout()方法實現(xiàn)元素的淡出淡入,使用slideup(0方法和slidedown()方法實現(xiàn)元素的收縮與展開

本章完!