第五章

jQuery中的事件與動(dòng)畫(huà)

本章技能目標(biāo)

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

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

使用鍵盤(pán)鍵盤(pán)事件制作表單特效

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

使用鼠標(biāo)事件及動(dòng)畫(huà)制作彈出對(duì)話框

1.jQuery中的事件

基礎(chǔ)事件

語(yǔ)法:

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

jQuery中的典型的事件方法

事件 典型事件方法 說(shuō)明

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

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

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

1.Window事件:

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

2.鍵盤(pán)事件:

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

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

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

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

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

3.鍵盤(pán)事件

常用鍵盤(pán)事件的方法

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

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

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

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

鍵盤(pán)事件例:

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

If(event.keyCode==13){

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

}

});

4.表單事件

常用的表單事件的方法

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

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

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

鍵盤(pán)事件例:

$(function(){

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

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

});

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

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

});

});

綁定事件與移除事件

1.綁定事件

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

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

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

類型 定義 描述

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

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

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

1.綁定單個(gè)事件

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

$(function(){

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

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

});

});

2.同事綁定多個(gè)事件

$(function(){

$(“input”).bind({

Mouseover:function(){

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

}

Mouseout:function(){

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

}

});

});

3.移除事件

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

語(yǔ)法:

Unbind([type],[fn]).

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

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

類型 定義 描述

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

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

例如:

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

復(fù)合事件

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

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

1.hover()方法

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

語(yǔ)法: hover(enter,leave);

$(function(){

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

$(“ul”).show();

}),function(){

$(“ul”).hide();

}

});

2.toggle()方法

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

Toggle()方法的語(yǔ)法:

Toggle(fn1,fn2,fn3);

例子:

$(functoin(){

$(“body”).toggle(

Function(){

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

},

Function(){

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

},

Function(){

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

}

);

});

jQuery中的動(dòng)畫(huà)

控制元素顯示與隱藏

1.控制元素顯示

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

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

參數(shù) 描述

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

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

在設(shè)置輸?shù)那闆r下,元素從隱藏到完全可見(jiàn)的 過(guò)程,逐漸改變?cè)氐母邔?內(nèi)外邊距,透明度

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

2.控制元素隱藏

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

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

語(yǔ)法:

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

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

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

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

$(function(){

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

//其他代碼省略

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

});

});

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

改變?cè)赝该鞫?/P>

1.控制元素淡入與淡出

控制元素淡出使用fadeout

控制元素淡入使用fadein

語(yǔ)法:

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

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

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

參數(shù) 描述

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

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

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

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

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

改變?cè)氐母叨?/P>

用于改變?cè)氐母叨鹊姆椒ㄊ莝lideup與slidedown

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

縮短直到隱藏

本章總結(jié)

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

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

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

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

本章完!