《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門_第1頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門_第2頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門_第3頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門_第4頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH06 jQuery入門_第5頁
已閱讀5頁，還剩23頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第6章jQuery入門本章學(xué)習(xí)目標(biāo) 了解jQuery的下載與使用； 掌握jQuery的基礎(chǔ)語法結(jié)構(gòu)； 掌握jQuery文檔就緒函數(shù)的用法； 掌握jQuery名稱沖突的解決方案。目錄6.1jQuery下載和使用6.2jQuery語法6.1jQuery下載和使用6.1.1jQuery的下載6.1.2jQuery的使用6.1.1jQuery的下載jQuery是一種開源函數(shù)庫，讀者可以直接訪問官網(wǎng)頁面（/download/）進(jìn)行下載。目前常用的jQuery分為1.x、2.x和3.x版本，本書將選擇官方推薦的1.12.x系列版本作為示例，因?yàn)樵摪姹镜臑g覽器兼容性相對(duì)較好。6.1.1jQuery的下載圖所示為jQuery的官方下載頁面。6.1.1jQuery的下載以1.12.3版本為例，下載完整版點(diǎn)擊“DownloadtheuncompresseddevelopmentjQuery1.12.3”，下載壓縮版點(diǎn)擊“DownloadthecompressedproductionjQuery1.12.3”。完整版的文件后綴名為.js，常用于開發(fā)和調(diào)試；壓縮版的文件后綴名為.min.js，里面保留了所有的jQuery函數(shù)并提升了產(chǎn)品性能，適用于正式發(fā)布。6.1.1jQuery的下載注：由于官方不定期會(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（混淆壓縮包，更加精簡加載效率高，適合正式環(huán)境）供讀者使用。6.1.2jQuery的使用和其他JavaScript文件的使用方式一樣，可以通過<script>標(biāo)簽在HTML文檔的首部標(biāo)簽<head>和</head>中添加jQuery的引用聲明。語法如下：<scriptsrc="jQuery文件URL"></script>上述代碼中的jQuery文件URL需要替換為實(shí)際的jQuery文件引用地址。6.1.2jQuery的使用需要注意的是，HTML4.01版<script>元素首標(biāo)簽需要寫成<scripttype="text/javascript"src="jQuery文件URL">；而在HTML5中可以省略其中的type="text/javascript"，直接寫成<scriptsrc="jQuery文件URL">即可。6.1.2jQuery的使用以jquery1.12.3.js為例，將該文件放置在和網(wǎng)頁同一個(gè)文件夾下，則使用聲明寫法如下：上述代碼聲明完成后就可以在頁面上添加jQuery相關(guān)語句了。<scriptsrc="jquery1.12.3.js"></script>注：引用的jQuery文件名是可以下載后由開發(fā)者重新自定義的，例如上述代碼中的文件名如若改成了jquery.js，那么引用時(shí)也需要同步更新為<scriptsrc="jquery.js"></script>即可。6.2jQuery語法jQuery的語法是專門為HTML元素的選取編制的，可以對(duì)元素執(zhí)行操作。6.2jQuery語法6.2.1基礎(chǔ)語法結(jié)構(gòu)6.2.2文檔就緒函數(shù)6.2.3jQuery名稱沖突6.2.1基礎(chǔ)語法結(jié)構(gòu)jQuery的基礎(chǔ)語法結(jié)構(gòu)如下：其中美元符號(hào)$表示jQuery語句，選擇符selector用于查詢HTML元素，action()需要替換為對(duì)元素某種具體操作的方法名。$(selector).action()6.2.1基礎(chǔ)語法結(jié)構(gòu)例如：在HTML中<p>表示段落標(biāo)簽，hide()為jQuery中的新方法用于隱藏元素。因此上述代碼表示隱藏所有段落。$("p").hide();6.2.2文檔就緒函數(shù)為了避免文檔在加載完成前就運(yùn)行了jQuery代碼導(dǎo)致潛在的錯(cuò)誤，所有的jQuery函數(shù)都需要寫在一個(gè)文檔就緒（documentready）函數(shù)中。例如當(dāng)前HTML頁面還沒有加載完，因此某HTML元素標(biāo)簽可能還無法查詢獲取。6.2.2文檔就緒函數(shù)文檔就緒函數(shù)的寫法如下：$(document).ready(function(){jQuery函數(shù)內(nèi)容});6.2.2文檔就緒函數(shù)【例6-1】jQuery文檔就緒函數(shù)的使用6.2.2文檔就緒函數(shù)【例6-1】jQuery文檔就緒函數(shù)的使用<head><metacharset="utf-8"><title>jQuery文檔準(zhǔn)備就緒</title><scriptsrc="js/jquery-1.12.3.min.js"></script></head>6.2.2文檔就緒函數(shù)【例6-1】jQuery文檔就緒函數(shù)的使用<body><h3>jQuery文檔準(zhǔn)備就緒函數(shù)的應(yīng)用</h3><hr><script>$(document).ready(function(){alert("jQuery文檔準(zhǔn)備就緒！");});</script></body>6.2.3jQuery名稱沖突jQuery通常使用美元符號(hào)$作為簡寫方式，但在同時(shí)使用了多個(gè)JavaScript函數(shù)庫的HTML文檔中jQuery就有可能與其他同樣使用$符號(hào)的函數(shù)（例如Prototype）沖突。因此jQuery使用noConflict()方法自定義其他名稱來替換可能產(chǎn)生沖突的$符號(hào)表達(dá)方式。6.2.3jQuery名稱沖突【例6-2】jQuery自定義名稱代替$符號(hào)6.2.3jQuery名稱沖突【例6-2】jQuery自定義名稱代替$符號(hào)<head><metacharset="utf-8"><title>jQuery自定義名稱代替$符號(hào)</title><scriptsrc="js/jquery-1.12.3.min.js"></script></head>6.2.3jQuery名稱沖突【例6-2】jQuery自定義名稱代替$符號(hào)<body><h3>jQuery自定義名稱代替$符號(hào)</h3><hr><button>

測試jQuery別名</button><script>varjq=jQuery.noConflict();jq(document).ready(function(){jq("button").click(function(){alert("jQuery的別名生效了！");

溫馨提示

  • 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)論