jQuery中的事件與動畫

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

$(this).

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

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

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

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

},

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

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