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

jQuery中的事件與動(dòng)畫(huà)第五章回顧及作業(yè)點(diǎn)評(píng)列舉至少4種基本選擇器？合并元素集合使用哪種選擇器？后代選擇器和子選擇器有什么區(qū)別？提問(wèn)2/34預(yù)習(xí)檢查mouseover()、mouseout()分別是什么事件？再列舉至少3個(gè)jQuery中的常用事件在jQuery中使用什么方法隱藏元素？提問(wèn)3/34本章任務(wù)制作左導(dǎo)航特效制作登錄框特效制作團(tuán)購(gòu)網(wǎng)主導(dǎo)航制作FAQ列表頁(yè)制作當(dāng)當(dāng)網(wǎng)我的訂單頁(yè)4/34本章目標(biāo)使用常用簡(jiǎn)單事件制作網(wǎng)頁(yè)特效使用鼠標(biāo)事件制作主導(dǎo)航特效使用鍵盤(pán)事件制作表單特效使用hover()制作下拉菜單特效使用鼠標(biāo)事件及動(dòng)畫(huà)制作彈出對(duì)話框5/34網(wǎng)頁(yè)中的事件和winform一樣，在網(wǎng)頁(yè)中的事件也是實(shí)現(xiàn)和用戶交互的基礎(chǔ)例如tab頁(yè)切換效果，可以通過(guò)鼠標(biāo)點(diǎn)擊事件來(lái)實(shí)現(xiàn)點(diǎn)擊選項(xiàng)卡，切換<div>6/34jQuery中的事件jQuery事件是對(duì)JavaScript事件的封裝，常用事件分類如下：基礎(chǔ)事件window事件鼠標(biāo)事件鍵盤(pán)事件表單事件復(fù)合事件是多個(gè)事件的組合鼠標(biāo)光標(biāo)懸停鼠標(biāo)連續(xù)點(diǎn)擊7/34鼠標(biāo)事件鼠標(biāo)事件是當(dāng)用戶在文檔上移動(dòng)或單擊鼠標(biāo)時(shí)而產(chǎn)生的事件，常用鼠標(biāo)事件有：方法描述執(zhí)行時(shí)機(jī)click()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的click事件單擊鼠標(biāo)時(shí)mouseover()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseover事件鼠標(biāo)移過(guò)時(shí)mouseout()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseout事件鼠標(biāo)移出時(shí)8/34實(shí)現(xiàn)主導(dǎo)航特效$("#navli").mouseover(function(){

$(this).

addClass(“heightlight”);});以mouseover()為例，實(shí)現(xiàn)鼠標(biāo)移過(guò)時(shí)特效當(dāng)鼠標(biāo)移過(guò)元素時(shí)演示示例1：主導(dǎo)航特效為事件添加響應(yīng)方法鼠標(biāo)所在的元素9/34鍵盤(pán)事件用戶每次按下或者釋放鍵盤(pán)上的鍵時(shí)都會(huì)產(chǎn)生事件，常用鍵盤(pán)事件有：方法描述執(zhí)行時(shí)機(jī)keydown()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keydown事件按下鍵盤(pán)時(shí)keyup()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keyup事件釋放按鍵時(shí)keypress()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keypress事件產(chǎn)生可打印的字符時(shí)10/34鍵盤(pán)事件

$(document).keydown(function(event){

if(event.keyCode=="13"){alert("確認(rèn)要提交么？");

}});以keydown()為例，實(shí)現(xiàn)按鍵時(shí)特效當(dāng)鍵盤(pán)被按下時(shí)演示示例2：鍵盤(pán)事件事件對(duì)象event中封裝了事件的參數(shù)如果是回車(chē)鍵11/34表單事件當(dāng)元素獲得焦點(diǎn)時(shí)，會(huì)觸發(fā)focus事件，失去焦點(diǎn)時(shí)，會(huì)觸發(fā)blur事件，詳見(jiàn)下表：方法描述執(zhí)行時(shí)機(jī)focus()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的focus事件獲得焦點(diǎn)blur()觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的blur事件失去焦點(diǎn)12/34表單事件$("[name=member]").focus(function(){$(this).addClass("input_focus");});以focus()為例，實(shí)現(xiàn)獲得焦點(diǎn)時(shí)特效當(dāng)元素獲得焦點(diǎn)時(shí)演示示例3：表單事件通過(guò)添加樣式改變文本框背景色13/34學(xué)員操作—制作左導(dǎo)航特效需求說(shuō)明初始狀態(tài)下，只顯示“購(gòu)物特權(quán)”主菜單，點(diǎn)擊“購(gòu)物特權(quán)”后顯示其下的列表內(nèi)容，鼠標(biāo)移動(dòng)到子菜單上時(shí)，子菜單添加背景色練習(xí)完成時(shí)間：25分鐘14/34學(xué)員操作—制作登錄框特效需求說(shuō)明文本框獲得焦點(diǎn)時(shí)，文本框邊框的顯示效果（顏色）改變練習(xí)完成時(shí)間：15分鐘15/34共性問(wèn)題集中講解常見(jiàn)問(wèn)題及解決辦法代碼規(guī)范問(wèn)題調(diào)試技巧共性問(wèn)題集中講解16/34綁定事件除了使用事件名綁定事件外，還可以使用bind()方法$("input[name=event_1]").bind("click",function(){$("p").css("background-color","#F30");});事件類型處理函數(shù)演示示例4：綁定單個(gè)事件17/34綁定多個(gè)事件bind()方法還可以同時(shí)為多個(gè)事件綁定方法$("input[name=event_1]").bind({mouseover:function(){ $("ul").css("display","none");},mouseout:function(){ $("ul").css("display","block");}});為mouseover綁定方法為mouseout綁定方法演示示例5：綁定多個(gè)事件18/34移除事件移除事件使用unbind()方法，其語(yǔ)法如下：unbind([type],[fn])當(dāng)unbind()不帶參數(shù)時(shí)，表示移除所綁定的全部事件參數(shù)含義描述[type]事件類型主要包括：blur、focus、click、mouseout等基礎(chǔ)事件，此外，還可以是自定義事件[fn]處理函數(shù)用來(lái)綁定的處理函數(shù)提示19/34鼠標(biāo)光標(biāo)懸停事件hover()方法相當(dāng)于mouseover與mouseout事件的組合$("#myaccound").hover(function(){$("#menu_1").css("display","block");

},

function(){$("#menu_1").css("display","none");

});光標(biāo)移入時(shí)觸發(fā)演示示例6：復(fù)合事件光標(biāo)移出時(shí)觸發(fā)20/34鼠標(biāo)連續(xù)click事件toggle()方法用于模擬鼠標(biāo)連續(xù)click事件$("body").toggle(function(){},function(){},function(){});第一次點(diǎn)擊觸發(fā)演示示例6：復(fù)合事件第二次點(diǎn)擊觸發(fā)第三次點(diǎn)擊觸發(fā)21/34學(xué)員操作—制作團(tuán)購(gòu)網(wǎng)主導(dǎo)航需求說(shuō)明鼠標(biāo)移過(guò)導(dǎo)航項(xiàng)時(shí)，鼠標(biāo)所處導(dǎo)航項(xiàng)改變背景圖像練習(xí)完成時(shí)間：20分鐘鼠標(biāo)移過(guò)時(shí)22/34共性問(wèn)題集中講解常見(jiàn)問(wèn)題及解決辦法代碼規(guī)范問(wèn)題調(diào)試技巧共性問(wèn)題集中講解23/34jQuery動(dòng)畫(huà)效果jQuery提供了很多動(dòng)畫(huà)效果，如：控制元素顯示與隱藏控制元素淡入淡出改變?cè)馗叨?4/34顯示及隱藏元素show()在顯示元素時(shí)，能定義顯示元素時(shí)的效果，如顯示速度$(".tipsbox").show("slow");以較慢的速度顯示元素演示示例7：刪除提示特效顯示速度可以取如下值：毫秒（如1000）、slow、normal、fast提示25/34切換元素可見(jiàn)狀態(tài)toggle()除了可以模擬鼠標(biāo)的連續(xù)單擊事件外，還能用于切換元素的可見(jiàn)狀態(tài)$("li:gt(5):not(:last)").toggle();演示示例8：可伸縮的菜單26/34淡入淡出效果fadeIn()和fadeOut()可以通過(guò)改變?cè)氐耐该鞫葘?shí)現(xiàn)淡入淡出效果$("input[name=fadein_btn]").click(function(){$("img").fadeIn("slow");});$("input[name=fadeout_btn]").click(function(){$("img").fadeOut(1000);});演示示例9：淡入淡出效果以較慢的速度淡入以1000毫秒的速度淡出27/34改變?cè)氐母叨萻lideDown()可以使元素逐步延伸顯示，slideUp()則使元素逐步縮短直至隱藏$("h2").click(function(){$(".txt").slideUp("slow");$(".txt").slideDown("slow");});演示示例10：改變?cè)馗叨?8/34學(xué)員操作—制作FAQ列表頁(yè)需求說(shuō)明鼠標(biāo)移過(guò)列表項(xiàng)時(shí)，背景變?yōu)榫G色圓角矩形，單擊列表標(biāo)題時(shí)，展開(kāi)節(jié)點(diǎn)，再次單擊收縮節(jié)點(diǎn)練習(xí)完成時(shí)間：15分鐘29/34學(xué)員操作—制作當(dāng)當(dāng)網(wǎng)我的訂單頁(yè)需求說(shuō)明鼠標(biāo)鼠標(biāo)移過(guò)“我的當(dāng)當(dāng)”時(shí)，出現(xiàn)下拉菜單，鼠標(biāo)移出時(shí)，下拉菜單隱藏單擊“我的訂單”，顯示其下相關(guān)內(nèi)容；單擊“我的團(tuán)購(gòu)訂單”，顯示其下相關(guān)內(nèi)容，切換顯示其下相關(guān)內(nèi)容時(shí)，以速度為1800毫秒的淡入顯示練習(xí)完成時(shí)間：25分鐘30/34共性問(wèn)題集中講解常見(jiàn)問(wèn)題及解決辦法代碼規(guī)范問(wèn)題調(diào)試技巧共性問(wèn)題集中講解31/34總結(jié)鼠標(biāo)事件click、mouseover、mouseout鍵盤(pán)事件keydown、keyup、keypress表單事件focus、blur復(fù)合事件hover