jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）（第2版）-教案 第7、8章 Ajax在jQuery中的應(yīng)用、使用jQuery UI插件

PAGE1PAGE第7章Ajax在jQuery中的應(yīng)用課程名稱jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程項目名稱Ajax在jQuery中的應(yīng)用任務(wù)名稱Ajax在jQuery中的應(yīng)用課時4項目性質(zhì)□演示性□驗證性□設(shè)計性√綜合性授課班級授課日期授課地點教學(xué)目標(biāo)知識目標(biāo)1.了解Ajax技術(shù)、優(yōu)點、缺點。2.了解安裝Web運行環(huán)境。3.了解通過JavaScript應(yīng)用Ajax技術(shù)。4.掌握jQuery中的Ajax應(yīng)用。5.掌握Ajax的全局事件的使用。能力目標(biāo)1.能夠熟練使用jQuery中的Ajax應(yīng)用能力。2.能夠熟練使用jQuery中的Ajax全局事件能力。素質(zhì)目標(biāo)1.培養(yǎng)學(xué)生解決問題的能力。2.培養(yǎng)學(xué)生快速學(xué)習(xí)的能力。教學(xué)內(nèi)容1.任務(wù)描述2.任務(wù)展示與實現(xiàn)（1）對Ajax應(yīng)用進(jìn)行操作（2）在頁面中Ajax全局事件進(jìn)行操作（2）學(xué)生動手操作3.教師講解本任務(wù)涉及的知識點4.任務(wù)小結(jié)教學(xué)重點1.Ajax應(yīng)用的操作方法2.Ajax全局事件的操作方法3.編寫jQuery代碼教學(xué)難點1.使用jQuery操作Ajax應(yīng)用教學(xué)準(zhǔn)備1.裝有jQuery的電腦2.教學(xué)課件PPT3.教材：《jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）》劉剛?cè)嗣襦]電出版社作業(yè)設(shè)計1．使用Ajax實現(xiàn)留言板即時更新教學(xué)過程教學(xué)內(nèi)容與過程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）做好課前“5分鐘”教學(xué)管理（多媒體、實訓(xùn)室），做好上課前的各項準(zhǔn)備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計劃、教案等），吸引學(xué)生注意力?！菊n前說明】本章主要介紹了Ajax的概念、Ajax優(yōu)缺點、Ajax的安裝、Ajax的應(yīng)用，Ajax的全局事件等知識點。其中重點介紹了Ajax的應(yīng)用，包括load()方法、$.get()方法、$.post()方法、$.getScript()方法、$.getJSON()方法等?！灸康摹渴箤W(xué)生從了解本單元的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點、考評方式等方面明確學(xué)習(xí)本單元知識的要求和目標(biāo)。一、Ajax概述Ajax是AsynchronousJavaScriptandXML的縮寫，意思是異步的JavaScript和XML。Ajax并不是一門新的語言或技術(shù)，它是JavaScript、XML、CSS、DOM等多種已有技術(shù)的組合，可以實現(xiàn)客戶端的異步請求操作，從而實現(xiàn)在不需要刷新頁面的情況下與服務(wù)器進(jìn)行通信，減少了用戶的等待時間，減輕了服務(wù)器和帶寬的負(fù)擔(dān)，提供更好的服務(wù)響應(yīng)。二、使用jQuery操作DOM中的元素及對象通過多個案例講解Ajax應(yīng)用的操作方法。jQuery的Ajax工具包封裝有3個層次，分別如下：最底層是Ajax，封裝了基礎(chǔ)Ajax的一些操作，$.ajax()方法就是最底層的方法。第2層是load()、$.get()、$.post()方法。第3層是$.getScript()和$.getJSON()方法。案例：1.使用load()方法載入頁面。（1）首先創(chuàng)建要載入的文檔mofun.html，代碼如下：<div><p>莫凡魔方科技</p><p>莫凡圖書</p><p>jQuery基礎(chǔ)開發(fā)教程</p></div>（2）創(chuàng)建index.html頁面，在頁面上添加按鈕以及id為“l(fā)oadhtml”的<div>元素。代碼如下：<inputtype="button"id="btn"value="載入頁面"/><divid="loadhtml"></div>（3）引入jQuery庫并且在下方編寫jQuery代碼，使用load()方法載入之前創(chuàng)建的mr.html頁面。代碼如下：<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#btn").click(function(){ $("#loadhtml").load("mofun.html");})})</script>綜合實例：使用Ajax實現(xiàn)留言板即時更新在實際應(yīng)用中，我們經(jīng)常會使用到留言板功能，本實例實現(xiàn)留言板即時更新功能，具體要求如下。（1）創(chuàng)建留言頁面，使用戶留言可以異步提交。（2）將用戶提交的留言即時顯示出來。通過學(xué)習(xí)，學(xué)生能夠掌握Ajax技術(shù)的基本概念、安裝方式、jQuery中的Ajax應(yīng)用、Ajax的全局事件方法。本節(jié)課主要運用案例教學(xué)法，通過對jQuery中的Ajax應(yīng)用的深入理解，掌握jQuery中的Ajax應(yīng)用的特點及優(yōu)勢，深入探討jQuery中的Ajax應(yīng)用的編程方法，通過實例的方法加強(qiáng)對jQuery中的Ajax應(yīng)用的掌握，達(dá)到能夠獨立熟練運用jQuery中的Ajax應(yīng)用來解決實際問題的能力。教學(xué)評價方式以小組為單位，以完成案例的質(zhì)量為評價標(biāo)準(zhǔn)，形成任務(wù)驅(qū)動，小組協(xié)作，質(zhì)量與速度并存的課堂評價方式，促進(jìn)學(xué)生的自主、創(chuàng)新學(xué)習(xí)的方式。第8章使用jQueryUI插件課程名稱jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程項目名稱使用jQueryUI插件任務(wù)名稱使用jQueryUI插件課時4項目性質(zhì)□演示性□驗證性□設(shè)計性√綜合性授課班級授課日期授課地點教學(xué)目標(biāo)知識目標(biāo)1.了解jQueryUI工作原理和如何使用。2.了解jQueryUI常用插件的使用。3.了解jQueryUI特效的使用。能力目標(biāo)1.能夠使用jQueryUI插件的能力。2.能夠使用jQueryUI特效的能力。素質(zhì)目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)的能力。2.培養(yǎng)學(xué)生應(yīng)用實踐的能力。教學(xué)內(nèi)容1.任務(wù)描述2.任務(wù)展示與實現(xiàn)（1）使用jQueryUI的常用插件（2）使用jQueryUI的特效（2）學(xué)生動手操作3.教師講解本任務(wù)涉及的知識點4.任務(wù)小結(jié)教學(xué)重點1.jQueryUI的常用插件的使用2.jQueryUI的特效的使用3.編寫jQuery代碼教學(xué)難點1.使用jQueryUI的常用插件教學(xué)準(zhǔn)備1.裝有jQuery的電腦2.教學(xué)課件PPT3.教材：《jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程（慕課版）》劉剛?cè)嗣襦]電出版社作業(yè)設(shè)計1．使用jQuery實現(xiàn)許愿墻教學(xué)過程教學(xué)內(nèi)容與過程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）做好課前“5分鐘”教學(xué)管理（多媒體、實訓(xùn)室），做好上課前的各項準(zhǔn)備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計劃、教案等），吸引學(xué)生注意力。【課前說明】本章主要介紹了jQueryUI的概念、jQueryUI的使用、jQueryUI的工作原理、jQueryUI的常用插件，jQueryUI的特效等知識點。其中重點介紹了jQueryUI的常用插件，包括折疊面板、自動完成、按鈕、日期選擇器、對話框、菜單等?！灸康摹渴箤W(xué)生從了解本單元的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點、考評方式等方面明確學(xué)習(xí)本單元知識的要求和目標(biāo)。一、jQueryUI概述jQueryUI是以jQuery為基礎(chǔ)的開源JavaScript網(wǎng)頁用戶界面代碼庫，它包含底層用戶交互、動畫、特效和可更換主題的可視控件。二、使用jQueryUI中的插件使用多個案例介紹了jQueryUI中的插件。jQueryUI包含了許多維持狀態(tài)的插件（Widget），通常稱為jQueryUI插件，它是專門由jQuery官方維護(hù)的UI方向的插件，主要包括折疊面板（Accordion）、自動完成（Autocomplete）、按鈕（Button）、日期選擇器（Datepicker）、對話框（Dialog）、菜單（Menu）、進(jìn)度條（Progressbar）、滑塊（Slider）、旋轉(zhuǎn)器（Spinner）、標(biāo)簽頁（Tabs）、工具提示框（Tooltip）、復(fù)選框單選按鈕（Checkboxradio）、組件控制組（Controlgroup）、鼠標(biāo)（Mouse）、選擇菜單（Selectmenu）等。案例：本實例分別使用Button元素和類型為submit的input元素制作按鈕。程序開發(fā)步驟如下。（1）新建一個index.html文件，將其放到8-3文件夾中。（2）將jQueryUI文件夾jquery-ui-1.12.1.custom復(fù)制到8-3文件夾中。（3）使用Dreamweaver打開index.html文件，在index.html文件中編寫如下代碼：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><linkrel="stylesheet"href="jquery-ui-1.12.1.custom/jquery-ui.css"/><scriptsrc="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script><scriptsrc="jquery-ui-1.12.1.custom/jquery-ui.js"></script><title>按鈕（Button）的使用</title><script>$(function(){$("input[type=submit],a,button").button().click(function(event){event.preventDefault();});});</script></head><body><button>一個button元素</button><inputtype="submit"value="一個提交按鈕"></body></html>綜合實例：使用jQuery實現(xiàn)許愿墻使用jQuery，并結(jié)合jQueryUI制作一個簡單的許愿墻頁面，運行程序，在網(wǎng)頁中隨機(jī)顯示字條，而且可以通過鼠標(biāo)拖曳改變字條的位置。通過學(xué)習(xí)，學(xué)生能夠掌握jQueryUI技術(shù)的基本概念、安裝方式、jQue