jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程電子教案 第4單元 使用jQuery 操作DOM_第1頁
jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程電子教案 第4單元 使用jQuery 操作DOM_第2頁
jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程電子教案 第4單元 使用jQuery 操作DOM_第3頁
jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程電子教案 第4單元 使用jQuery 操作DOM_第4頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

PAGE1PAGE第3章使用jQuery操作DOM課程名稱jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程項目名稱使用jQuery操作DOM任務(wù)名稱使用jQuery操作DOM課時5項目性質(zhì)□演示性□驗證性□設(shè)計性√綜合性授課班級授課日期授課地點教學(xué)目標(biāo)知識目標(biāo)1.了解DOM操作分類。2.掌握對元素內(nèi)容和值進行操作。3.掌握對DOM文檔節(jié)點進行操作。4.掌握對元素屬性進行操作。5.掌握對元素的CSS樣式進行操作。能力目標(biāo)1.能夠熟練使用jQuery對DOM文檔節(jié)點的操作。2.能夠?qū)υ貎?nèi)容和值進行操作。素質(zhì)目標(biāo)1.培養(yǎng)學(xué)生邏輯思維能力。培養(yǎng)學(xué)生細節(jié)注意力。教學(xué)內(nèi)容1.任務(wù)描述2.任務(wù)展示與實現(xiàn)（1）對元素內(nèi)容和元素值進行操作（2）在頁面中對DOM文檔節(jié)點進行操作（2）學(xué)生動手操作3.教師講解本任務(wù)涉及的知識點4.任務(wù)小結(jié)教學(xué)重點1.元素內(nèi)容的操作方法2.DOM文檔節(jié)點的操作方法3.編寫jQuery代碼教學(xué)難點1.使用jQuery操作DOM中的元素及對象教學(xué)準(zhǔn)備1.裝有jQuery的電腦2.教學(xué)課件PPT3.教材：《jQuery網(wǎng)頁特效設(shè)計基礎(chǔ)教程》作業(yè)設(shè)計1．應(yīng)用jQuery實現(xiàn)開心小農(nóng)場游戲教學(xué)過程教學(xué)內(nèi)容與過程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）做好課前“5分鐘”教學(xué)管理（多媒體、實訓(xùn)室），做好上課前的各項準(zhǔn)備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計劃、教案等），吸引學(xué)生注意力?！菊n前說明】本章主要介紹了DOM操作的分類、jQuery對元素的內(nèi)容和值的操作方法、jQuery對DOM文檔節(jié)點的操作方法、jQuery對元素屬性的操作方法、jQuery對元素的CSS樣式的操作方法等知識點。其中重點介紹了對DOM文檔節(jié)點的創(chuàng)建、查找、插入、刪除、復(fù)制、替換、包裹、遍歷等?！灸康摹渴箤W(xué)生從了解本單元的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點、考評方式等方面明確學(xué)習(xí)本單元知識的要求和目標(biāo)。一、DOM操作的分類通常來說，DOM操作分為3方面：DOMCore、HTML-DOM和CSS-DOM。二、使用jQuery操作DOM中的元素及對象通過多個案例講解jQuery的操作方法，包括jQuery對元素的內(nèi)容和值的操作方法、jQuery對DOM文檔節(jié)點的操作方法、jQuery對元素屬性的操作方法、jQuery對元素的CSS樣式的操作方法等。案例：1.設(shè)置div元素的文本內(nèi)容（1）創(chuàng)建一個名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script>（2）在頁面的<body>標(biāo)記中添加一個<div>元素，令它的文本內(nèi)容為空。代碼如下：<div></div>（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實現(xiàn)為<div>標(biāo)記設(shè)置文本內(nèi)容。具體代碼如下：<scripttype="text/javascript">$(document).ready(function(){ $("div").text("我是通過text()方法設(shè)置的文本內(nèi)容");});</script>2.使用each()方法img遍歷元素（1）創(chuàng)建一個名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script>（2）在頁面的<body>標(biāo)記中，使用<img>標(biāo)簽添加5張圖片，代碼如下：<imgheight=60src="images/01.jpg"width=80/><imgheight=60src="images/02.jpg"width=80/><imgheight=60src="images/03.jpg"width=80/><imgheight=60src="images/04.jpg"width=80/><imgheight=60src="images/05.jpg"width=80/>（3）在引入jQuery庫的代碼下方編寫jQuery代碼，使用each()方法遍歷img全部圖片，給每一張圖片添加一個title屬性，即鼠標(biāo)指針移動到圖片上面時的提示信息。具體代碼如下：$("img").each(function(index){ $(this).attr("title","第"+(index+1)+"張圖片");})綜合實例：實現(xiàn)我的開心小農(nóng)場通過jQuery可以很方便地對DOM節(jié)點進行操作，通過“我的開心小農(nóng)場”實例來說明通過jQuery操作DOM節(jié)點的具體應(yīng)用。本實例的需求主要有以下兩點。（1）在頁面中引入農(nóng)場圖片，單擊“播種”“生長”“開花”“結(jié)果”按鈕時，在農(nóng)場中顯示相應(yīng)效果。（2）在IE6之前版本的瀏覽器下，png格式圖片有背景，將其處理為透明效果。通過學(xué)習(xí)，學(xué)生能夠掌握DOM操作的分類、使用jQuery操作DOM中的元素及對象的方法。本節(jié)課主要運用案例教學(xué)法，通過對jQuery操作DOM中元素及對象方法的深入理解，掌握jQuery操作DOM中元素及對象方法的特點及優(yōu)勢，深入探討jQuery操作DOM中元素及對象的編程方法，通過實例的方法加強對jQuery

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論