jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 教案-教學(xué)設(shè)計(jì) 第1章 初識(shí)jQuery

博學(xué)谷——讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效PAGE12PAGE2《jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程》教學(xué)設(shè)計(jì)課程名稱：授課年級(jí)：授課學(xué)期：教師姓名：年月課題名稱第1章初識(shí)jQuery計(jì)劃課時(shí)5課時(shí)教學(xué)引入jQuery提供了豐富的方法，使用這些方法可以簡(jiǎn)化JavaScript中常見(jiàn)的操作，如元素操作、事件操作、動(dòng)畫(huà)操作等。使用jQuery可以快速地實(shí)現(xiàn)網(wǎng)頁(yè)和Web應(yīng)用程序中的JavaScript交互效果，減少冗余代碼，解決瀏覽器兼容問(wèn)題。本章將對(duì)下載和引入jQuery以及jQuery的簡(jiǎn)單使用進(jìn)行講解。教學(xué)目標(biāo)使學(xué)生了解什么是jQuery，能夠描述jQuery的特點(diǎn)使學(xué)生掌握VisualStudioCode編輯器的下載和安裝方法，能夠獨(dú)立完成VisualStudioCode編輯器的下載和安裝使學(xué)生熟悉jQuery的主要功能，能夠歸納jQuery的主要功能使學(xué)生掌握$()函數(shù)的使用方法，能夠靈活運(yùn)用$()函數(shù)創(chuàng)建jQuery對(duì)象使學(xué)生掌握jQuery對(duì)象的使用方法，能夠取出jQuery對(duì)象中的元素使學(xué)生掌握選擇器的使用方法，能夠靈活應(yīng)用選擇器獲取元素使學(xué)生掌握on()方法的使用方法，能夠使用on()方法實(shí)現(xiàn)事件的注冊(cè)使學(xué)生掌握鼠標(biāo)事件，能夠注冊(cè)鼠標(biāo)事件使學(xué)生掌握css()方法的使用方法，能夠使用css()方法設(shè)置或獲取元素樣式使學(xué)生掌握jQuery的下載和引入，能夠獨(dú)立完成jQuery的下載和引入使學(xué)生掌握jQuery的簡(jiǎn)單使用，能夠使用jQuery實(shí)現(xiàn)單擊按鈕改變?cè)娋湮谋绢伾男Ч虒W(xué)重點(diǎn)$()函數(shù)jQuery對(duì)象選擇器on()方法鼠標(biāo)事件css()方法教學(xué)難點(diǎn)無(wú)教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過(guò)程第一課時(shí)（什么是jQuery、VisualStudioCode編輯器、任務(wù)1.1下載和引入jQuery）一、通過(guò)需求引入的方式導(dǎo)入新課在某科技公司的網(wǎng)頁(yè)開(kāi)發(fā)中，為了確保跨瀏覽器兼容性，并提高開(kāi)發(fā)效率、簡(jiǎn)化DOM操作，該科技公司的前端開(kāi)發(fā)實(shí)習(xí)生小洋需要使用jQuery進(jìn)行開(kāi)發(fā)。在正式開(kāi)發(fā)網(wǎng)頁(yè)之前，小洋需要先從jQuery官方網(wǎng)站下載jQuery，并將其引人項(xiàng)目。本節(jié)課將學(xué)習(xí)什么是jQuery和VisualStudioCode編輯器，并講解如何下載和引入jQuery。二、新課講解知識(shí)點(diǎn)1-什么是jQuery教師通過(guò)PPT的方式講解什么是jQuery。什么是jQuery及其設(shè)計(jì)宗旨。jQuery的6個(gè)特點(diǎn)。jQuery1.x、jQuery2.x和jQuery3.x的區(qū)別。知識(shí)點(diǎn)2-VisualStudioCode編輯器教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解VisualStudioCode編輯器。VisualStudioCode編輯器的特點(diǎn)。下載和安裝VSCode編輯器。安裝中文語(yǔ)言擴(kuò)展。安裝LiveServer擴(kuò)展。VSCode編輯器的簡(jiǎn)單使用。知識(shí)點(diǎn)3-任務(wù)1.1下載和引入jQuery教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解下載和引入jQuery。三、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過(guò)測(cè)試題的方式引導(dǎo)學(xué)生解答問(wèn)題并給予指導(dǎo)。四、布置作業(yè)教師通過(guò)高校教輔平臺(tái)（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第二課時(shí)（上機(jī)練習(xí)）上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)進(jìn)行練習(xí)，通過(guò)上機(jī)練習(xí)考察學(xué)生對(duì)知識(shí)點(diǎn)的掌握情況。上機(jī)：（考察知識(shí)點(diǎn)為VisualStudioCode編輯器、任務(wù)1.1下載和引入jQuery）形式：?jiǎn)为?dú)完成具體要求：在Chrome瀏覽器中訪問(wèn)jQuery官方網(wǎng)站的下載頁(yè)面，選擇minified版本進(jìn)行下載。創(chuàng)建hello.html文件，在該文件中創(chuàng)建HTML5頁(yè)面并引入jquery-3.6.4.min.js文件。第三、四課時(shí)（jQuery的主要功能、$()函數(shù)、jQuery對(duì)象、選擇器、on()方法、鼠標(biāo)事件、css()方法、任務(wù)1.2jQuery的簡(jiǎn)單使用）一、復(fù)習(xí)鞏固教師通過(guò)上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過(guò)直接引入的方式導(dǎo)入新課上一節(jié)課已經(jīng)講解了jQuery的下載和引入，下面這節(jié)課將對(duì)jQuery的簡(jiǎn)單使用進(jìn)行講解。本節(jié)課將學(xué)習(xí)jQuery的主要功能、$()函數(shù)、jQuery對(duì)象、選擇器、on()方法、鼠標(biāo)事件和css()方法，并運(yùn)用jQuery設(shè)計(jì)一個(gè)古詩(shī)詞里的“一帶一路”網(wǎng)頁(yè)。三、新課講解知識(shí)點(diǎn)1-jQuery的主要功能教師通過(guò)PPT講解jQuery的主要功能。選擇元素。列舉jQuery中常用的選擇器?；具x擇器層次選擇器篩選選擇器屬性選擇器子元素選擇器表單選擇器元素操作。列舉jQuery中常用的元素操作。元素遍歷操作元素內(nèi)容操作元素樣式操作元素屬性操作元素查找操作元素過(guò)濾操作元素追加操作元素替換操作元素刪除操作元素復(fù)制操作事件操作jQuery簡(jiǎn)化了JavaScript中的事件操作，通過(guò)調(diào)用事件操作方法即可實(shí)現(xiàn)事件的處理。jQuery中常用的事件操作方法有on()、off()、trigger()、triggerHandler()等。動(dòng)畫(huà)操作列舉jQuery中常用的動(dòng)畫(huà)類型。顯示和隱藏滑動(dòng)淡入和淡出自定義動(dòng)畫(huà)停止動(dòng)畫(huà)Ajax操作Ajax用于實(shí)現(xiàn)瀏覽器與服務(wù)器進(jìn)行異步數(shù)據(jù)交互的功能。jQuery提供了一些方法用于簡(jiǎn)化JavaScript中的Ajax操作，常用的Ajax操作方法有$.ajax()、$.get()、$.post()等。知識(shí)點(diǎn)2-$()函數(shù)教師通過(guò)PPT講解$()函數(shù)。介紹$()函數(shù)及其參數(shù)。通過(guò)代碼演示$()函數(shù)的使用。知識(shí)點(diǎn)3-jQuery對(duì)象教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解jQuery對(duì)象。介紹jQuery對(duì)象的兩種語(yǔ)法格式。通過(guò)代碼演示jQuery對(duì)象的使用方法。知識(shí)點(diǎn)4-選擇器教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解選擇器。介紹使用jQuery的選擇器獲取元素的語(yǔ)法格式。介紹基本選擇器。列舉jQuery中常用的基本選擇器。#id*.classelementselector1,selector2,…演示基本選擇器的使用方法。介紹層次選擇器。列舉jQuery中常用的層次選擇器。parent>childselectorselector1prev+nextprev~siblings演示層次選擇器的使用方法。知識(shí)點(diǎn)5-on()方法教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解on()方法。介紹為什么需要使用事件以及什么是事件。on()方法注冊(cè)事件的語(yǔ)法格式。對(duì)on()方法中的參數(shù)events、selector、data和handler進(jìn)行解釋。eventsselectordatahandler通過(guò)代碼演示如何使用on()方法注冊(cè)click事件。知識(shí)點(diǎn)6-鼠標(biāo)事件教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解鼠標(biāo)事件。介紹鼠標(biāo)事件的使用場(chǎng)景。列舉一些常用的鼠標(biāo)事件類型。mousemovemouseovermouseoutmouseentermouseleaveclickdblclickmousedownmouseup以click事件和mouseenter事件為例演示鼠標(biāo)事件的使用。知識(shí)點(diǎn)7-css()方法教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解css()方法。介紹css()方法的使用場(chǎng)景。css()方法的具體用法和說(shuō)明。css(propertyName)css(propertyName,value)css(properties)通過(guò)代碼演示如何使用css()方法操作元素的樣式。知識(shí)點(diǎn)8-任務(wù)1.2jQuery的簡(jiǎn)單使用教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解任務(wù)1.2jQuery的簡(jiǎn)單使用。四、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過(guò)測(cè)試題的方式引導(dǎo)學(xué)生解答問(wèn)題并給予指導(dǎo)。五、布置作業(yè)教師通過(guò)高校教輔平臺(tái)（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第五課時(shí)（上機(jī)練習(xí)）上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過(guò)上機(jī)練習(xí)考察學(xué)生對(duì)知識(shí)點(diǎn)的掌握情況。上機(jī)：（考察知識(shí)點(diǎn)為$()函數(shù)、jQuery對(duì)象、選擇器、on()方法、鼠標(biāo)事件、css()方法、任務(wù)1.2jQuery的簡(jiǎn)單使用）形式：?jiǎn)为?dú)完成具體要求