JQuery+Ajxa教案課程設(shè)計

PAGE課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式講授參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、理解Jquery的本質(zhì)及宗旨。2、熟悉Jquery的編碼風(fēng)格。3、使用Jquery實現(xiàn)簡單的顯示隱藏網(wǎng)頁元素效果。技能目標(biāo)：1、熟練掌握J(rèn)query頁面加載事件2、熟悉Jquery的編碼風(fēng)格。3、使用Jquery實現(xiàn)簡單的顯示隱藏網(wǎng)頁元素效果。素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery開發(fā)環(huán)境，編寫第一個Jquery程序。教學(xué)重點與難點教學(xué)重點熟練掌握J(rèn)query頁面加載事件，熟悉Jquery編碼風(fēng)格教學(xué)難點Jquery實現(xiàn)網(wǎng)頁元素的顯示隱藏效果。學(xué)情分析本次課程為Jquery課程的第一個課，需要給學(xué)生揭開Jquery神秘的面紗，讓學(xué)生知道Jquery就是一個JS庫，理解使用Jquery的作用，熟悉Jquery的編碼風(fēng)格，主要需要讓學(xué)生體會到Jquery相對原生JS比較，可以書寫更少的代碼完成功能。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery相關(guān)的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、理解Jquery的本質(zhì)及宗旨。2、熟悉Jquery的編碼風(fēng)格。3、使用Jquery實現(xiàn)簡單的顯示隱藏網(wǎng)頁元素效果。課后：布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章，讓學(xué)生學(xué)習(xí)Jquery中的選擇器和篩選器有哪些。教學(xué)反思本次課程為第一次課，主要起到的作用是引導(dǎo)作用，讓學(xué)生真正體會到Jquery的魅力即可，不需要太多復(fù)雜的案例，要讓學(xué)生對后面的Jquery學(xué)習(xí)充滿興趣即可，課程案例需要簡單，讓學(xué)生用最少的代碼完成實際功能，增強學(xué)生的成就感和求知欲。教學(xué)設(shè)計課程名稱使用Jquery優(yōu)化Web頁面授課對象授課章節(jié)第1章Jquery框架簡介第1-3節(jié)Jquery簡介，Jquery第一個程序，Jquery實現(xiàn)顯示隱藏元素。本次課學(xué)時數(shù)2學(xué)時教學(xué)目的理解Jquery的本質(zhì)及宗旨。熟悉Jquery的編碼風(fēng)格。使用Jquery實現(xiàn)簡單的顯示隱藏網(wǎng)頁元素效果。教學(xué)分析本次課程為Jquery課程的第一個課，需要給學(xué)生揭開Jquery神秘的面紗，讓學(xué)生知道Jquery就是一個JS庫，理解使用Jquery的作用，熟悉Jquery的編碼風(fēng)格，主要需要讓學(xué)生體會到Jquery相對原生JS比較，可以書寫更少的代碼完成功能。教學(xué)重點與難點重點熟練掌握J(rèn)query頁面加載事件，熟悉Jquery編碼風(fēng)格難點Jquery實現(xiàn)網(wǎng)頁元素的顯示隱藏效果。教學(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論○文字材料●提問●音像材料其他：現(xiàn)場編碼演示教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配課程導(dǎo)入（1）展示Jquery制作Tab選項卡效果，同時展示Jquery代碼（2）展示Jquery制作幻燈片效果，及其實現(xiàn)代碼（3）提問學(xué)生，如果不使用Jquery而直接使用原生JS去實現(xiàn)效果，是否需要更多更復(fù)雜的代碼才行。通過案例的展示及案例對應(yīng)源代碼的展示，讓學(xué)生體會到使用JQ是可以讓代碼變少，提高編程開發(fā)效率的，讓學(xué)生理解JQ的作用。5分鐘1.介紹課程的授課計劃、考核標(biāo)準(zhǔn)（1）平時成績占30%，包括出勤、作業(yè)、提問，課堂項目（作業(yè)）、綜合項目完成情況等。（2）考試成績占70%。2.提問為什么JS已經(jīng)可以編寫網(wǎng)頁腳本了，為什么還需要類似Jquery這樣的庫。3.提問Jquery和JavaScript有關(guān)系嗎。4.根據(jù)學(xué)生對提問的回答，介紹JavaScript相關(guān)基本概念和特點。（1）jQuery是一個JavaScript庫，jQuery極大地簡化了JavaScript編程。（2）jQuery的宗旨：Writeless,domore。（3）學(xué)習(xí)JQuery需要具備的基礎(chǔ)知識：【1】HTML; 【2】CSS;【3】JavaScript介紹整門課程的授課即考核計劃并通過提問和介紹大致了解使用Jquery的作用和好處。15分鐘（1）告知學(xué)生，Jquery仍然屬于網(wǎng)頁腳本，那么開發(fā)工具沒有什么要求，之前大家寫HTML,Javascript習(xí)慣用什么開發(fā)工具編寫，現(xiàn)在仍然可以使用之前的工具，并告知，在課堂上老師選擇Hbuilder進行開發(fā)。（2）打開Jquery的官網(wǎng)，以及在百度搜索一些資源網(wǎng)站，告知學(xué)生想使用Jquery必須下載Jquery相關(guān)的庫文件才能進行開發(fā)。讓學(xué)生清楚在什么工具下編寫Jquery代碼以及Jquery的下載10分鐘20分鐘10分鐘10分鐘10分鐘5分鐘思考題或預(yù)習(xí)題或作業(yè)題預(yù)習(xí)作業(yè)：預(yù)習(xí)Jquery的封裝操作和上課自動顯示隱藏效果的實現(xiàn)布置預(yù)習(xí)任務(wù)，讓學(xué)生提前預(yù)習(xí)下一章內(nèi)容。5分鐘參考資料2.菜鳥教程/3.jQuery和Ajax實戰(zhàn)教程課后小結(jié)本次課程為第一次課，主要起到的作用是引導(dǎo)作用，讓學(xué)生真正體會到Jquery的魅力即可，不需要太多復(fù)雜的案例，要讓學(xué)生對后面的Jquery學(xué)習(xí)充滿興趣即可，課程案例需要簡單，讓學(xué)生用最少的代碼完成實際功能，增強學(xué)生的成就感和求知欲。課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式上機參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、理解Jquery的本質(zhì)及宗旨。2、熟悉Jquery的編碼風(fēng)格。3、使用Jquery實現(xiàn)簡單的顯示隱藏網(wǎng)頁元素效果。技能目標(biāo)：1、熟練掌握J(rèn)query頁面加載事件2、熟悉Jquery的編碼風(fēng)格。3、使用Jquery實現(xiàn)簡單的顯示隱藏網(wǎng)頁元素效果。素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery開發(fā)環(huán)境，編寫第一個Jquery程序。教學(xué)重點與難點教學(xué)重點熟練掌握J(rèn)query頁面加載事件，熟悉Jquery編碼風(fēng)格教學(xué)難點Jquery實現(xiàn)網(wǎng)頁元素的顯示隱藏效果。學(xué)情分析本次課程為Jquery課程的第一個課，需要給學(xué)生揭開Jquery神秘的面紗，讓學(xué)生知道Jquery就是一個JS庫，理解使用Jquery的作用，熟悉Jquery的編碼風(fēng)格，主要需要讓學(xué)生體會到Jquery相對原生JS比較，可以書寫更少的代碼完成功能。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery相關(guān)的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、理解Jquery的本質(zhì)及宗旨。2、熟悉Jquery的編碼風(fēng)格。3、使用Jquery實現(xiàn)簡單的顯示隱藏網(wǎng)頁元素效果。課后：布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章，讓學(xué)生學(xué)習(xí)Jquery中的選擇器和篩選器有哪些。教學(xué)反思本次課程為第一次課，主要起到的作用是引導(dǎo)作用，讓學(xué)生真正體會到Jquery的魅力即可，不需要太多復(fù)雜的案例，要讓學(xué)生對后面的Jquery學(xué)習(xí)充滿興趣即可，課程案例需要簡單，讓學(xué)生用最少的代碼完成實際功能，增強學(xué)生的成就感和求知欲。教學(xué)設(shè)計課程名稱使用Jquery優(yōu)化Web頁面授課對象授課章節(jié)第1章Jquery框架簡介第1-3節(jié)Jquery簡介，Jquery第一個程序，Jquery實現(xiàn)顯示隱藏元素。本次課學(xué)時數(shù)2學(xué)時教學(xué)目的理解Jquery的本質(zhì)及宗旨。熟悉Jquery的編碼風(fēng)格。使用Jquery實現(xiàn)簡單的顯示隱藏網(wǎng)頁元素效果。教學(xué)分析本次課程為Jquery課程的第一個課，需要給學(xué)生揭開Jquery神秘的面紗，讓學(xué)生知道Jquery就是一個JS庫，理解使用Jquery的作用，熟悉Jquery的編碼風(fēng)格，主要需要讓學(xué)生體會到Jquery相對原生JS比較，可以書寫更少的代碼完成功能。教學(xué)重點與難點重點熟練掌握J(rèn)query頁面加載事件，熟悉Jquery編碼風(fēng)格難點Jquery實現(xiàn)網(wǎng)頁元素的顯示隱藏效果。教學(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論○文字材料●提問●音像材料其他：現(xiàn)場編碼演示教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配課程導(dǎo)入回顧上節(jié)課所講的內(nèi)容，并講解本次課需要講解的內(nèi)容回顧課程10分鐘20分鐘10分鐘30分鐘課程內(nèi)容總結(jié)將本次課的課程內(nèi)容，通過提問回憶的方式列出來，進行復(fù)習(xí)：（1）$(document).ready()的使用（2）show,hide,toggle顯示隱藏（3）toggleClass與toggle的使用復(fù)習(xí)課程內(nèi)容，加深印象，讓學(xué)生了解自己的學(xué)習(xí)情況，根據(jù)自身情況課下自主復(fù)習(xí)。15分鐘思考題或預(yù)習(xí)題或作業(yè)題預(yù)習(xí)作業(yè)：預(yù)習(xí)下一章內(nèi)容：Jquery的選擇器和篩選器，并回答如下問題：（1）Jquery中選擇器有什么作用。（2）Jquery中最基本的，使用頻率最高的選擇器有哪幾個。布置預(yù)習(xí)任務(wù)，讓學(xué)生提前預(yù)習(xí)下一章內(nèi)容。5分鐘參考資料2.菜鳥教程/3.jQuery和Ajax實戰(zhàn)教程課后小結(jié)本次課程為第一次課，主要起到的作用是引導(dǎo)作用，讓學(xué)生真正體會到Jquery的魅力即可，不需要太多復(fù)雜的案例，要讓學(xué)生對后面的Jquery學(xué)習(xí)充滿興趣即可，課程案例需要簡單，讓學(xué)生用最少的代碼完成實際功能，增強學(xué)生的成就感和求知欲。課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式講授參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、基本的查閱API文檔的能力。2、掌握基本選擇器的使用3、掌握層次選擇器的使用4、掌握基本過濾選擇器的使用技能目標(biāo)：1、基本的查閱API文檔的能力。2、掌握基本選擇器的使用3、掌握層次選擇器的使用4、掌握基本過濾選擇器的使用素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery選擇器的使用。教學(xué)重點與難點教學(xué)重點基本選擇器和層次選擇器。教學(xué)難點過濾性選擇器。學(xué)情分析本次課程內(nèi)容主要學(xué)習(xí)Jquery選擇器中的一部分，學(xué)習(xí)內(nèi)容相對比較枯燥，并且知識點難度不大，內(nèi)容較多，很難記憶，基于本次課程的特點，應(yīng)下發(fā)API文檔，進行翻轉(zhuǎn)課堂，給學(xué)生分多個階段布置任務(wù)，讓學(xué)生根據(jù)API文檔分階段完成任務(wù)，提升學(xué)生根據(jù)資料解決問題的能力。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery相關(guān)的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、基本的查閱API文檔的能力。2、掌握基本選擇器的使用3、掌握層次選擇器的使用4、掌握基本過濾選擇器的使用課后：布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章，讓學(xué)生學(xué)習(xí)Jquery中其他的選擇器和篩選器。教學(xué)反思本次課程大部分時間都是由老師提供資料，由學(xué)生自主學(xué)習(xí)來完成任務(wù)，老師起到輔助學(xué)習(xí)的作用，通過這次課程鍛煉了學(xué)生自主學(xué)習(xí)的能力，并慢慢讓學(xué)生適應(yīng)此種學(xué)習(xí)方式。教學(xué)設(shè)計課程名稱使用Jquery優(yōu)化Web頁面授課對象授課章節(jié)第2章Jquery選擇器和篩選器第1-3節(jié)基本選擇器，層次選擇器，基本過濾選擇器。本次課學(xué)時數(shù)2學(xué)時教學(xué)目的1、基本的查閱API文檔的能力。2、掌握基本選擇器的使用3、掌握層次選擇器的使用4、掌握基本過濾選擇器的使用教學(xué)分析本次課程內(nèi)容主要學(xué)習(xí)Jquery選擇器中的一部分，學(xué)習(xí)內(nèi)容相對比較枯燥，并且知識點難度不大，內(nèi)容較多，很難記憶，基于本次課程的特點，應(yīng)下發(fā)API文檔，進行翻轉(zhuǎn)課堂，給學(xué)生分多個階段布置任務(wù)，讓學(xué)生根據(jù)API文檔分階段完成任務(wù)，提升學(xué)生根據(jù)資料解決問題的能力。教學(xué)重點與難點重點基本選擇器和層次選擇器。難點過濾性選擇器。教學(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論○文字材料●提問○音像材料其他：翻轉(zhuǎn)課堂教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配預(yù)習(xí)檢查通過提問的方式，進行預(yù)習(xí)檢查Jquery中選擇器有什么作用。通過提問的方式檢查學(xué)生的預(yù)習(xí)情況10分鐘本章任務(wù):（1）根據(jù)提供的多個網(wǎng)頁HTML代碼，使用Jquery選擇器選擇其中需要選擇的元素，并且設(shè)置背景變色。學(xué)習(xí)目標(biāo)：（1）掌握基本選擇器選擇網(wǎng)頁元素。（2）掌握層次選擇器選擇網(wǎng)頁元素。（3）掌握基本過濾選擇器選擇網(wǎng)頁元素。介紹本次課程任務(wù)及課程目標(biāo)，讓學(xué)生明確本次課程學(xué)習(xí)完成后必須掌握的知識點和必須完成的任務(wù)。10分鐘（1）基本選擇器介紹【1】ID選擇器（#id）：根據(jù)給定的ID匹配一個元素。【2】class選擇器（.class）：根據(jù)給定的css類名匹配元素。【3】標(biāo)簽選擇器（element）：根據(jù)給定的元素標(biāo)簽名匹配所有元素。【4】*選擇器：匹配所有元素。【5】合并選擇器（selector1,selector2，selectorN）：將每一個選擇器匹配到的元素合并后一起返回。(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇網(wǎng)頁元素變換背景顏色。讓學(xué)生自己動手，掌握基本選擇器的使用，鍛煉實際動手能力25分鐘（1）層次選擇器介紹【1】后代選擇器（ancestordescendant）：在給定的祖先元素下匹配所有的后代元素。【2】子選擇器（parent>child）：在給定的父元素下匹配所有的子元素。【3】相鄰元素選擇器（prev+next）：匹配所有緊接在prev元素后的next元素【4】同輩元素選擇器（prev~siblings）：匹配prev元素之后的所有siblings元素。(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇網(wǎng)頁元素變換背景顏色。讓學(xué)生參考Jquery選擇器的API文檔，通過自己實驗掌握層次選擇器的使用。20分鐘(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇網(wǎng)頁元素變換背景顏色25分鐘思考題或預(yù)習(xí)題或作業(yè)題預(yù)習(xí)作業(yè)：預(yù)習(xí)選擇器的其他知識點布置預(yù)習(xí)作業(yè)讓學(xué)生對下章節(jié)的其它選擇器有一定的了解5分鐘參考資料2.菜鳥教程/3.jQuery和Ajax實戰(zhàn)教程課后小結(jié)本次課程大部分時間都是由老師提供資料，由學(xué)生自主學(xué)習(xí)來完成任務(wù)，老師起到輔助學(xué)習(xí)的作用，通過這次課程鍛煉了學(xué)生自主學(xué)習(xí)的能力，并慢慢讓學(xué)生適應(yīng)此種學(xué)習(xí)方式。課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式上機參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、掌握內(nèi)容過濾選擇器的使用2、掌握可見性選擇器的作用3、掌握屬性過濾選擇器的作用技能目標(biāo)：1、掌握內(nèi)容過濾選擇器的使用2、掌握可見性選擇器的作用3、掌握屬性過濾選擇器的作用素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery選擇器的使用。教學(xué)重點與難點教學(xué)重點基本選擇器和層次選擇器。教學(xué)難點過濾性選擇器。學(xué)情分析本次課程內(nèi)容主要學(xué)習(xí)Jquery選擇器中的一部分，學(xué)習(xí)內(nèi)容相對比較枯燥，并且知識點難度不大，內(nèi)容較多，很難記憶，基于本次課程的特點，應(yīng)下發(fā)API文檔，進行翻轉(zhuǎn)課堂，給學(xué)生分多個階段布置任務(wù)，讓學(xué)生根據(jù)API文檔分階段完成任務(wù)，提升學(xué)生根據(jù)資料解決問題的能力。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery相關(guān)的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、掌握內(nèi)容過濾選擇器的使用2、掌握可見性選擇器的作用3、掌握屬性過濾選擇器的作用課后：布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章，讓學(xué)生學(xué)習(xí)Jquery中其他的選擇器和篩選器。教學(xué)反思本次課程大部分時間都是由老師提供資料，由學(xué)生自主學(xué)習(xí)來完成任務(wù)，老師起到輔助學(xué)習(xí)的作用，通過這次課程鍛煉了學(xué)生自主學(xué)習(xí)的能力，并慢慢讓學(xué)生適應(yīng)此種學(xué)習(xí)方式。教學(xué)設(shè)計課程名稱使用Jquery優(yōu)化Web頁面授課對象授課章節(jié)第2章Jquery選擇器和篩選器第4-6節(jié)內(nèi)容過濾選擇器，可見性選擇器，屬性過濾選擇器。本次課學(xué)時數(shù)2學(xué)時教學(xué)目的1、掌握內(nèi)容過濾選擇器的使用2、掌握可見性選擇器的作用3、掌握屬性過濾選擇器的作用教學(xué)分析本次課程內(nèi)容主要學(xué)習(xí)Jquery選擇器中的一部分，學(xué)習(xí)內(nèi)容相對比較枯燥，并且知識點難度不大，內(nèi)容較多，很難記憶，基于本次課程的特點，應(yīng)下發(fā)API文檔，進行翻轉(zhuǎn)課堂，給學(xué)生分多個階段布置任務(wù)，讓學(xué)生根據(jù)API文檔分階段完成任務(wù)，提升學(xué)生根據(jù)資料解決問題的能力。教學(xué)重點與難點重點基本選擇器和層次選擇器。難點過濾性選擇器。教學(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論○文字材料●提問○音像材料其他：翻轉(zhuǎn)課堂教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配預(yù)習(xí)檢查通過提問的方式，進行預(yù)習(xí)檢查Jquery中最基本的，使用頻率最高的選擇器有哪幾個。通過提問的方式檢查學(xué)生的預(yù)習(xí)情況5分鐘(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇網(wǎng)頁元素變換背景顏色15分鐘(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇網(wǎng)頁元素變換背景顏色20分鐘(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇網(wǎng)頁元素變換背景顏色10分鐘(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇網(wǎng)頁元素變換背景顏色15分鐘課程內(nèi)容總結(jié)將課程內(nèi)容知識點進行列舉，總結(jié)。（1）內(nèi)容過濾選擇器（2）可見性過濾選擇器（3）屬性過濾選擇器復(fù)習(xí)課程內(nèi)容，加深印象，讓學(xué)生了解自己的學(xué)習(xí)情況，根據(jù)自身情況課下自主復(fù)習(xí)。20分鐘思考題或預(yù)習(xí)題或作業(yè)題預(yù)習(xí)作業(yè)：預(yù)習(xí)選擇器的其他知識點布置預(yù)習(xí)作業(yè)讓學(xué)生對下章節(jié)的其它選擇器有一定的了解5分鐘參考資料2.菜鳥教程/3.jQuery和Ajax實戰(zhàn)教程課后小結(jié)本次課程大部分時間都是由老師提供資料，由學(xué)生自主學(xué)習(xí)來完成任務(wù)，老師起到輔助學(xué)習(xí)的作用，通過這次課程鍛煉了學(xué)生自主學(xué)習(xí)的能力，并慢慢讓學(xué)生適應(yīng)此種學(xué)習(xí)方式。課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式講授參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、掌握子元素過濾選擇器的使用2、掌握表單選擇器的使用3、掌握表單對象屬性選擇器的使用技能目標(biāo)：1、掌握子元素過濾選擇器的使用2、掌握表單選擇器的使用3、掌握表單對象屬性選擇器的使用素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery選擇器的使用。教學(xué)重點與難點教學(xué)重點表單相關(guān)選擇器的使用。教學(xué)難點篩選器的使用學(xué)情分析本次課程在上一次課程的基礎(chǔ)上繼續(xù)學(xué)習(xí)其他的選擇器和過濾器，本次課程內(nèi)容和上一次課程內(nèi)容特點相似，內(nèi)容多，但難度小，可以直接對照官方的API文檔進行有效的對知識點掌握，本地課程仍然以翻轉(zhuǎn)課堂，學(xué)生通過老師下發(fā)的任務(wù)，和對應(yīng)的學(xué)習(xí)資料進行學(xué)習(xí)。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery選擇器的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、掌握子元素過濾選擇器的使用2、掌握表單選擇器的使用3、掌握表單對象屬性選擇器的使用課后：布置預(yù)習(xí)任務(wù)，讓學(xué)生預(yù)習(xí)選擇器的其他知識點。教學(xué)反思本次課程加上一次課程一起已經(jīng)將Jquery最核心的知識點全部都過了一次，但由于知識點較多，很難全部記憶，需要告知學(xué)生沒有記憶出全部沒有關(guān)系，但需要有通過API文檔查閱馬上找到相關(guān)內(nèi)容，實現(xiàn)即查即用，為后面的課程作為基礎(chǔ)。教學(xué)設(shè)計課程名稱使用Jquery優(yōu)化Web頁面授課對象授課章節(jié)第2章Jquery選擇器和篩選器第7-9節(jié)子元素過濾選擇器，表單選擇器，表單對象屬性選擇器本次課學(xué)時數(shù)2學(xué)時教學(xué)目的1、掌握子元素過濾選擇器的使用2、掌握表單選擇器的使用3、掌握表單對象屬性選擇器的使用教學(xué)分析本次課程在上一次課程的基礎(chǔ)上繼續(xù)學(xué)習(xí)其他的選擇器和過濾器，本次課程內(nèi)容和上一次課程內(nèi)容特點相似，內(nèi)容多，但難度小，可以直接對照官方的API文檔進行有效的對知識點掌握，本地課程仍然以翻轉(zhuǎn)課堂，學(xué)生通過老師下發(fā)的任務(wù)，和對應(yīng)的學(xué)習(xí)資料進行學(xué)習(xí)。教學(xué)重點與難點重點表單相關(guān)選擇器的使用。難點篩選器的使用。教學(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論○文字材料●提問○音像材料其他：翻轉(zhuǎn)課堂教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配預(yù)習(xí)檢查通過提問的方式，進行預(yù)習(xí)檢查說明和表單相關(guān)的選擇器有哪一些。通過提問的方式檢查學(xué)生的預(yù)習(xí)情況10分鐘本章任務(wù):根據(jù)提供的多個網(wǎng)頁HTML代碼，使用Jquery選擇器選擇其中需要選擇的元素，并且設(shè)置背景變色。學(xué)習(xí)目標(biāo)：（1）掌握子元素過濾選擇器的使用（2）掌握表單選擇器的使用（3）掌握表單對象屬性選擇器的使用介紹本次課程任務(wù)及課程目標(biāo)，讓學(xué)生明確本次課程學(xué)習(xí)完成后必須掌握的知識點和必須完成的任務(wù)。10分鐘（1）子元素過濾選擇器介紹【1】:first-child：匹配所給選擇器(:之前的選擇器)的第一個子元素。【2】:last-child：匹配最后一個子元素。【3】:nth-child：匹配其父元素下的第N個子或奇偶元素。【4】:only-child：如果某個元素是父元素中唯一的子元素，那將會被匹配?！?】:first-of-type：結(jié)構(gòu)化偽類，匹配E的父元素的第一個E類型的孩子?！?】:last-of-type：結(jié)構(gòu)化偽類，匹配E的父元素的最后一個E類型的孩子?！?】:nth-of-type：選擇同屬于一個父元素之下，并且標(biāo)簽名相同的子元素中的第n個。【8】:only-of-type：選擇所有沒有兄弟元素，且具有相同的元素名稱的元素。(2)針對如下的列表，使用不同的子元素過濾選擇器，進行選擇，觀察其效果，理解各子元素選擇器的作用。在此列表中分別用不同的選擇器，進行選擇觀察效果讓學(xué)生自己動手，掌握子元素過濾選擇器的使用，鍛煉實際動手能力20分鐘（1）下列列表中，分別使用first-child和firstoftype進行選擇，查看其效果。（2）根據(jù)最終效果，給學(xué)生解釋child和of-type的區(qū)別之處。讓學(xué)生理解child和of-type使用中的區(qū)別。10分鐘(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇表單元素，并設(shè)置邊框顏色或者給出彈窗提示。20分鐘(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇網(wǎng)頁元素變換背景顏色15分鐘思考題或預(yù)習(xí)題或作業(yè)題課后作業(yè)：預(yù)習(xí)過濾篩選器和查找篩選器的使用布置預(yù)習(xí)作業(yè)讓學(xué)生對下章節(jié)的其它選擇器有一定的了解5分鐘參考資料2.菜鳥教程/3.jQuery和Ajax實戰(zhàn)教程課后小結(jié)本次課程加上一次課程一起已經(jīng)將Jquery最核心的知識點全部都過了一次，但由于知識點較多，很難全部記憶，需要告知學(xué)生沒有記憶出全部沒有關(guān)系，但需要有通過API文檔查閱馬上找到相關(guān)內(nèi)容，實現(xiàn)即查即用，為后面的課程作為基礎(chǔ)。課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式上機參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、掌握過濾篩選器的使用2、掌握查找篩選器的使用技能目標(biāo)：1、掌握過濾篩選器的使用2、掌握查找篩選器的使用素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery選擇器的使用。教學(xué)重點與難點教學(xué)重點過濾篩選器的使用。教學(xué)難點查找篩選器的使用學(xué)情分析本次課程在上一次課程的基礎(chǔ)上繼續(xù)學(xué)習(xí)其他的選擇器和過濾器，本次課程內(nèi)容和上一次課程內(nèi)容特點相似，內(nèi)容多，但難度小，可以直接對照官方的API文檔進行有效的對知識點掌握，本地課程仍然以翻轉(zhuǎn)課堂，學(xué)生通過老師下發(fā)的任務(wù)，和對應(yīng)的學(xué)習(xí)資料進行學(xué)習(xí)。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery選擇器的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、掌握過濾篩選器的使用2、掌握查找篩選器的使用課后：布置預(yù)習(xí)任務(wù)，讓學(xué)生預(yù)習(xí)選擇器的其他知識點。教學(xué)反思本次課程加上一次課程一起已經(jīng)將Jquery最核心的知識點全部都過了一次，但由于知識點較多，很難全部記憶，需要告知學(xué)生沒有記憶出全部沒有關(guān)系，但需要有通過API文檔查閱馬上找到相關(guān)內(nèi)容，實現(xiàn)即查即用，為后面的課程作為基礎(chǔ)。教學(xué)設(shè)計課程名稱使用Jquery優(yōu)化Web頁面授課對象授課章節(jié)第2章Jquery選擇器和篩選器第9-11節(jié)過濾篩選，查找篩選。本次課學(xué)時數(shù)2學(xué)時教學(xué)目的1、掌握過濾篩選器的使用2、掌握查找篩選器的使用教學(xué)分析本次課程在上一次課程的基礎(chǔ)上繼續(xù)學(xué)習(xí)其他的選擇器和過濾器，本次課程內(nèi)容和上一次課程內(nèi)容特點相似，內(nèi)容多，但難度小，可以直接對照官方的API文檔進行有效的對知識點掌握，本地課程仍然以翻轉(zhuǎn)課堂，學(xué)生通過老師下發(fā)的任務(wù)，和對應(yīng)的學(xué)習(xí)資料進行學(xué)習(xí)。教學(xué)重點與難點重點過濾篩選器的使用。難點查找篩選器的使用。教學(xué)方法與手段●課堂講授●講解例題●電子課件○案例分析○小組討論○文字材料●提問○音像材料其他：翻轉(zhuǎn)課堂教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配本章任務(wù):根據(jù)提供的網(wǎng)頁素材，可以使用篩選器快速選擇網(wǎng)頁元素，并且設(shè)置背景變色學(xué)習(xí)目標(biāo)：（1）掌握過濾篩選器的使用（2）掌握查找篩選器的使用介紹本次課程任務(wù)及課程目標(biāo)，讓學(xué)生明確本次課程學(xué)習(xí)完成后必須掌握的知識點和必須完成的任務(wù)。10分鐘(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求使用過濾篩選器篩選出網(wǎng)頁元素并使其背景變色25分鐘(2)下發(fā)老師預(yù)先準(zhǔn)備好的HTML文件，參考API文檔讓學(xué)生根據(jù)頁面要求選擇網(wǎng)頁元素變換背景顏色25分鐘課程內(nèi)容總結(jié)將課程內(nèi)容知識點進行列舉，總結(jié)。（1）子元素過濾選擇器的使用（2）表單選擇器的使用（3）表單對象屬性選擇器的使用（4）過濾篩選器的使用（5）查找篩選器的使用復(fù)習(xí)課程內(nèi)容，加深印象，讓學(xué)生了解自己的學(xué)習(xí)情況，根據(jù)自身情況課下自主復(fù)習(xí)。20分鐘思考題或預(yù)習(xí)題或作業(yè)題課后作業(yè)：利用選擇器、篩選器、定時器等知識點，制作幻燈片廣告中的索引自動切換效果。預(yù)習(xí)作業(yè)：回憶原生JavaScript中如何獲取網(wǎng)頁對象，同時預(yù)習(xí)Jquery中如何獲取網(wǎng)頁對象，兩種方式獲取的網(wǎng)頁對象是否是一致的，兩種對象如何進行相互轉(zhuǎn)換。布置預(yù)習(xí)作業(yè)讓學(xué)生對下章節(jié)的其它選擇器有一定的了解10分鐘參考資料2.菜鳥教程/3.jQuery和Ajax實戰(zhàn)教程課后小結(jié)本次課程加上一次課程一起已經(jīng)將Jquery最核心的知識點全部都過了一次，但由于知識點較多，很難全部記憶，需要告知學(xué)生沒有記憶出全部沒有關(guān)系，但需要有通過API文檔查閱馬上找到相關(guān)內(nèi)容，實現(xiàn)即查即用，為后面的課程作為基礎(chǔ)。課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式講授參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、掌握和理解JS獲取網(wǎng)頁對象和Jquery獲取網(wǎng)頁對象的區(qū)別2、掌握J(rèn)query對象和JS對象的相互轉(zhuǎn)換3、掌握this關(guān)鍵字使用技能目標(biāo)：1、掌握和理解JS獲取網(wǎng)頁對象和Jquery獲取網(wǎng)頁對象的區(qū)別2、掌握J(rèn)query對象和JS對象的相互轉(zhuǎn)換3、掌握this關(guān)鍵字使用素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery選擇器的使用。教學(xué)重點與難點教學(xué)重點掌握this關(guān)鍵字使用、掌握使用Jquery獲取網(wǎng)頁內(nèi)容教學(xué)難點理解并掌握J(rèn)query對象和JS對象的相互轉(zhuǎn)換。學(xué)情分析本次課程學(xué)生已經(jīng)有了選擇器和篩選器的基礎(chǔ)，也基本會使用API文檔查閱解決最基本的語法問題，在此基礎(chǔ)上學(xué)習(xí)Jquery操作DOM對象，以一系列的案例，引導(dǎo)學(xué)生思考思路，靈活的運用所學(xué)知識點完成實際案例效果。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery選擇器的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、掌握和理解JS獲取網(wǎng)頁對象和Jquery獲取網(wǎng)頁對象的區(qū)別2、掌握J(rèn)query對象和JS對象的相互轉(zhuǎn)換3、掌握this關(guān)鍵字使用課后：布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章，讓學(xué)生學(xué)習(xí)Jquery中添加和刪除樣式。教學(xué)反思本次課程主要學(xué)習(xí)Jquery對DOM對象一些常規(guī)操作，需要讓學(xué)生理解原生DOM對象和Jquery獲取的對象是不一樣的，以及之間的轉(zhuǎn)換。對于Jquery獲取對象之后的一些操作，需要讓學(xué)生嚴(yán)格完成課后作業(yè)，鞏固所學(xué)習(xí)的知識點。教學(xué)設(shè)計課程名稱JQuery+Ajxa應(yīng)用開發(fā)授課對象授課章節(jié)第3章Jquery操作DOM第1-3節(jié)JS獲取DOM元素和Jquery獲取DOM元素的區(qū)別，Jquery對象和JS對象的相互轉(zhuǎn)換，this關(guān)鍵字使用本次課學(xué)時數(shù)2學(xué)時教學(xué)目的1、掌握和理解JS獲取網(wǎng)頁對象和Jquery獲取網(wǎng)頁對象的區(qū)別2、掌握J(rèn)query對象和JS對象的相互轉(zhuǎn)換3、掌握this關(guān)鍵字使用教學(xué)分析本次課程學(xué)生已經(jīng)有了選擇器和篩選器的基礎(chǔ)，也基本會使用API文檔查閱解決最基本的語法問題，在此基礎(chǔ)上學(xué)習(xí)Jquery操作DOM對象，以一系列的案例，引導(dǎo)學(xué)生思考思路，靈活的運用所學(xué)知識點完成實際案例效果。教學(xué)重點與難點重點掌握this關(guān)鍵字使用、掌握使用Jquery獲取網(wǎng)頁內(nèi)容難點理解并掌握J(rèn)query對象和JS對象的相互轉(zhuǎn)換。教學(xué)方法與手段●課堂講授●講解例題●電子課件●案例分析○小組討論○文字材料●提問○音像材料其他：現(xiàn)場編碼演示教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配預(yù)習(xí)檢查通過提問的方式，進行預(yù)習(xí)檢查（1）回憶原生JavaScript中如何獲取網(wǎng)頁對象，（2）Jquery中如何獲取網(wǎng)頁對象（3）兩種方式獲取的網(wǎng)頁對象是否相同（4）兩種對象如何進行相互轉(zhuǎn)換。通過提問的方式檢查學(xué)生的預(yù)習(xí)情況10分鐘本章任務(wù):讓學(xué)生可以通過Jquery獲取元素之后，可以對DOM節(jié)點進行操作，例如修改樣式，修改屬性等操作。學(xué)習(xí)目標(biāo)：（1）掌握和理解JS獲取網(wǎng)頁對象和Jquery獲取網(wǎng)頁對象的區(qū)別（2）掌握J(rèn)query對象和JS對象的相互轉(zhuǎn)換（3）掌握this關(guān)鍵字使用介紹本次課程任務(wù)及課程目標(biāo)，讓學(xué)生明確本次課程學(xué)習(xí)完成后必須掌握的知識點和必須完成的任務(wù)。10分鐘(1)分別使用js和jquery兩種語法獲取網(wǎng)頁元素varobj=document.getElementById("one");var$obj=$("#two");將兩個對象使用控制臺打印，判斷兩者是否是一個對象。（2）得到結(jié)論，使用JS獲取的是DOM對象，而使用Jquery獲取的是數(shù)組集合。讓學(xué)生理解js和jquery獲取的元素是不一樣的10分鐘（1）提問學(xué)生JQuery對象和DOM對象是否可以相互轉(zhuǎn)換？（2）給出結(jié)論，JQuery對象和DOM對象是可以轉(zhuǎn)換的。【1】DOM對象轉(zhuǎn)換Jquery對象直接使用$處理即可【2】jquery對象轉(zhuǎn)DOM對象直接使用[0]，或者使用get(0)的方式即可。（3）完成如下任務(wù)，第一個按鈕獲取DOM對象，轉(zhuǎn)換成Jquery對象后打印div容器的內(nèi)容，第二個按鈕反過來獲取Jquery對象，轉(zhuǎn)換成DOM對象后打印div容器的內(nèi)容。讓學(xué)生掌握J(rèn)query對象和DOM對象之間的相互轉(zhuǎn)換方法。20分鐘（1）打開之前編寫的網(wǎng)頁，實現(xiàn)點擊標(biāo)題部分可以讓標(biāo)題文本顏色變成紅色。（2）通過現(xiàn)場編碼之后發(fā)現(xiàn)，使點擊的元素設(shè)置成紅色的代碼需要重復(fù)編寫三次，此時引出如果使用this關(guān)鍵字，我們只需要編寫一次代碼即可實現(xiàn)功能。讓學(xué)生理解并掌握this關(guān)鍵字的使用10分鐘（1）下發(fā)如下網(wǎng)頁代碼給學(xué)生，布置任務(wù)點擊段落部分，將段落部分的文本編程綠色，斜體，加粗。（2）引導(dǎo)學(xué)生根據(jù)上一個環(huán)節(jié)老師演示的思路進行完成此任務(wù)。讓學(xué)生自己實驗動手，加深對this關(guān)鍵字的理解，并加強學(xué)生動手能力。20分鐘思考題或預(yù)習(xí)題或作業(yè)題課后作業(yè)：預(yù)習(xí)作業(yè)：（1）Jquery添加和刪除樣式（2）Jquery獲取網(wǎng)頁內(nèi)容。（3）Jquery的attr函數(shù)修改元素屬性。布置課后作業(yè)讓學(xué)生可以復(fù)習(xí)今天課程學(xué)習(xí)的知識點10分鐘參考資料2.菜鳥教程/3.jQuery和Ajax實戰(zhàn)教程課后小結(jié)本次課程主要學(xué)習(xí)Jquery對DOM對象一些常規(guī)操作，需要讓學(xué)生理解原生DOM對象和Jquery獲取的對象是不一樣的，以及之間的轉(zhuǎn)換。對于Jquery獲取對象之后的一些操作，需要讓學(xué)生嚴(yán)格完成課后作業(yè)，鞏固所學(xué)習(xí)的知識點。課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式上機參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、掌握使用Jquery添加和刪除樣式2、掌握使用Jquery獲取網(wǎng)頁內(nèi)容3、掌握使用Jquery的attr函數(shù)修改元素屬性技能目標(biāo)：1、掌握使用Jquery添加和刪除樣式2、掌握使用Jquery獲取網(wǎng)頁內(nèi)容3、掌握使用Jquery的attr函數(shù)修改元素屬性素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery選擇器的使用。教學(xué)重點與難點教學(xué)重點握使用Jquery獲取網(wǎng)頁內(nèi)容教學(xué)難點掌握this關(guān)鍵字使用學(xué)情分析本次課程學(xué)生已經(jīng)有了選擇器和篩選器的基礎(chǔ)，也基本會使用API文檔查閱解決最基本的語法問題，在此基礎(chǔ)上學(xué)習(xí)Jquery操作DOM對象，以一系列的案例，引導(dǎo)學(xué)生思考思路，靈活的運用所學(xué)知識點完成實際案例效果。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery選擇器的介紹，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、掌握使用Jquery添加和刪除樣式2、掌握使用Jquery獲取網(wǎng)頁內(nèi)容3、掌握使用Jquery的attr函數(shù)修改元素屬性課后：布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章，讓學(xué)生學(xué)習(xí)Jquery中DOM的其他操作。教學(xué)反思本次課程主要學(xué)習(xí)Jquery對DOM對象一些常規(guī)操作，需要讓學(xué)生理解原生DOM對象和Jquery獲取的對象是不一樣的，以及之間的轉(zhuǎn)換。對于Jquery獲取對象之后的一些操作，需要讓學(xué)生嚴(yán)格完成課后作業(yè)，鞏固所學(xué)習(xí)的知識點。教學(xué)設(shè)計課程名稱JQuery+Ajxa應(yīng)用開發(fā)授課對象授課章節(jié)第3章Jquery操作DOM第4-6節(jié)添加和刪除樣式，設(shè)置和獲取網(wǎng)頁內(nèi)容,使用attr修改元素屬性。本次課學(xué)時數(shù)2學(xué)時教學(xué)目的1、掌握使用Jquery添加和刪除樣式2、掌握使用Jquery獲取網(wǎng)頁內(nèi)容3、掌握使用Jquery的attr函數(shù)修改元素屬性教學(xué)分析本次課程學(xué)生已經(jīng)有了選擇器和篩選器的基礎(chǔ)，也基本會使用API文檔查閱解決最基本的語法問題，在此基礎(chǔ)上學(xué)習(xí)Jquery操作DOM對象，以一系列的案例，引導(dǎo)學(xué)生思考思路，靈活的運用所學(xué)知識點完成實際案例效果。教學(xué)重點與難點重點掌握使用Jquery添加和刪除樣式、掌握使用Jquery獲取網(wǎng)頁內(nèi)容難點掌握使用Jquery的attr函數(shù)修改元素屬性。教學(xué)方法與手段●課堂講授●講解例題●電子課件●案例分析○小組討論○文字材料●提問○音像材料其他：現(xiàn)場編碼演示教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配預(yù)習(xí)檢查通過提問的方式，進行預(yù)習(xí)檢查（1）Jquery添加和刪除樣式語法怎么寫（2）如何Jquery的attr函數(shù)修改元素屬性通過提問的方式檢查學(xué)生的預(yù)習(xí)情況10分鐘本章任務(wù):讓學(xué)生可以通過Jquery獲取元素之后，可以對DOM節(jié)點進行操作，例如修改樣式，修改屬性等操作。學(xué)習(xí)目標(biāo)：（1）掌握使用Jquery添加和刪除樣式（2）掌握使用Jquery獲取網(wǎng)頁內(nèi)容（3）掌握使用Jquery的attr函數(shù)修改元素屬性介紹本次課程任務(wù)及課程目標(biāo)，讓學(xué)生明確本次課程學(xué)習(xí)完成后必須掌握的知識點和必須完成的任務(wù)。10分鐘（1）介紹addClass和removeClass的作用。（2）使用addClass和removeClass實現(xiàn)功能，點擊第一個按鈕給段落添加樣式，點擊第二個樣式移除添加上去的樣式。addClass和removeClass來進行樣式的添加和移除5分鐘15分鐘10分鐘10分鐘10分鐘10分鐘課程內(nèi)容總結(jié)將課程內(nèi)容知識點進行列舉，總結(jié)。（1）JS獲取網(wǎng)頁對象和Jquery獲取網(wǎng)頁對象的區(qū)別（2）Jquery對象和JS對象的相互轉(zhuǎn)換（3）this關(guān)鍵字使用（4）Jquery添加和刪除樣式（5）Jquery獲取網(wǎng)頁內(nèi)容（6）Jquery的attr函數(shù)修改元素屬性復(fù)習(xí)課程內(nèi)容，加深印象，讓學(xué)生了解自己的學(xué)習(xí)情況，根據(jù)自身情況課下自主復(fù)習(xí)。5分鐘思考題或預(yù)習(xí)題或作業(yè)題課后作業(yè)：使用Jquery模擬placeholder的效果，即在郵箱的輸入框處，默認(rèn)有灰色的提示文本，鼠標(biāo)點擊上去之后灰色提示文本小時，鼠標(biāo)離開之后，如果文本框為空，則重新顯示提示微博呢，鼠標(biāo)離開之后如果文本框里面不為空，則不作任何操作，直接顯示用戶輸入的文本內(nèi)容。預(yù)習(xí)作業(yè)：（1）Jquery在元素內(nèi)部添加子節(jié)點（2）Jquery插入同輩節(jié)點。（3）節(jié)點的替換，刪除，復(fù)制，遍歷。布置課后作業(yè)讓學(xué)生可以復(fù)習(xí)今天課程學(xué)習(xí)的知識點，布置預(yù)習(xí)作業(yè)讓學(xué)生對下章節(jié)的其它選擇器有一定的了解5分鐘參考資料2.菜鳥教程/3.jQuery和Ajax實戰(zhàn)教程課后小結(jié)本次課程主要學(xué)習(xí)Jquery對DOM對象一些常規(guī)操作，需要讓學(xué)生理解原生DOM對象和Jquery獲取的對象是不一樣的，以及之間的轉(zhuǎn)換。對于Jquery獲取對象之后的一些操作，需要讓學(xué)生嚴(yán)格完成課后作業(yè)，鞏固所學(xué)習(xí)的知識點。課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式講授參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、掌握元素內(nèi)部添加子節(jié)點的操作2、掌握元素外部插入同輩子節(jié)點的操作3、掌握替換節(jié)點的操作技能目標(biāo)：1、掌握元素內(nèi)部添加子節(jié)點的操作2、掌握元素外部插入同輩子節(jié)點的操作3、掌握替換節(jié)點的操作素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery節(jié)點的相關(guān)操作。教學(xué)重點與難點教學(xué)重點元素內(nèi)部添加子節(jié)點的操作、節(jié)點替換的操作教學(xué)難點元素外部插入同輩子節(jié)點的操作學(xué)情分析本次課程主要講解網(wǎng)頁元素節(jié)點的插入，替換，刪除，復(fù)制遍歷等操作，單獨的操作在API文檔都有介紹，語法相對也很簡單，重點在于細(xì)節(jié)的控制，例如刪除節(jié)點后下標(biāo)的變化，以及將這些操作進行靈活的運用到各種場景中，需要和學(xué)生一起思考，并做引導(dǎo)性提示，激發(fā)學(xué)生積極思考，靈活運用的能力。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery元素操作的案例，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、掌握元素內(nèi)部添加子節(jié)點的操作2、掌握元素外部插入同輩子節(jié)點的操作3、掌握替換節(jié)點的操作課后：布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章，讓學(xué)生學(xué)習(xí)Jquery中的節(jié)點刪除、復(fù)制和遍歷。教學(xué)反思本次課程主要學(xué)習(xí)了節(jié)點的創(chuàng)建，替換等操作，單獨掌握這些節(jié)點操作不難，但是需要將這些操作和前面和后面的課程內(nèi)容結(jié)合使用，靈活運用才能滿足現(xiàn)實開發(fā)的需要，需要在后期課程中不斷引導(dǎo)學(xué)生進行思考和靈活運用。教學(xué)設(shè)計課程名稱JQuery+Ajxa應(yīng)用開發(fā)授課對象授課章節(jié)第3章Jquery操作DOM第7-9節(jié)元素內(nèi)部添加子節(jié)點，元素外部插入同輩子節(jié)點，替換節(jié)點本次課學(xué)時數(shù)2學(xué)時教學(xué)目的1、掌握元素內(nèi)部添加子節(jié)點的操作2、掌握元素外部插入同輩子節(jié)點的操作3、掌握替換節(jié)點的操作教學(xué)分析本次課程主要講解網(wǎng)頁元素節(jié)點的插入，替換等操作，單獨的操作在API文檔都有介紹，語法相對也很簡單，重點在于細(xì)節(jié)的控制，例如刪除節(jié)點后下標(biāo)的變化，以及將這些操作進行靈活的運用到各種場景中，需要和學(xué)生一起思考，并做引導(dǎo)性提示，激發(fā)學(xué)生積極思考，靈活運用的能力。教學(xué)重點與難點重點元素內(nèi)部添加子節(jié)點的操作、替換節(jié)點的操作難點元素外部插入同輩子節(jié)點的操作教學(xué)方法與手段●課堂講授●講解例題●電子課件●案例分析○小組討論○文字材料●提問○音像材料其他：現(xiàn)場編碼演示教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配預(yù)習(xí)檢查通過提問的方式，進行預(yù)習(xí)檢查（1）如何在Jquery在元素內(nèi)部添加子節(jié)點（2）如何在Jquery插入同輩節(jié)點。（3）如何進行節(jié)點的替換通過提問的方式檢查學(xué)生的預(yù)習(xí)情況10分鐘本章任務(wù):（1）利用節(jié)點操作完成列表通訊錄的各種操作。學(xué)習(xí)目標(biāo)：（1）掌握元素內(nèi)部添加子節(jié)點的操作（2）掌握元素外部插入同輩子節(jié)點的操作（3）掌握替換節(jié)點的操作介紹本次課程任務(wù)及課程目標(biāo)，讓學(xué)生明確本次課程學(xué)習(xí)完成后必須掌握的知識點和必須完成的任務(wù)。10分鐘講解元素內(nèi)部添加子節(jié)點的方式?！?】向末尾追加$("#myUl").append($li);//將$li追加到myUl中$li.appendTo($("#myUl"));//將$li追加到myUl中【2】向頭部追加$("#myUl").prepend($li);//將$li追加到myUl中$li.prependTo($("#myUl"));//將$li追加到myUl中（2）在UL+LI列表中分別演示append,appendTo，prepend，prependTo四個函數(shù)的使用讓學(xué)生理解并掌握在內(nèi)部添加子節(jié)點的方式。10分鐘（1）給學(xué)生演示任務(wù)的執(zhí)行效果，點擊第一個按鈕在列表開頭添加信息，點擊第二個按鈕在列表末尾添加信息。（2）布置學(xué)生使用相關(guān)上個環(huán)節(jié)講解的知識點完成任務(wù)。讓學(xué)生自己動手，能夠靈活使用在內(nèi)部插入元素的函數(shù)10分鐘（1）講解after和before函數(shù)的作用。（2）現(xiàn)場演示在UL+LI的列表中使用after和before進行同輩節(jié)點的插入。讓學(xué)生掌握使用after和before進行同輩節(jié)點的插入10分鐘（1）給學(xué)生演示運行效果，點擊第一個按鈕實現(xiàn)在當(dāng)前元素的后面插入節(jié)點，點擊第二個按鈕實現(xiàn)在當(dāng)前元素的前面插入節(jié)點。（2）布置學(xué)生任務(wù)，讓學(xué)生通過上個環(huán)節(jié)講解的知識點實現(xiàn)任務(wù)。讓學(xué)生自己實驗熟練掌握after和before的使用。10分鐘（1）講解replaceWith和replaceAll的作用。（2）現(xiàn)場演示使用replaceWith和replaceAll進行替換網(wǎng)頁中的節(jié)點內(nèi)容。replaceWith和replaceAll的作用和用法10分鐘10分鐘思考題或預(yù)習(xí)題或作業(yè)題課后作業(yè)：結(jié)合前面課程學(xué)習(xí)知識點，實現(xiàn)模態(tài)對話框效果，即點擊按鈕后，彈出模擬的模態(tài)對話框。預(yù)習(xí)作業(yè)：（1）Jquery中頁面載入事件有哪幾種寫法。（2）列舉出至少三個常見的鼠標(biāo)事件，并測試其語法。（3）Jquery中事件綁定有哪幾種常見方式，這幾種方式的區(qū)別分別是什么。布置課后作業(yè)讓學(xué)生對前面課程內(nèi)容進行復(fù)習(xí)和運用，布置預(yù)習(xí)作業(yè)讓學(xué)生對下章節(jié)學(xué)習(xí)內(nèi)容有一定的提前了解。10分鐘參考資料2.菜鳥教程/3.jQuery和Ajax實戰(zhàn)教程課后小結(jié)本次課程主要學(xué)習(xí)了節(jié)點的創(chuàng)建，替換等操作，單獨掌握這些節(jié)點操作不難，但是需要將這些操作和前面和后面的課程內(nèi)容結(jié)合使用，靈活運用才能滿足現(xiàn)實開發(fā)的需要，需要在后期課程中不斷引導(dǎo)學(xué)生進行思考和靈活運用。課程教案課題名稱JQuery+Ajxa應(yīng)用開發(fā)授課班級授課學(xué)時2授課地點授課形式上機參考教材《jQuery和Ajax實戰(zhàn)教程》教學(xué)資源/--菜鳥教程教學(xué)目標(biāo)知識目標(biāo)：1、掌握刪除節(jié)點的操作2、掌握復(fù)制節(jié)點的操作3、掌握遍歷節(jié)點元素的操作技能目標(biāo)：1、掌握刪除節(jié)點的操作2、掌握復(fù)制節(jié)點的操作3、掌握遍歷節(jié)點元素的操作素質(zhì)目標(biāo)：學(xué)生可以基本熟悉Jquery節(jié)點的相關(guān)操作。教學(xué)重點與難點教學(xué)重點元素內(nèi)部添加子節(jié)點的操作、節(jié)點替換的操作教學(xué)難點元素外部插入同輩子節(jié)點的操作學(xué)情分析本次課程主要講解網(wǎng)頁元素節(jié)點的插入，替換，刪除，復(fù)制遍歷等操作，單獨的操作在API文檔都有介紹，語法相對也很簡單，重點在于細(xì)節(jié)的控制，例如刪除節(jié)點后下標(biāo)的變化，以及將這些操作進行靈活的運用到各種場景中，需要和學(xué)生一起思考，并做引導(dǎo)性提示，激發(fā)學(xué)生積極思考，靈活運用的能力。教學(xué)過程課前：準(zhǔn)備有關(guān)Jquery元素操作的案例，方便在課程開始給學(xué)生介紹，讓學(xué)生對Jquery產(chǎn)生興趣。課中：1、掌握刪除節(jié)點的操作2、掌握復(fù)制節(jié)點的操作3、掌握遍歷節(jié)點元素的操作課后：布置預(yù)習(xí)任務(wù)，預(yù)習(xí)下一章的知識。教學(xué)反思本次課程主要學(xué)習(xí)了節(jié)點的創(chuàng)建，刪除，復(fù)制，節(jié)點遍歷等操作，單獨掌握這些節(jié)點操作不難，但是需要將這些操作和前面和后面的課程內(nèi)容結(jié)合使用，靈活運用才能滿足現(xiàn)實開發(fā)的需要，需要在后期課程中不斷引導(dǎo)學(xué)生進行思考和靈活運用。教學(xué)設(shè)計課程名稱JQuery+Ajxa應(yīng)用開發(fā)授課對象授課章節(jié)第3章Jquery操作DOM第10-12節(jié)刪除節(jié)點，復(fù)制節(jié)點，遍歷元素。本次課學(xué)時數(shù)2學(xué)時教學(xué)目的1、掌握刪除節(jié)點的操作2、掌握復(fù)制節(jié)點的操作3、掌握遍歷節(jié)點元素的操作教學(xué)分析本次課程主要講解網(wǎng)頁元素節(jié)點的刪除，復(fù)制遍歷等操作，單獨的操作在API文檔都有介紹，語法相對也很簡單，重點在于細(xì)節(jié)的控制，例如刪除節(jié)點后下標(biāo)的變化，以及將這些操作進行靈活的運用到各種場景中，需要和學(xué)生一起思考，并做引導(dǎo)性提示，激發(fā)學(xué)生積極思考，靈活運用的能力。教學(xué)重點與難點重點節(jié)點的刪除，復(fù)制等操作難點節(jié)點的遍歷，并在遍歷過程中對節(jié)點做相應(yīng)的控制。教學(xué)方法與手段●課堂講授●講解例題●電子課件●案例分析○小組討論○文字材料●提問○音像材料其他：現(xiàn)場編碼演示教學(xué)過程設(shè)計教學(xué)內(nèi)容教學(xué)過程設(shè)計意圖時間分配預(yù)習(xí)檢查通過提問的方式，進行預(yù)習(xí)檢查如何進行節(jié)點的刪除，復(fù)制，遍歷。通過提問的方式檢查學(xué)生的預(yù)習(xí)情況10分鐘本章任務(wù):（1）利用節(jié)點操作完成列表通訊錄的各種操作。（2）復(fù)制圖片元素后遍歷實現(xiàn)滿屏圖片效果。學(xué)習(xí)目標(biāo)：（1）掌握刪除節(jié)點的操作（2）掌握復(fù)制節(jié)點的操作（3）掌握遍歷節(jié)點元素的操作介紹本次課程任務(wù)及課程目標(biāo)，讓學(xué)生明確本次課程學(xué)習(xí)完成后必須掌握的知識點和必須完成的任務(wù)。10分鐘10分鐘10分鐘10分鐘10分鐘10分鐘10分鐘課程內(nèi)容總結(jié)將課程內(nèi)容知識點進行列舉，總結(jié)。（1）元素內(nèi)部添加子節(jié)點的操作（2）元素外部插入同輩子節(jié)點的操作（3）替換節(jié)點的操作（4）刪除節(jié)點的操作（5）復(fù)制節(jié)點的操作（6）遍歷節(jié)點元素的操作復(fù)習(xí)課程內(nèi)容，加深印象，讓學(xué)生了解自己的學(xué)習(xí)情況，根據(jù)自身情況課下自主復(fù)習(xí)。5分鐘思考題或預(yù)習(xí)題或作業(yè)題課后作業(yè)：結(jié)合前面課程學(xué)習(xí)知識點，實現(xiàn)模態(tài)