jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 教案-教學(xué)設(shè)計(jì) 第3章 jQuery實(shí)現(xiàn)頁(yè)面交互（上）

博學(xué)谷——讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效PAGE12PAGE6《jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程》教學(xué)設(shè)計(jì)課程名稱：授課年級(jí)：授課學(xué)期：教師姓名：年月課題名稱第3章jQuery實(shí)現(xiàn)頁(yè)面交互（上）計(jì)劃課時(shí)8課時(shí)教學(xué)引入在網(wǎng)頁(yè)開發(fā)中,開發(fā)具有交互效果的頁(yè)面可以提升用戶的使用體驗(yàn),增強(qiáng)頁(yè)面的可用性可視性和吸引力。jQuery為開發(fā)者提供了許多便捷的方法，使得頁(yè)面交互效果的開發(fā)更加簡(jiǎn)單和高效。本章將講解如何使用jQuery實(shí)現(xiàn)頁(yè)面交互。教學(xué)目標(biāo)使學(xué)生掌握元素class屬性操作，能夠靈活應(yīng)用操作元素class屬性的方法使學(xué)生掌握元素過(guò)濾操作，能夠靈活應(yīng)用元素過(guò)濾方法使學(xué)生掌握瀏覽器事件，能夠靈活應(yīng)用常用的瀏覽器事件使學(xué)生掌握元素位置操作，能夠靈活應(yīng)用元素位置操作方法使學(xué)生掌握f(shuō)adeTo()方法的使用方法，能夠使用fadeTo()方法調(diào)整元素的不透明度使學(xué)生掌握元素內(nèi)容操作，能夠靈活應(yīng)用元素內(nèi)容操作的方法使學(xué)生掌握元素追加操作，能夠靈活應(yīng)用元素追加操作的方法使學(xué)生掌握Tab欄切換的實(shí)現(xiàn)方法，能夠完成Tab欄切換的開發(fā)使學(xué)生掌握返回頁(yè)面頂部的實(shí)現(xiàn)方法，能夠完成返回頁(yè)面頂部的開發(fā)使學(xué)生掌握高亮顯示圖像的實(shí)現(xiàn)方法，能夠完成高亮顯示圖像的開發(fā)使學(xué)生掌握留言板的實(shí)現(xiàn)方法，能夠完成留言板的開發(fā)教學(xué)重點(diǎn)元素class屬性操作元素過(guò)濾操作瀏覽器事件元素位置操作fadeTo()方法元素內(nèi)容操作元素追加操作教學(xué)難點(diǎn)元素過(guò)濾操作元素追加操作教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過(guò)程第一課時(shí)（元素class屬性操作、元素過(guò)濾操作、任務(wù)3.1Tab欄切換）一、復(fù)習(xí)鞏固教師通過(guò)上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過(guò)需求引入的方式導(dǎo)入新課某在線教育公司正在開發(fā)一個(gè)IT教育網(wǎng)站，在開發(fā)過(guò)程中，需要實(shí)現(xiàn)Tab欄切換的頁(yè)面交互效果，當(dāng)用戶單擊Tab欄中的選項(xiàng)卡時(shí)，顯示選項(xiàng)卡對(duì)應(yīng)的內(nèi)容。其中，Tab欄中的選項(xiàng)卡為學(xué)科名稱，主要包括Java、大數(shù)據(jù)、Python、Web前端、Android、C/C++、PHP。本節(jié)課將學(xué)習(xí)元素class屬性操作、元素過(guò)濾操作，并開發(fā)一個(gè)Tab欄切換效果。三、新課講解知識(shí)點(diǎn)1-元素class屬性操作教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解元素class屬性操作。元素class屬性操作的使用場(chǎng)景。列舉jQuery中操作元素class屬性的方法。addClass()removeClass()hasClass()toggleClass()通過(guò)代碼演示元素class屬性操作的方法的使用方法。知識(shí)點(diǎn)2-元素過(guò)濾操作教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解元素過(guò)濾操作。元素過(guò)濾操作的使用場(chǎng)景。列舉jQuery中常用的元素過(guò)濾方法。eq()filter()is()has()slice()first()last()以filter()方法為例，演示如何在該方法中接收函數(shù)fn作為參數(shù)。知識(shí)點(diǎn)3-任務(wù)3.1Tab欄切換教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解任務(wù)3.1Tab欄切換。四、歸納總結(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)的掌握情況，對(duì)代碼的熟練程度。上機(jī)：（考察知識(shí)點(diǎn)為元素class屬性操作、元素過(guò)濾操作、任務(wù)3.1Tab欄切換）形式：?jiǎn)为?dú)完成具體要求：開發(fā)一個(gè)Tab欄切換的頁(yè)面交互效果，當(dāng)用戶單擊Tab欄中的選項(xiàng)卡時(shí)，能夠顯示選項(xiàng)卡對(duì)應(yīng)的內(nèi)容。Tab欄中的選項(xiàng)卡為學(xué)科名稱，主要包括Java、大數(shù)據(jù)、Python、Web前端、Android、C/C++、PHP。第三課時(shí)（瀏覽器事件、元素位置操作、任務(wù)3.2返回頁(yè)面頂部）一、復(fù)習(xí)鞏固教師通過(guò)上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過(guò)需求引入的方式導(dǎo)入新課在網(wǎng)頁(yè)開發(fā)中，當(dāng)頁(yè)面需要顯示的內(nèi)容較多時(shí)，通常會(huì)設(shè)計(jì)返回頁(yè)面頂部的功能，該功能可以方便用戶快速回到頁(yè)面的頂部，從而使用戶更加輕松地瀏覽網(wǎng)頁(yè)。前端開發(fā)實(shí)習(xí)生小超發(fā)現(xiàn)他們團(tuán)隊(duì)中的某個(gè)項(xiàng)目頁(yè)面很長(zhǎng)，經(jīng)常需要上下滾動(dòng)，操作起來(lái)比較煩瑣，于是小超提出了項(xiàng)目頁(yè)面的優(yōu)化建議：在頁(yè)面右下角提供一個(gè)用于返回頁(yè)面頂部的超鏈接，當(dāng)向下滾動(dòng)頁(yè)面時(shí)，該超鏈接就會(huì)顯示，單擊該超鏈接即可立即返回頁(yè)面頂部。本節(jié)課將講解瀏覽器事件、元素位置操作，并開發(fā)一個(gè)返回頁(yè)面頂部的效果。三、新課講解知識(shí)點(diǎn)1-瀏覽器事件教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解瀏覽器事件。瀏覽器事件的使用場(chǎng)景。列舉常用的瀏覽器事件。scrollresize以resize事件為例，演示瀏覽器事件的使用方法。知識(shí)點(diǎn)2-元素位置操作教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解元素位置操作。列舉常用的元素位置操作方法。offsetscrollTopscrollLeft以scrollTop()方法和scrollLeft()方法為例，演示演示如何獲取和設(shè)置元素相對(duì)滾動(dòng)條頂部和左部的位置。知識(shí)點(diǎn)3-任務(wù)3.2返回頁(yè)面頂部教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解任務(wù)3.2返回頁(yè)面頂部。四、歸納總結(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)為瀏覽器事件、元素位置操作、任務(wù)3.2返回頁(yè)面頂部）形式：?jiǎn)为?dú)完成具體要求：開發(fā)一個(gè)返回頁(yè)面頂部的功能，在頁(yè)面右下角提供一個(gè)用于返回頁(yè)面頂部的超鏈接，當(dāng)向下滾動(dòng)頁(yè)面時(shí)，該超鏈接就會(huì)顯示。第五課時(shí)（fadeTo()方法、任務(wù)3.3高亮顯示圖像）一、復(fù)習(xí)鞏固教師通過(guò)上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過(guò)需求引入的方式導(dǎo)入新課為了提高學(xué)生的環(huán)保意識(shí)，倡導(dǎo)學(xué)生能夠積極參與到環(huán)境保護(hù)中，某高校計(jì)劃在學(xué)校官網(wǎng)中增加一個(gè)校園環(huán)保頁(yè)面。在校園環(huán)保頁(yè)面的開發(fā)過(guò)程中，負(fù)責(zé)人提出了要求：設(shè)計(jì)一個(gè)顯示垃圾分類圖像的區(qū)域，該區(qū)域能夠同時(shí)顯示可回收物圖像、有害垃圾圖像、廚余垃圾圖像和其他垃圾圖像；當(dāng)鼠標(biāo)指針移入某張圖像時(shí)，其他圖像半透明顯示，從而使鼠標(biāo)指針移人的圖像高亮顯示。本節(jié)課將學(xué)習(xí)fadeTo()方法，并開發(fā)一個(gè)高亮顯示圖像的效果。三、新課講解知識(shí)點(diǎn)1-fadeTo()方法教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解fadeTo()方法。fadeTo()方法的作用。介紹fadeTo()方法的語(yǔ)法格式。通過(guò)代碼演示fadeTo()方法的使用方法。知識(shí)點(diǎn)2-任務(wù)3.3高亮顯示圖像教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解任務(wù)3.3高亮顯示圖像。四、歸納總結(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)為fadeTo()方法、任務(wù)3.3高亮顯示圖像）形式：?jiǎn)为?dú)完成具體要求：設(shè)計(jì)一個(gè)能夠展示垃圾分類的圖像區(qū)域，該區(qū)域能夠同時(shí)顯示可回收物圖像、有害垃圾圖像、廚余垃圾圖像和其他垃圾圖像。當(dāng)鼠標(biāo)指針移入某張圖像時(shí)，其他圖像半透明顯示，從而使鼠標(biāo)指針移入的圖像高亮顯示。第七課時(shí)（元素內(nèi)容操作、元素追加操作、任務(wù)3.4留言板）一、復(fù)習(xí)鞏固教師通過(guò)上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過(guò)直接引入的方式導(dǎo)入新課在社區(qū)、博客等網(wǎng)站中，留言板功能被廣泛應(yīng)用。用戶通過(guò)留言板可以分享個(gè)人觀點(diǎn)和意見、提出問(wèn)題、回答疑問(wèn)等。這種交互性的功能可以使用戶社區(qū)更活躍，提升用戶的參與感。職場(chǎng)新人李明負(fù)責(zé)公司的前端頁(yè)面開發(fā)工作，最近公司承接了一個(gè)公共服務(wù)機(jī)構(gòu)的網(wǎng)站開發(fā)項(xiàng)目。這個(gè)網(wǎng)站旨在提供優(yōu)質(zhì)的公共服務(wù),讓用戶不僅能夠輕松地訪問(wèn)和獲取所需信息還可以在網(wǎng)站中留言。項(xiàng)目經(jīng)理安排李明為該網(wǎng)站開發(fā)留言板功能。本節(jié)課將講解元素內(nèi)容操作、元素追加操作，并開發(fā)一個(gè)留言板功能。三、新課講解知識(shí)點(diǎn)1-元素內(nèi)容操作教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解元素內(nèi)容操作。元素內(nèi)容操作的使用場(chǎng)景。列舉jQuery中元素內(nèi)容操作的方法。html()text()val()通過(guò)代碼演示元素內(nèi)容操作的方法的使用。知識(shí)點(diǎn)2-元素追加操作教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解元素追加操作。元素追加操作的使用場(chǎng)景。列舉常用的元素追加方法。append()prepend()appendTo()prependTo()after()before()insertAfter()insertBefore()知識(shí)點(diǎn)3-任務(wù)3.4留言板教師通過(guò)PPT結(jié)合實(shí)際操作的方式講解任務(wù)3.4留言板。四、歸納總結(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ì)本章中需