《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》 第06章教案-jQuery入門_第1頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》 第06章教案-jQuery入門_第2頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》 第06章教案-jQuery入門_第3頁
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡(jiǎn)介

《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》教案第6章jQuery入門一、教學(xué)目標(biāo)：了解jQuery的下載與使用；掌握jQuery的基礎(chǔ)語法結(jié)構(gòu)；掌握jQuery文檔就緒函數(shù)的用法；掌握jQuery名稱沖突的解決方案。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery的基礎(chǔ)語法結(jié)構(gòu)；難點(diǎn)：jQuery名稱沖突的解決方案。三、教學(xué)方法與手段：采取互動(dòng)式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡(jiǎn)介：本章主要介紹jQuery基礎(chǔ)知識(shí)入門，包括jQuery的下載和使用、jQuery基礎(chǔ)語法結(jié)構(gòu)、jQuery文檔就緒函數(shù)以及jQuery名稱沖突的解決方案。五、教學(xué)基本內(nèi)容：6.1jQuery下載和使用6.1.1jQuery的下載jQuery是一種開源函數(shù)庫，讀者可以直接訪問官網(wǎng)頁面（/download/）進(jìn)行下載。目前常用的jQuery分為1.x、2.x和3.x版本，本書將選擇官方推薦的1.12.x系列版本作為示例，因?yàn)樵摪姹镜臑g覽器兼容性相對(duì)較好。以1.12.3版本為例，下載完整版點(diǎn)擊“DownloadtheuncompresseddevelopmentjQuery1.12.3”，下載壓縮版點(diǎn)擊“DownloadthecompressedproductionjQuery1.12.3”。完整版的文件后綴名為.js，常用于開發(fā)和調(diào)試；壓縮版的文件后綴名為.min.js，里面保留了所有的jQuery函數(shù)并提升了產(chǎn)品性能，適用于正式發(fā)布。注：由于官方不定期會(huì)更新可供下載的頁面jQuery版本，可能實(shí)際訪問的時(shí)候已經(jīng)無法在官網(wǎng)的下載頁面下載1.x版的jQuery文件了，雖然官方也另外提供了一個(gè)歷年jQuery版本下載地址/DanielRuf/snyk-js-jquery-565129，但是由于服務(wù)器在海外有時(shí)打開非常慢。讀者也可以直接使用本書配套提供的源碼包，從第6章開始后續(xù)每章節(jié)例題源代碼包中的js目錄下均包含了jquery-1.12.3.js（未壓縮包，可查看源代碼，適合開發(fā)學(xué)習(xí)過程）和jquery-1.12.3.min.js（混淆壓縮包，更加精簡(jiǎn)加載效率高，適合正式環(huán)境）供讀者使用。6.1.2jQuery的使用和其他JavaScript文件的使用方式一樣，可以通過<script>標(biāo)簽在HTML文檔的首部標(biāo)簽<head>和</head>中添加jQuery的引用聲明。語法如下：<scriptsrc="jQuery文件URL"></script>上述代碼中的jQuery文件URL需要替換為實(shí)際的jQuery文件引用地址。需要注意的是，HTML4.01版<script>元素首標(biāo)簽需要寫成<scripttype="text/javascript"src="jQuery文件URL">；而在HTML5中可以省略其中的type="text/javascript"，直接寫成<scriptsrc="jQuery文件URL">即可。以jquery1.12.3.js為例，將該文件放置在和網(wǎng)頁同一個(gè)文件夾下，則使用聲明寫法如下：<scriptsrc="jquery1.12.3.js"></script>上述代碼聲明完成后就可以在頁面上添加jQuery相關(guān)語句了。注：引用的jQuery文件名是可以下載后由開發(fā)者重新自定義的，例如上述代碼中的文件名如若改成了jquery.js，那么引用時(shí)也需要同步更新為<scriptsrc="jquery.js"></script>即可。6.2jQuery語法jQuery的語法是專門為HTML元素的選取編制的，可以對(duì)元素執(zhí)行操作。6.2.1基礎(chǔ)語法結(jié)構(gòu)jQuery的基礎(chǔ)語法結(jié)構(gòu)如下：$(selector).action()其中美元符號(hào)$表示jQuery語句，選擇符selector用于查詢HTML元素，action()需要替換為對(duì)元素某種具體操作的方法名。例如：$("p").hide();在HTML中<p>表示段落標(biāo)簽，hide()為jQuery中的新方法用于隱藏元素。因此上述代碼表示隱藏所有段落。6.2.2文檔就緒函數(shù)為了避免文檔在加載完成前就運(yùn)行了jQuery代碼導(dǎo)致潛在的錯(cuò)誤，所有的jQuery函數(shù)都需要寫在一個(gè)文檔就緒（documentready）函數(shù)中。例如當(dāng)前HTML頁面還沒有加載完，因此某HTML元素標(biāo)簽可能還無法查詢獲取。文檔就緒函數(shù)的寫法如下：$(document).ready(function(){jQuery函數(shù)內(nèi)容});6.2.3jQuery名稱沖突jQuery通常使用美元符號(hào)$作為簡(jiǎn)介方式，在同時(shí)使用了多個(gè)JavaScript函數(shù)庫的HTML文檔中jQuery就有可能與其他同樣使用$符號(hào)的函數(shù)（例如Prototype）沖突。因此jQuery使用noConflict()方法自定義其他名稱來替換可能產(chǎn)生沖突的$符號(hào)表達(dá)方式。【例6-1】jQuery自定義名稱代替$符號(hào)使用noConflict()方法創(chuàng)建自定義名稱jq代替$符號(hào)?！敬a說明】本示例使用別名jq代替$符號(hào)，并在文檔就緒函數(shù)中為按鈕button綁定了一個(gè)click點(diǎn)擊事件。如果點(diǎn)擊按鈕后alert語句仍然能被執(zhí)行，說明jQuery的自定義別名有效。由圖可見，當(dāng)前jQuery的別名可以正常使用。6.3本章小結(jié)本章主要是jQuery的基礎(chǔ)知識(shí)入門，首先介紹了jQuery文件如何下載和使用，其次介紹了jQuery的常用語法，包括基礎(chǔ)語法結(jié)構(gòu)、文檔就緒函數(shù)以及jQuery別名的使用。六、課后習(xí)題1.如何在文檔中引用jQuery？答：以jquery-1.12.3.min.js為例，代碼如下。<scriptsrc="js/jquery-1.12.3.min.js"></script>2.請(qǐng)使用文檔就緒函數(shù)彈出alert提示框，并顯示"HellojQuer

溫馨提示

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

評(píng)論

0/150

提交評(píng)論