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

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