jQuery前端開發(fā)任務驅動教程 教案-教學設計 第2章 jQuery實現(xiàn)多樣化菜單

博學谷——讓IT教學更簡單，讓IT學習更有效PAGE12PAGE6《jQuery前端開發(fā)任務驅動教程》教學設計課程名稱：授課年級：授課學期：教師姓名：年月課題名稱第2章jQuery實現(xiàn)多樣化菜單計劃課時8課時教學引入菜單是網(wǎng)站和應用程序的重要組成部分，可以有效地呈現(xiàn)網(wǎng)站和應用程序的信息結構合理地設計菜單的層次結構和分類方式，可以清晰地展示不同頁面或功能模塊之間的關系幫助用戶了解網(wǎng)站的整體布局，讓用戶快速地訪問不同的頁面，降低操作難度，提升用戶的使用體驗。本章將詳細講解如何使用jQuery實現(xiàn)多樣化菜單。教學目標使學生掌握顯示和隱藏元素的方法，能夠使用顯示和隱藏元素的方法實現(xiàn)頁面特效使學生掌握查找元素的方法，能夠靈活應用查找元素的方法查找頁面元素使學生掌握元素索引的獲取方法，能夠使用index()方法獲取元素索引使學生掌握利用索引取出元素的方法，能夠使用eq()方法從元素集中取出指定索引的元素使學生掌握停止動畫的方法，能夠靈活應用stop()方法停止元素的動畫效果使學生掌握下拉菜單的實現(xiàn)方法，能夠完成下拉菜單的開發(fā)使學生掌握折疊式菜單的實現(xiàn)方法，能夠完成折疊式菜單的開發(fā)使學生掌握熱賣展示菜單的實現(xiàn)方法，能夠完成熱賣展示菜單的開發(fā)使學生掌握左進左出導航菜單的實現(xiàn)方法，能夠完成左進左出導航菜單的開發(fā)教學重點顯示和隱藏元素的方法查找元素的方法獲取元素索引根據(jù)索引取出元素停止動畫的方法教學難點查找元素的方法任務2.2折疊式菜單任務2.4左進左出導航菜單教學方式課堂教學以PPT講授為主，并結合多媒體進行教學教學過程第一課時（顯示和隱藏元素的方法、查找元素方法、任務2.1下拉菜單）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課為了進一步推廣傳統(tǒng)文化，某傳統(tǒng)文化研究院正在打造一個傳統(tǒng)文化精品展示網(wǎng)站，該網(wǎng)站將為專家、學者、傳統(tǒng)文化愛好者等提供一個學習和交流傳統(tǒng)文化的平臺。為了提升用戶體驗，網(wǎng)站的產(chǎn)品經(jīng)理建議使用下拉菜單的形式來優(yōu)化導航欄，實現(xiàn)當用戶將鼠標指針移入一級菜單項后，在一級菜單項的下方展示二級菜單項，讓用戶獲得更多的選擇。本節(jié)課將學習顯示和隱藏元素的方法、查找元素方法，并開發(fā)一個下拉菜單。三、新課講解知識點1-顯示和隱藏元素的方法教師通過PPT的方式講解顯示和隱藏元素的方法。顯示和隱藏元素的方法的使用場景。列舉jQuery中用于顯示和隱藏元素的方法。show()hide()toggle()知識點2-查找元素方法教師通過PPT結合實際操作的方式講解查找元素方法。元素查找方法的使用場景。列舉jQuery中常用的查找元素的方法。children()find()parents()parent()siblings()next()prev()通過代碼演示查找元素方法的使用方法。知識點3-任務2.1下拉菜單教師通過PPT結合實際操作的方式講解任務2.1下拉菜單。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預習內(nèi)容。第二課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。上機：（考察知識點為顯示和隱藏元素的方法、查找元素方法、任務2.1下拉菜單）形式：單獨完成具體要求：當用戶將鼠標指針移入一級菜單項后，在一級菜單項的下方展示二級菜單項。一級菜單項以及相應的二級菜單項具體如下。傳統(tǒng)工藝：剪紙、陶瓷、刺繡。傳統(tǒng)戲?。壕﹦?、川劇、粵劇。傳統(tǒng)節(jié)日：春節(jié)、端午節(jié)、重陽節(jié)。傳統(tǒng)樂器：二胡、琵琶、編鐘。第三課時（任務2.2折疊式菜單）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過情景引入的方式導入新課為了更好地管理公司各部門，某科技公司將要對辦公系統(tǒng)進行升級，以便用戶可以快速查看各部門和子部門。項目經(jīng)理提出，需要在部門管理頁面中開發(fā)一個折疊式菜單，當用戶單擊一級菜單項時，對應的二級菜單項能夠展開。本節(jié)課將開發(fā)一個折疊式菜單。三、新課講解知識點1-任務2.2折疊式菜單教師通過PPT結合實際操作的方式講解任務2.2折疊式菜單。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預習內(nèi)容。第四課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習考察學生對知識點的掌握情況。上機：（考察知識點為任務2.2折疊式菜單）形式：單獨完成具體要求：開發(fā)一個折疊式菜單，當用戶單擊一級菜單項時，對應的二級菜單項能夠展開。折疊式菜單的一級菜單項和二級菜單項具體如下。行政部：物資采購部、后勤保障部、行政辦公室。財務部：財務核算部、稅務管理部、薪資管理部。技術部：Java研發(fā)部、Python研發(fā)部、PHP研發(fā)部。市場部：北京事業(yè)部、上海事業(yè)部、深圳事業(yè)部。第五課時（獲取元素索引、根據(jù)索引取出元素、任務2.3熱賣展示菜單）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課某電商公司是一家利用互聯(lián)網(wǎng)技術和電子商務模式進行商品銷售的企業(yè)。為了提供更加便利的購物渠道，該電商公司需要開發(fā)一個新的電商網(wǎng)站。在電商網(wǎng)站的開發(fā)過程中，需要設計一個熱賣展示菜單，該菜單用于展示熱賣的9種商品，并支持快速切換商品。當鼠標指針移動到熱賣展示菜單左側的某個選項上時，右側的圖像區(qū)域顯示對應的商品圖。其中，熱賣的商品包括茶具、文具、毛巾、羽絨服、靴子、耳機、收納盒、吉他和珠寶。本節(jié)課將講解獲取元素索引、根據(jù)索引取出元素，并開發(fā)一個熱賣展示菜單。三、新課講解知識點1-獲取元素索引教師通過PPT結合實際操作的方式講解獲取元素索引。獲取元素索引的使用場景。介紹index()方法的語法格式。通過代碼演示index()方法的使用方法。知識點2-根據(jù)索引取出元素教師通過PPT結合實際操作的方式講解根據(jù)索引取出元素。根據(jù)索引取出元素的使用場景。介紹eq()方法的語法格式。通過代碼演示eq()方法的使用方法。知識點3-任務2.3熱賣展示菜單教師通過PPT結合實際操作的方式講解任務2.3熱賣展示菜單。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預習內(nèi)容。第六課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習考察學生對知識點的掌握情況。上機：（考察知識點為獲取元素索引、根據(jù)索引取出元素、任務2.3熱賣展示菜單）形式：單獨完成具體要求：開發(fā)一個熱賣展示菜單，該菜單用于展示熱賣的9款商品，并支持快速切換商品。當鼠標指針移動到商品菜單左側時，右側的圖像區(qū)域能夠顯示對應的商品圖。熱賣的商品包括茶具、文具、毛巾、羽絨服、靴子、耳機、收納盒、吉他和珠寶。第七課時（停止動畫的方法、任務2.4左進左出導航菜單）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過情景引入的方式導入新課隨著互聯(lián)網(wǎng)和移動技術的快速發(fā)展，外賣行業(yè)呈現(xiàn)出快速增長的趨勢。某外賣企業(yè)為了提高管理效率，決定開發(fā)一個外賣點餐后臺管理系統(tǒng)。在這個項目中，項目經(jīng)理提出需要開發(fā)一個帶有左進左出效果的導航菜單頁面，具體要求是單擊一級菜單項時，一級菜單項下的二級菜單項能夠以從屏幕左側滑人的方式顯示；再次單擊一級菜單項時，二級菜單項能夠以從屏幕左側滑出的方式隱藏，從而實現(xiàn)左進左出導航菜單效果。本節(jié)課將講解停止動畫的方法，并開發(fā)一個左進左出導航菜單。三、新課講解知識點1-停止動畫的方法教師通過PPT結合實際操作的方式講解停止動畫的方法。停止動畫的方法的使用場景。介紹stop()方法的語法格式。以div元素為例，演示使用stop()方法的3種常用方式。知識點2-任務2.4左進左出導航菜單教師通過PPT結合實際操作的方式講解任務2.4左進左出導航菜單。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預習內(nèi)容。第八課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習考察學生對知識點的掌握情況。上機：（考察知識點為停止動畫的方法、任務2.4左進左出導航菜單）形式：單獨完成具體要求