jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）（第2版）-教案 第11、12章 jQuery在HTML5中的應(yīng)用、綜合實戰(zhàn)-使用jQuery實現(xiàn)攜程網(wǎng)站特效

PAGE1PAGE第11章jQuery在HTML5中的應(yīng)用課程名稱jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程項目名稱jQuery在HTML5中的應(yīng)用任務(wù)名稱jQuery在HTML5中的應(yīng)用課時5項目性質(zhì)□演示性□驗證性□設(shè)計性√綜合性授課班級授課日期授課地點教學(xué)目標知識目標1.了解HTML5的新特性。2.了解瀏覽器對HTML5的支持。3.掌握jQuery與HTML編程的常用功能。能力目標1.能夠熟練使用HTML5能力。2.能夠熟練使用jQuery與HTML5的編程能力。素質(zhì)目標1.培養(yǎng)學(xué)生綜合應(yīng)用的能力。2.培養(yǎng)學(xué)生知識學(xué)習(xí)的能力。教學(xué)內(nèi)容1.任務(wù)描述2.任務(wù)展示與實現(xiàn)（1）使用HTML5+jQuery實現(xiàn)文件上傳進度條的顯示（2）使用HTML5+jQuery實現(xiàn)圖片旋轉(zhuǎn)效果（3）使用jQuery插件在HTML5中實現(xiàn)聲音播放（4）學(xué)生動手操作3.教師講解本任務(wù)涉及的知識點4.任務(wù)小結(jié)教學(xué)重點1.HTML5的基礎(chǔ)知識2.如何在網(wǎng)站開發(fā)中綜合使用jQuery+HTML53.編寫jQuery代碼教學(xué)難點1.如何在網(wǎng)站開發(fā)中綜合使用jQuery+HTML5教學(xué)準備1.裝有jQuery的電腦2.教學(xué)課件PPT3.教材：《jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）》劉剛?cè)嗣襦]電出版社作業(yè)設(shè)計1．綜合實例：旅游信息網(wǎng)前臺頁面設(shè)計教學(xué)過程教學(xué)內(nèi)容與過程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）做好課前“5分鐘”教學(xué)管理（多媒體、實訓(xùn)室），做好上課前的各項準備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計劃、教案等），吸引學(xué)生注意力?！菊n前說明】本章主要介紹了HTML5的基礎(chǔ)、HTML5的新特性、瀏覽器對HTML5的支持、在網(wǎng)站開發(fā)中綜合使用jQuery+HTML5等知識點。其中重點介紹了在網(wǎng)站開發(fā)中綜合使用jQuery+HTML5，包括文件上傳、Canvas繪圖、圖片選擇等。【目的】使學(xué)生從了解本單元的學(xué)習(xí)目標、學(xué)習(xí)重點、考評方式等方面明確學(xué)習(xí)本單元知識的要求和目標。一、HTML5基礎(chǔ)HTML5是基于各種各樣的理念進行設(shè)計的，這些設(shè)計理念體現(xiàn)了對可能性和可行性的新認識。1．兼容性2．實用性和用戶優(yōu)先3．化繁為簡二、jQuery與HTML5編程通過多個案例紹在jQuery程序中調(diào)用HTML5的API來完成一些常見功能。案例：1.使用jCanvas插件繪制一個淺藍色的正方形（實例位置：源碼\第11章\11-2）。（1）創(chuàng)建index.html，引入jquery文件和jCanvas插件文件。代碼如下：<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script><scripttype="text/javascript"src="../js/jcanvas.min.js"></script>（2）在頁面中添加<canvas>元素，具體代碼如下：<canvaswidth="300"height="200"></canvas>（3）編寫jQuery代碼，使用jCanvas插件的drawRect()方法實現(xiàn)繪制一個淺藍色的正方形。具體代碼如下：$(function(){ $("canvas").drawRect({ fillStyle:"lightblue", x:150,y:80, width:100, height:100 })})綜合實例：旅游信息網(wǎng)前臺頁面設(shè)計旅游信息網(wǎng)是介紹關(guān)于長春旅游信息的網(wǎng)站，該網(wǎng)站主要包括主頁、自然風(fēng)光頁、人文氣息頁、美食頁、旅游景點頁、名校簡介頁及留下足跡頁等頁面。通過學(xué)習(xí)，學(xué)生能夠掌握HTML5基礎(chǔ)、jQuery與HTML5編程API接口等功能。本節(jié)課主要運用案例教學(xué)法，通過對jQuery與HTML5編程的深入理解，掌握jQuery與HTML5編程的特點及優(yōu)勢，深入探討jQuery與HTML5的編程方法，通過實例的方法加強對jQuery與HTML5編程的掌握，達到能夠獨立熟練運用jQuery與HTML5編程來解決實際問題的能力。教學(xué)評價方式以小組為單位，以完成案例的質(zhì)量為評價標準，形成任務(wù)驅(qū)動，小組協(xié)作，質(zhì)量與速度并存的課堂評價方式，促進學(xué)生的自主、創(chuàng)新學(xué)習(xí)的方式。第12章綜合實戰(zhàn)——使用jQuery實現(xiàn)攜程網(wǎng)站特效課程名稱jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程項目名稱綜合實戰(zhàn)——使用jQuery實現(xiàn)攜程網(wǎng)站特效任務(wù)名稱綜合實戰(zhàn)——使用jQuery實現(xiàn)攜程網(wǎng)站特效課時4項目性質(zhì)□演示性□驗證性□設(shè)計性√綜合性授課班級授課日期授課地點教學(xué)目標知識目標1.了解網(wǎng)站特效和需求。2.了解網(wǎng)站制作的常用知識點。3.掌握網(wǎng)站特效的實現(xiàn)方式。能力目標1.能夠熟練使用jQuery制作網(wǎng)站特效。2.能夠熟練使用jQuery的API方法。素質(zhì)目標1.培養(yǎng)學(xué)生綜合應(yīng)用的能力。2.培養(yǎng)學(xué)生舉一反三的能力。教學(xué)內(nèi)容1.任務(wù)描述2.任務(wù)展示與實現(xiàn)（1）使用jQuery制作網(wǎng)站特效（2）使用jQuery的API方法來進行操作（2）學(xué)生動手操作3.教師講解本任務(wù)涉及的知識點4.任務(wù)小結(jié)教學(xué)重點1.網(wǎng)站特效和需求2.JQuery的API操作方法3.編寫jQuery代碼教學(xué)難點1.使用jQuery制作網(wǎng)站特效教學(xué)準備1.裝有jQuery的電腦2.教學(xué)課件PPT3.教材：《jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）》劉剛?cè)嗣襦]電出版社作業(yè)設(shè)計1．使用jQuery實現(xiàn)攜程網(wǎng)站特效教學(xué)過程教學(xué)內(nèi)容與過程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）做好課前“5分鐘”教學(xué)管理（多媒體、實訓(xùn)室），做好上課前的各項準備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計劃、教案等），吸引學(xué)生注意力?！菊n前說明】本章主要介紹了網(wǎng)站特效和需求，網(wǎng)站制作的常用知識點，網(wǎng)站特效的實現(xiàn)方式等知識點。其中重點介紹了jQuery的API在實際項目中的使用?！灸康摹渴箤W(xué)生從了解本單元的學(xué)習(xí)目標、學(xué)習(xí)重點、考評方式等方面明確學(xué)習(xí)本單元知識的要求和目標。一、網(wǎng)站特效選取一些常用的、有代表性的特效，比如注冊表單校驗、60s倒計時、登錄兩種方式切換選擇、導(dǎo)航菜單、海報輪播、菜單懸浮、圖片放大等，介紹使用jQuery來實現(xiàn)這些通用功能的方法，以加深讀者對使用jQuery的理解。特效需求網(wǎng)站注冊表單布局設(shè)計、倒計時交互設(shè)計、網(wǎng)站登錄布局與交互設(shè)計、導(dǎo)航菜單設(shè)計、海報輪播效果設(shè)計、頁簽切換效果設(shè)計、左右滑動效果設(shè)計、手風(fēng)琴效果設(shè)計、圖片放大縮小效果制作。關(guān)鍵知識點（1）控制頁面元素顯示與隱藏$('#div1').show();$('#div1').hide();（2）頁面元素添加樣式phone.css('borderColor','#67a1e2');（3）頁面顯示文本內(nèi)容prompt1.text("手機號格式不正確");（4）輸入框光標聚焦事件phone.focus(function(){})（5）輸入框光標離開事件pwd.blur(function(){})（6）設(shè)置定時任務(wù)setTimeout(function(){settime(obj)},1000)（7）元素查找eq相等事件$(".tab-box>div").eq(_index).show().siblings().hide();$("#login1-2label").eq(_index).addClass("ons").siblings().removeClass("ons");（8）mouseover鼠標指針懸浮事件$(".xc_d1_1_1li").mouseover(function(){var_index=$(this).index();$(".tab-box>div").eq(_index).show().siblings().hide();});（9）元素添加樣式和移出樣式$(this).addClass("l_hover"); //指向li添加樣式$(this).removeClass("l_hover"); //指向li刪除樣式（10）元素點擊事件$li.click(function(){});綜合實例：使用jQuery實現(xiàn)攜程網(wǎng)站特效在實際應(yīng)用中，我們經(jīng)常會制作網(wǎng)站各種特效，來實現(xiàn)動態(tài)效果，提高用戶體驗，本實例實現(xiàn)攜程網(wǎng)站特效功能，具體要求如下。理解網(wǎng)站特效需求。掌握網(wǎng)站特效實現(xiàn)的關(guān)鍵知識點。實現(xiàn)網(wǎng)站特效。通過學(xué)習(xí)，學(xué)生能夠掌握Ajax技術(shù)的基本概念、安裝方式、jQuery中的Ajax應(yīng)用、Ajax的全集數(shù)據(jù)方法。本節(jié)課主要運用案例教學(xué)法，通過對jQuery中的