jQuery網頁特效設計基礎教程電子教案 第5單元 jQuery 中的事件處理和動畫效果_第1頁
jQuery網頁特效設計基礎教程電子教案 第5單元 jQuery 中的事件處理和動畫效果_第2頁
jQuery網頁特效設計基礎教程電子教案 第5單元 jQuery 中的事件處理和動畫效果_第3頁
jQuery網頁特效設計基礎教程電子教案 第5單元 jQuery 中的事件處理和動畫效果_第4頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

PAGE1PAGE第5章jQuery中的事件處理和動畫效果課程名稱jQuery網頁特效設計基礎教程項目名稱jQuery中的事件處理和動畫效果任務名稱jQuery中的事件處理和動畫效果課時4項目性質□演示性□驗證性□設計性√綜合性授課班級授課日期授課地點教學目標知識目標1.了解jQuery的事件處理操作。2.掌握jQuery顯示隱藏匹配元素動畫效果的使用。3.掌握切換元素的可見狀態(tài)動畫效果的使用。4.掌握淡入淡出的動畫效果的使用。5.了解滑動效果和自定義動畫效果的使用。能力目標1.能夠熟練使用jQuery的事件處理操作。2.能夠熟練使用jQuery中的動畫效果。素質目標1.培養(yǎng)學生實踐中的應用能力。2.培養(yǎng)學生各種事件的組織能力。教學內容1.任務描述2.任務展示與實現(xiàn)（1）在頁面中通過綁定、捕獲、模擬用戶事件（2）在頁面中實現(xiàn)淡入淡出、滑動、伸縮式導航等動畫效果（2）學生動手操作3.教師講解本任務涉及的知識點4.任務小結教學重點1.jQuery的事件處理2.jQuery的動畫效果3.編寫jQuery腳本教學難點1.掌握自定義動畫效果的實現(xiàn)教學準備1.裝有jQuery的電腦2.教學課件PPT3.教材：《jQuery網頁特效設計基礎教程》作業(yè)設計1．應用jQuery實現(xiàn)圖片傳送帶教學過程教學內容與過程（教學內容、教學方法、組織形式、教學手段）做好課前“5分鐘”教學管理（多媒體、實訓室），做好上課前的各項準備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計劃、教案等），吸引學生注意力。【課前說明】本章主要介紹了事件與動畫效果的處理。“事件是腳本語言的靈魂”，事件使頁面具有了動態(tài)性和響應性。在傳統(tǒng)的JavaScript中內置了一些事件響應的方式，jQuery增強、優(yōu)化并擴展了基本的事件處理機制?；镜膭赢嬓Ч傅氖窃氐碾[藏和顯示。在jQuery中提供了兩種控制元素隱藏和顯示的方法?！灸康摹渴箤W生從了解本單元的學習目標、學習重點、考評方式等方面明確學習本單元知識的要求和目標。一、重點知識點（1）$(document).ready()方法是事件模塊中最重要的一個函數(shù)，它極大地提高了Web響應速度。（2）在jQuery中，事件綁定通?？梢苑譃闉樵亟壎ㄊ录⒁瞥壎ㄊ录徒壎ㄒ淮涡允录幚?種情況。（3）在jQuery中，為元素綁定事件可以使用bind()方法，為元素移除綁定事件可以使用unbind()方法，為元素綁定一次性事件處理可以使用one()方法。（4）在jQuery中一般常用triggerHandler()方法和trigger()方法來模擬用戶的操作觸發(fā)事件。（5）模仿懸停事件是指模仿鼠標指針移動到一個對象上面又從該對象上面移出的事件，可以通過jQuery提供的hover(over,out)方法實現(xiàn)。（6）事件對象提供了一個stopPropagation()方法，使用該方法可以阻止事件冒泡。（7）在jQuery中，應用preventDefault()方法可以阻止瀏覽器的默認行為。（8）使用hide()方法可以隱藏匹配的元素。hide()方法相當于將元素CSS樣式屬性display的值設置為none。（9）使用show()方法可以顯示匹配的元素。show()方法相當于將元素CSS樣式屬性display的值設置為block或inline或除了none以外的值。（10）使用toggle()方法可以切換元素的可見狀態(tài)。（11）在jQuery中，提供了slideDown()方法（用于滑動顯示匹配的元素）、slideUp()方法（用于滑動隱藏匹配的元素）和slideToggle()方法（用于通過高度的變化動態(tài)切換元素的可見性）來實現(xiàn)滑動效果。（12）在jQuery中，要實現(xiàn)自定義動畫效果，主要應用animate()方法創(chuàng)建自定義動畫，應用stop()方法停止動畫。案例：1.在頁面載入完成就執(zhí)行按鈕的click事件，但是并不需要用戶自己操作（1）創(chuàng)建一個名稱為index.html的文件，在該文件的<head>標記中應用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script>（2）在頁面的<body>標記中添加一個button按鈕，具體代碼如下：<inputtype="button"name="button"id="button"value="普通按鈕"/>（3）在引入jQuery庫的代碼下方編寫jQuery代碼，為按鈕綁定click事件，彈出參數(shù)msg1和msg2連接到一起的字符串，再使用trigger()方法模擬click事件。具體代碼如下：<scripttype="text/javascript">$(document).ready(function(){$("input:button").bind("click",function(event,msg1,msg2){alert(msg1+msg2); //彈出提示對話框}).trigger("click",["歡迎訪問","莫凡魔方科技"]); //頁面加載觸發(fā)單擊事件});</script>綜合實例：實現(xiàn)圖片傳送帶所謂圖片傳送帶是指在頁面的指定位置固定顯示一定數(shù)量的圖片（其他圖片隱藏），單擊最左邊的圖片時，全部圖片均向左移動一張圖片的位置，單擊最右邊的圖片時，全部圖片均向右移動一張圖片的位置，這樣既可以查看到全部圖片，又能節(jié)省頁面空間，比較實用。將鼠標指針移動到左邊的圖片上，單擊向左的箭頭將向左移動一張圖片；將鼠標指針移動到右邊的圖片上時，將顯示向右的箭頭，單擊將向右移動一張圖片；單擊中間位置的圖片，可以打開新窗口查看該圖片的原圖。通過學習，學生能夠掌握jQuery中事件響應加載、事件綁定、事件冒泡、事件捕獲、事件對象、淡入淡出動畫、滑動動畫等的處理方法。本節(jié)課主要運用案例教學法，通過對jQuery中事件處理和動畫效果的深入理解，掌握jQuery中事件處理和動畫效果的特點及優(yōu)勢，深入探討jQuery中事件處理和動畫效果編程的方法，通過實例的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論