《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第14周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學(xué)課時??：理論2學(xué)時+實踐1學(xué)時??授課對象??：計算機相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第7章jQuery基礎(chǔ)知識二、教學(xué)目標(biāo)（一）知識目標(biāo)了解jQuery的概念、優(yōu)勢及下載安裝方法，掌握jQuery的基本使用（引入方式、$(document).ready()的作用）。掌握jQuery選擇器：基本選擇器（標(biāo)簽、id、類）、高級選擇器（過濾器、屬性、偽類）的語法及應(yīng)用。掌握jQuery事件處理（綁定、解綁、觸發(fā)、事件委托）及內(nèi)容/樣式處理（屬性、類、文本、CSS樣式操作）。能運用jQuery實現(xiàn)表單驗證、動畫效果等進(jìn)階應(yīng)用，理解jQuery與原生JavaScript的區(qū)別與聯(lián)系。（二）思政目標(biāo)通過jQuery簡化開發(fā)的案例，培養(yǎng)高效編程思維和靈活解決問題的能力。在選擇器與事件處理的實踐中，強化需求分析能力，學(xué)會根據(jù)場景選擇合適的技術(shù)方案。結(jié)合表單驗證等案例，培養(yǎng)嚴(yán)謹(jǐn)?shù)拈_發(fā)態(tài)度，理解軟件質(zhì)量（如易用性、安全性）的重要性。三、教學(xué)重難點（一）教學(xué)重點jQuery的基本使用：引入方式、$符號的含義、$(document).ready()的作用。選擇器：基本選擇器：$("#id")、$(".class")、$("tag")高級選擇器：:eq(index)、[attribute=value]、:checked事件處理：click()、on()、off()、trigger()的用法。內(nèi)容與樣式處理：attr()、addClass()、text()、html()、css()。（二）教學(xué)難點jQuery對象與DOM對象的區(qū)別及轉(zhuǎn)換（[0]或get(0)）。高級選擇器的組合使用（如$("div:eq(2).active")）。事件委托的原理及應(yīng)用場景（.delegate()或.on()委托事件）。鏈?zhǔn)秸{(diào)用的理解（如$("#box").css().text().click()）。四、教學(xué)方法講授法：系統(tǒng)講解jQuery的核心概念、選擇器、事件處理及樣式操作。案例演示法：結(jié)合教材示例（例7-1至例7-4），實時運行代碼，對比原生JavaScript與jQuery的實現(xiàn)差異。對比分析法：對比jQuery選擇器與CSS選擇器的異同、jQuery事件處理與原生事件綁定的優(yōu)劣。任務(wù)驅(qū)動法：實踐課通過“jQuery表單驗證與動態(tài)效果”任務(wù)，綜合應(yīng)用選擇器、事件及樣式處理。五、教學(xué)過程（一）第一學(xué)時：jQuery基礎(chǔ)與選擇器（40分鐘）導(dǎo)入（5分鐘）回顧：原生JavaScript操作DOM的繁瑣（如getElementById、addEventListener）。提問：“如何用更簡潔的代碼實現(xiàn)元素選擇和事件綁定？”引出jQuery的優(yōu)勢。jQuery簡介與基本使用（15分鐘）概念：jQuery是封裝了原生JavaScript的庫，簡化DOM操作、事件處理等。下載與引入：從官網(wǎng)下載或使用CDN，通過<scriptsrc="jquery.min.js"></script>引入。核心語法：$符號：jQuery的簡寫，$(selector)用于選擇元素。$(document).ready(function(){...})：DOM加載完成后執(zhí)行代碼，避免元素未加載導(dǎo)致的錯誤（例7-1）。案例：用jQuery修改元素文本（對比原生JavaScript，突出簡潔性）。選擇器（20分鐘）基本選擇器（表7-1）：id選擇器：$("#block")選擇id為block的元素。類選擇器：$(".block")選擇類為block的所有元素。標(biāo)簽選擇器：$("div")選擇所有div元素。組合選擇器：$("span,#block")選擇span標(biāo)簽和id為block的元素。高級選擇器：過濾器：$("li:first")（第一個li）、$("li:eq(2)")（索引為2的li）。屬性選擇器：$("input[type='text']")選擇文本輸入框。演示：用不同選擇器選中頁面元素并修改樣式（如$("p:even").css("color","red")）。（二）第二學(xué)時：事件處理與內(nèi)容/樣式操作（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）回顧：jQuery選擇器的用法，提問：“選中元素后如何響應(yīng)用戶操作？”引出事件處理。事件處理（15分鐘）綁定事件：click()、mouseenter()等（例7-2）。通用綁定與解綁：on("event",function())和off("event")。事件委托：$("#container").delegate("button","click",function(){...})，適用于動態(tài)生成的元素。事件對象：event.target獲取觸發(fā)事件的元素。內(nèi)容與樣式處理（15分鐘）屬性操作：attr("src","img.jpg")（設(shè)置屬性）、attr("title")（獲取屬性）。類操作：addClass("active")、removeClass("active")、toggleClass("active")。內(nèi)容操作：text("文本")（設(shè)置文本）、html("<b>HTML</b>")（設(shè)置HTML）、val()（表單值）。樣式操作：css("color","red")（設(shè)置樣式）、width(200)（設(shè)置寬度）。案例：點擊按鈕切換元素類名，實現(xiàn)樣式變化。進(jìn)階應(yīng)用簡介（5分鐘）預(yù)覽：表單驗證（例7-3）、動畫效果（slideDown()、fadeIn()），為實踐課鋪墊。（三）實踐學(xué)時：jQuery表單驗證與動態(tài)效果（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：制作一個帶驗證的注冊表單，功能如下：輸入框為空時，添加紅色邊框提示（addClass("error")）。密碼與確認(rèn)密碼不一致時，提示錯誤。點擊“提交”按鈕，驗證通過后顯示成功動畫（fadeIn()）。提示：使用$("#form").submit()綁定提交事件，event.preventDefault()阻止默認(rèn)提交。學(xué)生實踐（30分鐘）教師指導(dǎo)重點：選擇器的精準(zhǔn)使用（如$("input[type='text']")選中所有文本框）。事件委托處理動態(tài)生成的錯誤提示信息。鏈?zhǔn)秸{(diào)用簡化代碼（如