Web前端開發(fā)（JavaScript+jQuery）【教案】 Web前端技術(shù)整體設(shè)計(jì)

編寫說(shuō)明：正文內(nèi)容格式不限，此格式僅供參考課程教學(xué)設(shè)計(jì)（202*～202*學(xué)年第2學(xué)期）課程名稱：Web前端技術(shù)開課學(xué)院（部）******8制定人：******合作人：制定時(shí)間：202*年2月PAGEPAGE5Web前端技術(shù)課程整體教學(xué)設(shè)計(jì)課程信息課程代碼：032W36學(xué)分：3學(xué)時(shí)：64授課對(duì)象：*******課程類型：專業(yè)必修課課程性質(zhì)：理實(shí)一體化二、課程目標(biāo)設(shè)計(jì)整體目標(biāo)：《WEB前端技術(shù)》課程計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)的崗位群平臺(tái)課，旨在“有趣、有效、只學(xué)有用的”原則上，結(jié)合學(xué)生的認(rèn)知規(guī)律和現(xiàn)狀，使得學(xué)生能夠在有限的課時(shí)內(nèi)“專業(yè)”和“深入”地學(xué)習(xí)與WEB前端技術(shù)相關(guān)知識(shí)。課程始終以“社會(huì)主義核心價(jià)值觀”為引領(lǐng)，秉承校訓(xùn)“尚德明責(zé)，篤學(xué)強(qiáng)能”的理念，通過(guò)案例教學(xué)和任務(wù)實(shí)踐，引導(dǎo)學(xué)生在“學(xué)中做”、“做中學(xué)”，把基礎(chǔ)知識(shí)的學(xué)習(xí)和基本技能的掌握有機(jī)地結(jié)合在一起，從具體操作中培養(yǎng)應(yīng)用能力、解決復(fù)雜問(wèn)題的綜合能力和高級(jí)思維，并引導(dǎo)學(xué)生逐步養(yǎng)成精益求精，追求卓越的品質(zhì)。由于本課程界面變現(xiàn)的特點(diǎn)，更多的是將思政內(nèi)容融入網(wǎng)頁(yè)變現(xiàn)內(nèi)容上，同時(shí)將含有思政元素的內(nèi)容作為課程素材提供給學(xué)生，通過(guò)思政與專業(yè)知識(shí)的結(jié)合，使學(xué)生逐步樹立正確的價(jià)值觀，做一個(gè)新時(shí)代愛祖國(guó)、愛人民，具有愛國(guó)情懷和社會(huì)責(zé)任感的合格‘匠人’。課程面向職業(yè)崗位采用基于任務(wù)的方式，以項(xiàng)目開發(fā)為主線，循序漸進(jìn)的闡述Web前端的各項(xiàng)知識(shí)，通過(guò)三大模塊WEB知識(shí)儲(chǔ)備、WEB案例提高、WEB實(shí)戰(zhàn)演練，分別完成知識(shí)點(diǎn)講解、案例講解、項(xiàng)目實(shí)戰(zhàn)三大步驟，幫助學(xué)生把握前端的核心技術(shù)HTML5、CS3S、JavaScript，將其納入真實(shí)的項(xiàng)目場(chǎng)景中，幫助學(xué)生更好的理解和應(yīng)用這些技術(shù)。明確的學(xué)習(xí)目標(biāo)及循序漸進(jìn)的知識(shí)體系，使理論知識(shí)和實(shí)踐技能同步提高。通過(guò)本課程的學(xué)習(xí)，能夠使學(xué)習(xí)者熟悉WEB頁(yè)面制作流程、掌握常見的頁(yè)面布局效果、學(xué)會(huì)設(shè)計(jì)制作各種具有動(dòng)態(tài)特效的網(wǎng)站。課程結(jié)構(gòu)如圖1所示。圖1課程內(nèi)容結(jié)構(gòu)圖知識(shí)目標(biāo)掌握J(rèn)avaScript的概念、應(yīng)用與特點(diǎn)；掌握J(rèn)avaScript的3種引入方式，了解每種方式的特點(diǎn)和應(yīng)用場(chǎng)景；掌握J(rèn)avaScript的語(yǔ)法、數(shù)據(jù)類型、基本的算數(shù)和邏輯運(yùn)算操作；掌握J(rèn)avaScript中條件分支語(yǔ)句和循環(huán)語(yǔ)句的使用；了解關(guān)鍵字與保留字；了解數(shù)據(jù)類型的分類；掌握基本數(shù)據(jù)類型的使用；掌握數(shù)組的定義；理解并能實(shí)現(xiàn)冒泡排序；理解并能實(shí)現(xiàn)插入排序；其他常用的數(shù)組操作方法；了解JavaScript函數(shù)的基本概念，掌握函數(shù)的基本代碼；熟練掌握函數(shù)的各種參數(shù)設(shè)置；了解函數(shù)表達(dá)式的概念，能夠區(qū)分函數(shù)表達(dá)式和普通函數(shù)的區(qū)別；理解函數(shù)嵌套調(diào)用的概念；掌握函數(shù)遞歸調(diào)用的原理與實(shí)現(xiàn)；理解閉包函數(shù)的特點(diǎn)和應(yīng)用場(chǎng)景；掌握對(duì)象的定義語(yǔ)法；理解對(duì)象的深拷貝與淺拷貝機(jī)制；理解為什么使用構(gòu)造函數(shù)；掌握如何自定義構(gòu)造函數(shù)；理解私有成員的概念；掌握String、Number、Math、Date等對(duì)象的使用；掌握J(rèn)avaScript如何進(jìn)行錯(cuò)誤處理；了解常見的錯(cuò)誤類型。能夠區(qū)分語(yǔ)法錯(cuò)誤與普通錯(cuò)誤；掌握如何在Chrome瀏覽器中調(diào)試JavaScript；掌握如何利用對(duì)象來(lái)保存數(shù)據(jù)；掌握BOM的基本結(jié)構(gòu)；理解window對(duì)象與其他BOM對(duì)象的關(guān)系；掌握navigator對(duì)象的常用屬性和方法；掌握screen對(duì)象的常用屬性和方法；掌握HTML節(jié)點(diǎn)樹的概念，能夠說(shuō)出節(jié)點(diǎn)之間的關(guān)系；認(rèn)識(shí)常用的DOM對(duì)象，能夠區(qū)分元素與節(jié)點(diǎn)；掌握節(jié)點(diǎn)的類型；掌握節(jié)點(diǎn)方式訪問(wèn)節(jié)點(diǎn)的常用屬性的使用；運(yùn)用面向?qū)ο缶幊谈玫亟M織代碼；掌握事件對(duì)象的常用屬性和方法；掌握頁(yè)面加載事件的機(jī)制；理解什么是jQuery庫(kù)；了解jQuery的優(yōu)勢(shì)和設(shè)計(jì)理念；掌握jQuery的下載與引入；了解jQuery代碼與JavaScript代碼的區(qū)別；理解jQuery選擇器的作用和設(shè)計(jì)思想；掌握jQuery操作頁(yè)面元素；掌握jQuery操作DOM節(jié)點(diǎn)的方法；了解jQuery的事件觸發(fā)機(jī)制；熟悉jQuery事件綁定和事件解綁的方法；熟悉jQuery事件對(duì)象的屬性和方法的使用；掌握jQuery事件冒泡的概念；熟悉jQuery中常用動(dòng)畫的使用；掌握熟練運(yùn)用jQuery動(dòng)畫于網(wǎng)頁(yè)中；掌握jQuery的常用工具函數(shù)；掌握移動(dòng)端響應(yīng)式布局的實(shí)現(xiàn)方法。（2）技能目標(biāo)能夠掌握J(rèn)avaScript的3種引入方式；能夠正確使用常用輸出語(yǔ)句；能夠進(jìn)行JavaScript的簡(jiǎn)單數(shù)據(jù)運(yùn)算操作；能夠?qū)ψ兞窟M(jìn)行賦值操作；能夠掌握各種運(yùn)算符的使用；能夠使用判斷結(jié)構(gòu)語(yǔ)句；能夠使用while、do…while、for等循環(huán)結(jié)構(gòu)語(yǔ)句；能夠掌握跳轉(zhuǎn)語(yǔ)句break、continue的使用方法；能夠創(chuàng)建、刪除數(shù)組；能夠?qū)?shù)組進(jìn)行遍歷；能夠正確使用函數(shù)；能夠定義對(duì)象；能夠訪問(wèn)與遍歷對(duì)象成員；能夠使用JavaScript內(nèi)置構(gòu)造函數(shù)實(shí)例化對(duì)象；能夠自定義構(gòu)造函數(shù)；能夠掌握常用對(duì)象的使用方法；能夠操作彈出對(duì)話框和窗口；能夠使用瀏覽器對(duì)象模型“BOM”與瀏覽器“對(duì)話；能夠?qū)Υ翱谖恢煤痛笮∵M(jìn)行控制；能夠使用定時(shí)器；能夠使用location對(duì)象更改URL；能夠使用history對(duì)象實(shí)現(xiàn)歷史記錄跳轉(zhuǎn)；能夠增加、刪除、創(chuàng)建節(jié)點(diǎn)；能夠運(yùn)用DOM的方法和屬性獲取網(wǎng)頁(yè)中的元素；能夠掌握如何獲取事件對(duì)象；能夠掌握頁(yè)面加載事件的機(jī)制；能夠?yàn)轫?yè)面中的元素綁定鍵盤或鼠標(biāo)事件；能夠正確的引用jQuery文件；能夠使用jQuery遍歷頁(yè)面元素；能夠使用jQuery操作頁(yè)面樣式、屬性、內(nèi)容等方法；能夠熟練運(yùn)用jQuery動(dòng)畫創(chuàng)建動(dòng)態(tài)頁(yè)面；能夠運(yùn)用jQuery進(jìn)行自定義動(dòng)畫效果；能夠運(yùn)用jQuery操作DOM節(jié)點(diǎn)的方法；能夠掌握jQuery事件冒泡及阻止事件冒泡的方式；能夠使用JQuery庫(kù)實(shí)現(xiàn)網(wǎng)頁(yè)特效；能收集、整理、處理信息，并對(duì)網(wǎng)頁(yè)所需素材進(jìn)行加工處理；能利用表單、網(wǎng)絡(luò)編程技術(shù)及數(shù)據(jù)庫(kù)技術(shù)建立網(wǎng)頁(yè)的交互式頁(yè)面，實(shí)現(xiàn)簡(jiǎn)單的前后臺(tái)數(shù)據(jù)傳遞功能。（3）素質(zhì)目標(biāo)具有勤奮學(xué)習(xí)、嚴(yán)謹(jǐn)求實(shí)的態(tài)度；具有勤精益求精、創(chuàng)新的工作作風(fēng)；具有良好的心理素質(zhì)和職業(yè)道德素養(yǎng)；具有高度責(zé)任心和良好的團(tuán)隊(duì)合作意識(shí)和創(chuàng)新精神；具有科學(xué)思維方式和一定的唯物辯證法思想；具有發(fā)現(xiàn)美、創(chuàng)造美的審美能力；具有較強(qiáng)的網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)；具有一定的表達(dá)溝通能力和組織協(xié)調(diào)能力；具有良好的編寫代碼的習(xí)慣。三、課程教學(xué)活動(dòng)設(shè)計(jì)基于混合式教學(xué)新需求，將紙質(zhì)教材、在線課程、網(wǎng)站和教學(xué)資源庫(kù)的線上線下教育資源有機(jī)銜接起來(lái)，結(jié)合《高等學(xué)校課程思政建設(shè)指導(dǎo)綱要》要求，全面融入“思政要求、崗位職業(yè)標(biāo)準(zhǔn)、技能競(jìng)賽標(biāo)準(zhǔn)、1+X證書職業(yè)技能等級(jí)標(biāo)準(zhǔn)”，以項(xiàng)目為載體,以任務(wù)為驅(qū)動(dòng)，以學(xué)生為主體，構(gòu)建了‘教學(xué)做比評(píng)’五位一體的教學(xué)模式，創(chuàng)建了基于翻轉(zhuǎn)課堂需求的碎片化教學(xué)資源。以此把學(xué)生組織起來(lái)、把學(xué)習(xí)過(guò)程完善起來(lái)、讓學(xué)生參與課堂、讓學(xué)習(xí)主導(dǎo)課堂、增加課堂的吸引力、拓展課堂教學(xué)寬度。潤(rùn)物無(wú)聲地將課程思政育人貫穿其中，充分運(yùn)用在線學(xué)習(xí)平臺(tái)優(yōu)化課堂教學(xué)過(guò)程，針對(duì)重點(diǎn)和難點(diǎn)，創(chuàng)建基于翻轉(zhuǎn)課堂需求的碎片化教學(xué)資源。結(jié)合產(chǎn)教融合真實(shí)案例，運(yùn)用任務(wù)驅(qū)動(dòng)和頭腦風(fēng)暴，將自主學(xué)習(xí)和小組合作探究相結(jié)合，借助信息化手段，在教學(xué)實(shí)施過(guò)程中，理論-實(shí)踐-課程思政環(huán)環(huán)相扣。（1）教學(xué)組織安排1）讓學(xué)生參與課堂。關(guān)注學(xué)生課堂學(xué)習(xí)，更關(guān)注他們的生活與實(shí)踐；關(guān)注學(xué)生綜合素質(zhì)的發(fā)展，又關(guān)注學(xué)生的特長(zhǎng)發(fā)展及在日常生活與社會(huì)實(shí)踐中的表現(xiàn)，提升學(xué)生課堂參與度。2）讓學(xué)習(xí)主導(dǎo)課堂。先學(xué)后教，讓教有針對(duì)性；以學(xué)定教，讓教有有效性。壓縮教學(xué)時(shí)間，保障學(xué)生學(xué)習(xí)時(shí)間，提前發(fā)布課程學(xué)習(xí)任務(wù)單，通過(guò)在線評(píng)比等手段，促使學(xué)生主動(dòng)學(xué)在教學(xué)之前。3）把學(xué)生組織起來(lái)。挖掘同學(xué)之間的學(xué)習(xí)資源，營(yíng)造互幫互助共同受益的學(xué)習(xí)氛圍。教師精準(zhǔn)把握學(xué)生學(xué)習(xí)狀況，分組分任務(wù)，充分調(diào)動(dòng)學(xué)生，有效地把學(xué)生組織起來(lái)。4）把學(xué)習(xí)過(guò)程完善起來(lái)。注重預(yù)習(xí)的重要性，使學(xué)生對(duì)整個(gè)學(xué)習(xí)過(guò)程負(fù)起責(zé)任。根據(jù)學(xué)生學(xué)習(xí)進(jìn)度，及時(shí)給予幫助指導(dǎo)，借助實(shí)時(shí)通訊軟件答疑解惑。5）增加課堂的吸引力。課堂設(shè)計(jì)具有啟發(fā)性、趣味性，同時(shí)注意語(yǔ)言的藝術(shù)性。借助教學(xué)手段創(chuàng)設(shè)教學(xué)情境，讓學(xué)生更樂(lè)意于上課，課堂教學(xué)才能富有吸引力。6）拓展課堂教學(xué)寬度。借助信息化手段，聯(lián)合企業(yè)行業(yè)專家，加大實(shí)踐力度，延伸課堂高度，拓展教學(xué)寬度，提升學(xué)生自主學(xué)習(xí)與自主探究能力。（2）教學(xué)活動(dòng)過(guò)程課前自主學(xué)習(xí)：借助于新的互動(dòng)性較強(qiáng)的網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)，構(gòu)建在線學(xué)習(xí)視頻供學(xué)生自主學(xué)習(xí)，培養(yǎng)學(xué)生自主學(xué)習(xí)能力，樹立大局意識(shí)。課中知識(shí)內(nèi)化：采用“教-學(xué)-做-比-評(píng)”五位一體的課堂教學(xué)方式，培養(yǎng)學(xué)生發(fā)現(xiàn)問(wèn)題、分析問(wèn)題及解決問(wèn)題的能力。在這個(gè)過(guò)程中以社會(huì)主義核心價(jià)值觀為引領(lǐng)，引導(dǎo)學(xué)生去思考，培養(yǎng)學(xué)生的創(chuàng)新創(chuàng)作能力和團(tuán)隊(duì)合作意識(shí)。課后鞏固提高：借助互動(dòng)交流平臺(tái)和資源庫(kù)，拓展學(xué)習(xí)實(shí)踐空間，滿足個(gè)性化學(xué)習(xí)需求，課后實(shí)踐作業(yè)用以鞏固課堂知識(shí)、拓展視野、與時(shí)俱進(jìn)，以增強(qiáng)學(xué)生的創(chuàng)新能力和精益求精的品質(zhì)。（3）學(xué)習(xí)考核評(píng)價(jià)動(dòng)態(tài)評(píng)價(jià)，量化結(jié)果——建立人文性、多元性課程評(píng)價(jià)體系：基于學(xué)習(xí)效果，由任課教師、小組、學(xué)生本人組成評(píng)價(jià)主體，區(qū)分“課前”“課中”“課后”不同時(shí)間節(jié)點(diǎn)的動(dòng)態(tài)評(píng)價(jià)，構(gòu)建主體多元化、過(guò)程動(dòng)態(tài)化、結(jié)果可視化的層級(jí)設(shè)計(jì)評(píng)價(jià)，突出學(xué)習(xí)參與度、思政心得、發(fā)帖數(shù)量與質(zhì)量、團(tuán)隊(duì)合作等方面考核權(quán)重，實(shí)現(xiàn)客觀量化評(píng)價(jià)與主觀效度檢驗(yàn)統(tǒng)一，側(cè)面實(shí)時(shí)了解學(xué)生思想反映，達(dá)到精準(zhǔn)掌握學(xué)生思想、素質(zhì)、知識(shí)、技能育人的目標(biāo)。課程評(píng)價(jià)貫穿課前（30%）、課中（30%）、課后（40%）全過(guò)程；評(píng)價(jià)內(nèi)容包括理論測(cè)試（10%）、線上學(xué)習(xí)（10%）、項(xiàng)目作業(yè)（40%）和期末測(cè)評(píng)（40%）四個(gè)維度。2．課程教學(xué)標(biāo)準(zhǔn)課程標(biāo)準(zhǔn)建設(shè)應(yīng)注重課程目標(biāo)的明確、課程內(nèi)容的更新拓展、教學(xué)方法的多樣化、教學(xué)資源的豐富化和課程評(píng)價(jià)的科學(xué)化等方面的工作，以適應(yīng)行業(yè)發(fā)展和市場(chǎng)需求的變化，不斷提高課程的教學(xué)質(zhì)量和水平。本課程標(biāo)準(zhǔn)建設(shè)從課程性質(zhì)與任務(wù)、課程培養(yǎng)目標(biāo)（基本知識(shí)教學(xué)目標(biāo)、職業(yè)能力培養(yǎng)目標(biāo)、素質(zhì)教育目標(biāo)）、設(shè)計(jì)思路、課程內(nèi)容要求及教學(xué)設(shè)計(jì)、課程實(shí)施建議（教材建議、任課教師建議、教學(xué)方法建議、教學(xué)評(píng)價(jià)建議、課程診改建議）、課程資源建設(shè)等方面進(jìn)行課程標(biāo)準(zhǔn)的制定，規(guī)范各項(xiàng)教學(xué)要求，以提高教學(xué)質(zhì)量與水平。根據(jù)專業(yè)培養(yǎng)目標(biāo)、理論教學(xué)目標(biāo)和實(shí)踐教學(xué)目標(biāo)及用人單位對(duì)于“前端設(shè)計(jì)師”的要求，修訂了《Web前端技術(shù)》課程教學(xué)大綱，并制定了本課程的教學(xué)標(biāo)準(zhǔn)。通過(guò)本課程的教學(xué)，逐漸培養(yǎng)學(xué)生科學(xué)的思維方法和創(chuàng)新思維能力，使學(xué)生的操作能力、分析問(wèn)題和解決問(wèn)題的能力、獲取新知識(shí)的能力、團(tuán)結(jié)協(xié)作的能力得以提高。通過(guò)本課程的學(xué)習(xí)，使學(xué)生能夠具備以下四方面的能力：1)Web站點(diǎn)的規(guī)劃、構(gòu)建與發(fā)布的能力；2)網(wǎng)頁(yè)與圖形圖像創(chuàng)意、設(shè)計(jì)和制作的能力；3)動(dòng)畫創(chuàng)意、設(shè)計(jì)和制作的能力；4)考取前端設(shè)計(jì)師證書的能力。3．課程體系結(jié)構(gòu)內(nèi)容課程面向職業(yè)崗位采用基于任務(wù)的方式，以項(xiàng)目開發(fā)為主線，循序漸進(jìn)的闡述Web前端的各項(xiàng)知識(shí)，通過(guò)三大模塊（圖2）Web知識(shí)儲(chǔ)備、Web案例提高、Web實(shí)戰(zhàn)演練，分別完成知識(shí)點(diǎn)講解、案例講解、項(xiàng)目實(shí)戰(zhàn)三大步驟，幫助學(xué)生把握前端的核心技術(shù)HTML5、CSS3、JavaScript，嵌入企業(yè)項(xiàng)目真實(shí)案例，應(yīng)用全新教材，依托行業(yè)企新技術(shù)，力求打造適應(yīng)新形勢(shì)，具有互聯(lián)網(wǎng)思維和技能的IT技術(shù)人才。本門課程總學(xué)時(shí)為64學(xué)時(shí)，3學(xué)分。圖2課程內(nèi)容思維導(dǎo)圖四、課程設(shè)計(jì)及安排序號(hào)項(xiàng)目名稱工作任務(wù)知識(shí)、能力、素質(zhì)教學(xué)情景或教學(xué)設(shè)計(jì)結(jié)果（作業(yè)、報(bào)告等）課時(shí)素質(zhì)內(nèi)容和要求知識(shí)內(nèi)容和要求技能內(nèi)容和要求1Web前端概述Web發(fā)展歷程Web前端當(dāng)前就業(yè)前景3.Web前端架構(gòu).4.Web前端開發(fā)工具1.逐步培養(yǎng)細(xì)心、耐心的工作態(tài)度。2.培養(yǎng)團(tuán)隊(duì)協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語(yǔ)言表達(dá)能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.掌握HTTP協(xié)議格式2.了解HTTP狀態(tài)碼識(shí)別3.什么是Web前端開發(fā)4.Web前端開發(fā)工具有哪些5.了解瀏覽器兼容性問(wèn)題1.掌握HTTP協(xié)議格式2.代碼的書寫合適格式3.Web前端開發(fā)工具的使用該學(xué)習(xí)項(xiàng)目的教學(xué)環(huán)境是教學(xué)做一體化機(jī)房。學(xué)習(xí)環(huán)節(jié)1：通過(guò)分析，使學(xué)生了解Web前端技術(shù)相關(guān)軟件及其使用；學(xué)習(xí)環(huán)節(jié)2：學(xué)會(huì)利用圖形編輯軟件、Hbuilder設(shè)計(jì)制作Web前端頁(yè)面。作業(yè)：Web前端開發(fā)的構(gòu)成要素12Javascript入門JavaScript引入方式、語(yǔ)法風(fēng)格、注釋、輸出語(yǔ)句1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣具體團(tuán)隊(duì)合作意識(shí)4.具有吃苦耐勞的品質(zhì)5.具有良好的網(wǎng)絡(luò)素養(yǎng)1.熟悉JavaScript的用途和發(fā)展?fàn)顩r2.理解JavaScript與ECMAScript的關(guān)系3.掌握J(rèn)avaScript的基本使用方法1.掌握變量的定義與賦值2.掌握數(shù)據(jù)類型與運(yùn)算符的使用學(xué)習(xí)環(huán)節(jié)1：什么是JavaScript；2.JavaScript的由來(lái)與發(fā)展；3.JavaScript的特點(diǎn)；4.開發(fā)工具介紹學(xué)習(xí)環(huán)節(jié)2：JavaScript的特點(diǎn)；JavaScript是腳本語(yǔ)言，具有腳本語(yǔ)言的一些特點(diǎn)：簡(jiǎn)單、易學(xué)、易用。JavaScript可以跨平臺(tái)，開發(fā)和使用都非常方便，支持PC和移動(dòng)端。JavaScript支持面向?qū)ο?，誕生了許多庫(kù)和框架，提高開發(fā)速度，能夠用來(lái)解決復(fù)雜問(wèn)題。JavaScript與ECMAScript的關(guān)系；ECMAScript是一種規(guī)范標(biāo)準(zhǔn)，用于統(tǒng)一JavaScript同類的語(yǔ)言，如JScript。學(xué)習(xí)環(huán)節(jié)3：【案例】第一個(gè)JavaScript程序?qū)W習(xí)環(huán)節(jié)4：JavaScript引入方式；學(xué)習(xí)環(huán)節(jié)5：JavaScript基本應(yīng)用--【動(dòng)手實(shí)踐】驗(yàn)證用戶輸入的密碼基本的算術(shù)運(yùn)算2+13JavaScript基本語(yǔ)法1.網(wǎng)頁(yè)模塊拆分2.DIV標(biāo)簽的使用3.CSS3新增屬性4.盒子模型5.JavaScript中腳本的基本結(jié)構(gòu)6.JavaScript中語(yǔ)句的輸入輸出1.逐步培養(yǎng)細(xì)心、耐心的工作態(tài)度。2.培養(yǎng)團(tuán)隊(duì)協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語(yǔ)言表達(dá)能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.理解標(biāo)識(shí)符的概念。2.熟悉關(guān)鍵字與保留字。1.掌握變量的定義與賦值2.掌握數(shù)據(jù)類型與運(yùn)算符的使用3.掌握流程控制語(yǔ)句的使用 4.掌握變量的基本使用學(xué)習(xí)環(huán)節(jié)1：熟悉關(guān)鍵字與保留字；掌握變量的基本使用；掌握變量的賦值操作。學(xué)習(xí)環(huán)節(jié)2：數(shù)據(jù)類型分類、基本數(shù)據(jù)類型、數(shù)據(jù)類型檢測(cè)、數(shù)據(jù)類型轉(zhuǎn)換學(xué)習(xí)環(huán)節(jié)3：表達(dá)式、算術(shù)運(yùn)算符、字符串運(yùn)算符、賦值運(yùn)算符、比較運(yùn)算符學(xué)習(xí)環(huán)節(jié)4：邏輯運(yùn)算符、三元運(yùn)算符、位運(yùn)算符、運(yùn)算符優(yōu)先級(jí)、選擇結(jié)構(gòu)；學(xué)習(xí)環(huán)節(jié)5：循環(huán)結(jié)構(gòu)、跳轉(zhuǎn)語(yǔ)句學(xué)習(xí)環(huán)節(jié)6：【案例】打印金字塔。九九乘法口訣表的實(shí)現(xiàn)3+14函數(shù)函數(shù)的創(chuàng)建和使用、變量的作用域、匿名與回調(diào)函數(shù)、閉包函數(shù)1.逐步培養(yǎng)細(xì)心、耐心的工作態(tài)度。2.培養(yǎng)團(tuán)隊(duì)協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語(yǔ)言表達(dá)能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.掌握函數(shù)的使用方法2.掌握變量的作用域3.掌握匿名函數(shù)與閉包函數(shù)1.能夠進(jìn)行函數(shù)的調(diào)用2.能夠書寫函數(shù)表達(dá)式學(xué)習(xí)環(huán)節(jié)1：對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑；回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題；明確學(xué)習(xí)方向。學(xué)習(xí)環(huán)節(jié)2：初識(shí)函數(shù)、參數(shù)設(shè)置、函數(shù)的調(diào)用、變量的作用域?qū)W習(xí)環(huán)節(jié)3：函數(shù)表達(dá)式、匿名函數(shù)、回調(diào)函數(shù)學(xué)習(xí)環(huán)節(jié)4：函數(shù)嵌套與作用域鏈、遞歸調(diào)用學(xué)習(xí)環(huán)節(jié)5：什么是閉包函數(shù)、閉包函數(shù)的實(shí)現(xiàn)、動(dòng)手實(shí)踐：網(wǎng)頁(yè)計(jì)算器簡(jiǎn)易購(gòu)物計(jì)算器的實(shí)現(xiàn)3+15BOMBOM組成結(jié)構(gòu)、BOM常用對(duì)象和方法、定時(shí)器窗口位置和大小、框架操作、history、screen1.逐步培養(yǎng)細(xì)心、耐心的工作態(tài)度。2.培養(yǎng)團(tuán)隊(duì)協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語(yǔ)言表達(dá)能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.了解BOM的組成結(jié)構(gòu)2.掌握定時(shí)器的操作3.熟悉location與history對(duì)象1.能夠操作BOM對(duì)象2.能夠使用定時(shí)器制作倒計(jì)時(shí)3.能夠進(jìn)窗口的操作學(xué)習(xí)環(huán)節(jié)1：（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題。在前面的學(xué)習(xí)中，用到的alert()、prompt()函數(shù)其實(shí)是window對(duì)象的方法，關(guān)于window對(duì)象具體如何使用，它有哪些常用的屬性和方法，將在本節(jié)進(jìn)行具體講解。（3）明確學(xué)習(xí)方向。理解什么是BOM。掌握BOM的基本結(jié)構(gòu)。理解window對(duì)象與其他BOM對(duì)象的關(guān)系。掌握如何彈出對(duì)話框和窗口。掌握如何控制窗口位置和大小。掌握如何進(jìn)行框架操作。掌握定時(shí)器的使用方法。學(xué)習(xí)環(huán)節(jié)2：什么是BOM對(duì)象、window對(duì)象學(xué)習(xí)環(huán)節(jié)3：【案例】限時(shí)秒殺學(xué)習(xí)環(huán)節(jié)4：location對(duì)象、案例：定時(shí)跳轉(zhuǎn)、history對(duì)象學(xué)習(xí)環(huán)節(jié)5：【案例】定時(shí)跳轉(zhuǎn)紅綠燈效果的實(shí)現(xiàn)3+16DOM獲取元素、元素操作、節(jié)點(diǎn)操作獲取節(jié)點(diǎn)、節(jié)點(diǎn)追加1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣4.具體團(tuán)隊(duì)合作意識(shí)5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.了解什么是DOM2.掌握元素與樣式的操作3.掌握節(jié)點(diǎn)的操作1.能夠進(jìn)行元素操作。2.能夠進(jìn)行節(jié)點(diǎn)的操作。3.能夠獲取元素、添加節(jié)點(diǎn)學(xué)習(xí)環(huán)節(jié)1：在前面講解了BOM對(duì)象的使用，BOM對(duì)瀏覽器進(jìn)行操作，而DOM用來(lái)對(duì)文檔進(jìn)行操作，因此本節(jié)課將會(huì)講解如何利用DOM對(duì)象來(lái)對(duì)文檔進(jìn)行操作。明確學(xué)習(xí)方向。 了解什么是DOM，DOM的版本和發(fā)展歷史。掌握HTML節(jié)點(diǎn)樹的概念，能夠說(shuō)出節(jié)點(diǎn)之間的關(guān)系。認(rèn)識(shí)常用的DOM對(duì)象，能夠區(qū)分元素與節(jié)點(diǎn)。掌握節(jié)點(diǎn)的類型。學(xué)習(xí)環(huán)節(jié)2：認(rèn)識(shí)DOM、獲取元素、內(nèi)容操作、屬性操作、樣式操作學(xué)習(xí)環(huán)節(jié)3：獲取節(jié)點(diǎn)、節(jié)點(diǎn)追加、節(jié)點(diǎn)刪除學(xué)習(xí)環(huán)節(jié)4：動(dòng)手實(shí)踐：購(gòu)物車的實(shí)現(xiàn)網(wǎng)絡(luò)購(gòu)物車的實(shí)現(xiàn)3+17JavaScript事件事件的綁定方式、事件對(duì)象、鼠標(biāo)事件、鍵盤事件1.逐步培養(yǎng)細(xì)心、耐心的工作態(tài)度。2.培養(yǎng)團(tuán)隊(duì)協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語(yǔ)言表達(dá)能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.掌握事件的綁定方式2.熟悉事件對(duì)象的使用3.掌握常用事件的實(shí)現(xiàn)1.能夠進(jìn)行事件綁定。2.能夠獲取事件對(duì)象3.能夠?qū)⑹录?duì)象應(yīng)在網(wǎng)頁(yè)中學(xué)習(xí)環(huán)節(jié)1：回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題。學(xué)習(xí)環(huán)節(jié)2：事件概述、事件的綁定方式、獲取事件對(duì)象、常用屬性和方法；學(xué)習(xí)環(huán)節(jié)3：頁(yè)面事件、焦點(diǎn)事件、鼠標(biāo)事件學(xué)習(xí)環(huán)節(jié)4：【案例】：鼠標(biāo)拖拽特效學(xué)習(xí)環(huán)節(jié)5：鍵盤事件、表單事件、動(dòng)手實(shí)踐：圖片放大特效鼠標(biāo)經(jīng)過(guò)效果的實(shí)現(xiàn)3+18jQuery基礎(chǔ)調(diào)試工具的使用，jQuery的下載、jQuery的引入方式j(luò)Query對(duì)象與DOM對(duì)象的轉(zhuǎn)換jQuery基本選擇器的使用1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣4.具體團(tuán)隊(duì)合作意識(shí)5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.掌握jQuery的概念及優(yōu)勢(shì)2.掌握jQuery的下載和引入3.掌握jQuery對(duì)象與DOM對(duì)象的轉(zhuǎn)換4.熟悉開發(fā)和調(diào)試工具的使用5.掌握jquery基本選擇器1.能夠正確引入jQuery2.能夠書寫基本的jQuery代碼。3.能夠正確使用jQuery基本選擇器學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：jQuery的概念和版本介紹學(xué)習(xí)環(huán)節(jié)3：選擇器概念和基本選擇器學(xué)習(xí)環(huán)節(jié)4：學(xué)習(xí)環(huán)節(jié)5：jQuery基礎(chǔ)選擇器的使用3+19jQuery層級(jí)選擇器通過(guò)向$()方法中傳入選擇器來(lái)獲取元素。本章將通過(guò)分類的方式系統(tǒng)而全面深入地講解jQuery選擇器。1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣4.具體團(tuán)隊(duì)合作意識(shí)5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.了解jQuery選擇器的優(yōu)勢(shì)2.掌握jQuery基本選擇器的使用3.掌握jQuery層次選擇器的使用4.熟悉jQuery過(guò)濾選擇器的使用1.能夠使用jQuery的層級(jí)選擇器進(jìn)行頁(yè)面操作學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：層級(jí)選擇器和折疊式菜單學(xué)習(xí)環(huán)節(jié)3：基本過(guò)濾選擇器、可見性過(guò)濾選擇器和內(nèi)容過(guò)濾選擇器學(xué)習(xí)環(huán)節(jié)4：屬性過(guò)濾選擇器學(xué)習(xí)環(huán)節(jié)5：【案例】精品展示購(gòu)物展示菜單的實(shí)現(xiàn)3+110jQuery操作DOMjQuery操作元素樣式的方法jQuery操作元素屬性的方法1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣4.具體團(tuán)隊(duì)合作意識(shí)5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.掌握jQuery操作元素樣式的方法2.掌握jQuery操作元素屬性的方法3.掌握jQuery操作元素內(nèi)容的方法1.能夠使用jQuery操作元素樣式2.能夠使用jQuery操作元素屬性學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：jQuery操作元素樣式的方法學(xué)習(xí)環(huán)節(jié)3：jQuery操作元素屬性和內(nèi)容學(xué)習(xí)環(huán)節(jié)4：【案例】留言板理論知識(shí)測(cè)試3+111jQuery操作DOMjQuery操作元素內(nèi)容的方法jQuery操作DOM節(jié)點(diǎn)的方法jQuery操作元素屬性的方法1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣4.具體團(tuán)隊(duì)合作意識(shí)5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)掌握jQuery操作DOM節(jié)點(diǎn)的方法了解jQuery鏈?zhǔn)骄幊痰氖褂媚軌蚴褂胘Query操作元素內(nèi)容能夠使用jQuery操作DOM節(jié)點(diǎn)學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：jQuery操作DOM學(xué)習(xí)環(huán)節(jié)3：【案例】高亮顯示圖片的實(shí)現(xiàn)學(xué)習(xí)環(huán)節(jié)4：動(dòng)手實(shí)踐：權(quán)限選擇案例權(quán)限選擇：全選與單選的實(shí)現(xiàn)3+112jQuery事件處理機(jī)制jQuery常用事件的使用方法jQuery事件冒泡的概念以及阻止事件冒泡的方式1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣4.具體團(tuán)隊(duì)合作意識(shí)5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.了解jQuery的事件觸發(fā)機(jī)制2.熟悉jQuery事件綁定和事件解綁的方法3.熟悉jQuery事件對(duì)象的屬性和方法的使用4.掌握jQuery常用事件的使用方法5.掌握jQuery事件冒泡的概念以及阻止事件冒泡的方式1.能夠使用jQuery進(jìn)行事件綁定與解綁2.能夠操作jQuery事件的對(duì)象屬性3.能夠?qū)Query事件應(yīng)用與頁(yè)面學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：頁(yè)面加載事件、鼠標(biāo)事件學(xué)習(xí)環(huán)節(jié)3：焦點(diǎn)事件、改變事件、星級(jí)評(píng)價(jià)案例星級(jí)評(píng)價(jià)案例的實(shí)現(xiàn)3+113jQuery事件處理機(jī)制jQuery常用事件的使用方法jQuery事件冒泡的概念以及阻止事件冒泡的方式1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣4.具體團(tuán)隊(duì)合作意識(shí)5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.掌握jQuery綁定事件的方式2.掌握jQuery觸發(fā)事件的方式1.能夠使用jQuery進(jìn)行事件綁定與解綁2.能夠操作jQuery事件的對(duì)象屬性3.能夠?qū)Query事件應(yīng)用與頁(yè)面學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：動(dòng)態(tài)添加和刪除表格學(xué)習(xí)環(huán)節(jié)3：用戶單擊“添加數(shù)據(jù)”按鈕，彈出表單讓用戶輸入“課程名稱”、“所屬學(xué)院”；學(xué)習(xí)環(huán)節(jié)4：用戶在填入相關(guān)信息之后通過(guò)單擊“添加”按鈕讓表格添加一行新數(shù)據(jù)學(xué)習(xí)環(huán)節(jié)5：用戶單擊每一行末的“刪除”元素，將這一行數(shù)據(jù)刪除。動(dòng)態(tài)添加和刪除表格的實(shí)現(xiàn)3+114jQuery動(dòng)畫元素的顯示和隱藏、元素的淡入和淡出元素上滑和下滑、星空閃爍案例自定義動(dòng)畫、停止元素動(dòng)畫的方法判斷元素是否是動(dòng)畫狀態(tài)、無(wú)縫輪播效果的實(shí)現(xiàn)1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.培養(yǎng)學(xué)生嚴(yán)謹(jǐn)求實(shí)的學(xué)習(xí)態(tài)度4.培養(yǎng)學(xué)生規(guī)范化的職業(yè)習(xí)慣5.培養(yǎng)學(xué)生相關(guān)協(xié)助的團(tuán)隊(duì)意識(shí)6.具有良好的網(wǎng)絡(luò)素養(yǎng)1.熟悉jQuery中常用動(dòng)畫的使用2.掌握jQuery中如何自定義動(dòng)畫3.掌握jQuery中停止動(dòng)畫的作用及使用1.能夠使用jQuery動(dòng)畫進(jìn)行頁(yè)面操作2.能夠使用jQuery中的animate()創(chuàng)建自定義動(dòng)畫3.能夠使用jQuery中的stop()方法停止動(dòng)畫學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：元素的顯示和隱藏、元素的淡入和淡出學(xué)習(xí)環(huán)節(jié)3：元素上滑和下滑、星空閃爍案例學(xué)習(xí)環(huán)節(jié)4：自定義動(dòng)畫、停止元素動(dòng)畫的方法學(xué)習(xí)環(huán)節(jié)5：判斷元素是否是動(dòng)畫狀態(tài)、無(wú)縫輪播效果的實(shí)現(xiàn)圖片輪播效果的實(shí)現(xiàn)3+115綜合信息網(wǎng)站的實(shí)現(xiàn)DIV的標(biāo)記；jQuery滾動(dòng)圖片效果的實(shí)現(xiàn)；Bootstrap開源框架JavaScript表單驗(yàn)證1.養(yǎng)成細(xì)心、耐心、用心的學(xué)習(xí)習(xí)慣2.養(yǎng)成良好書寫代碼的習(xí)慣3.養(yǎng)成良好的瀏覽網(wǎng)頁(yè)、發(fā)布網(wǎng)頁(yè)的習(xí)慣4.具體團(tuán)隊(duì)合作意識(shí)5.具有吃苦耐勞的品質(zhì)6.具有良好的網(wǎng)絡(luò)素養(yǎng)掌握.jQuery滾動(dòng)圖片效果的實(shí)現(xiàn)；學(xué)會(huì)Bootstrap開源框架基本結(jié)構(gòu)的使用掌握J(rèn)avaScript表單驗(yàn)證的方法學(xué)會(huì)使用DIV的標(biāo)記；掌握jQuery滾動(dòng)圖片效果的實(shí)現(xiàn)方式；了解Bootstrap開源框架學(xué)會(huì)使用JavaScript表單驗(yàn)證學(xué)習(xí)環(huán)節(jié)1：回顧上節(jié)課內(nèi)容，創(chuàng)設(shè)情境，導(dǎo)入本章內(nèi)容學(xué)習(xí)環(huán)節(jié)2：綜合信息網(wǎng)站框架的實(shí)現(xiàn)學(xué)習(xí)環(huán)節(jié)3：頁(yè)面頭部、banner及導(dǎo)航具體實(shí)現(xiàn)學(xué)習(xí)環(huán)節(jié)4：圖片瀏覽及新聞欄實(shí)現(xiàn)；學(xué)習(xí)環(huán)節(jié)5：房產(chǎn)、教育等信息欄的具體實(shí)現(xiàn)頁(yè)腳及W3C驗(yàn)證；綜合信息網(wǎng)的實(shí)現(xiàn)6+216綜合項(xiàng)目實(shí)踐自行設(shè)計(jì)一款主題網(wǎng)站畫出頁(yè)面布局圖DIV劃分布局模塊實(shí)現(xiàn)頁(yè)面布局圖1.逐步培養(yǎng)細(xì)心、耐心的工作態(tài)度。2.培養(yǎng)團(tuán)隊(duì)協(xié)作和溝通交流的工作能力。3.培養(yǎng)表述、回答等語(yǔ)言表達(dá)能力，以及規(guī)范書寫代碼的習(xí)慣；4.培養(yǎng)學(xué)生具有良好的科學(xué)素養(yǎng)和職業(yè)道德；1.掌握CSS控制背景、超鏈接、列表樣式2.掌握使用jQuery元素的選取的使用3.掌握jQuery元素控制及CSS樣