JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第7章_第1頁(yè)
JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第7章_第2頁(yè)
JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第7章_第3頁(yè)
JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第7章_第4頁(yè)
JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第7章_第5頁(yè)
已閱讀5頁(yè)，還剩23頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第7章

jQuery簡(jiǎn)介本章主要內(nèi)容：了解jQueryjQuery資源使用jQuery7.1了解jQueryjQuery是一個(gè)免費(fèi)、開源的輕量級(jí)JavaScript庫(kù)，其設(shè)計(jì)宗旨是“WriteLess,DoMore”，即提倡用更少的代碼，做更多的事。jQuery最初由JohnResig開發(fā)，于2006年1月在紐約的BarCamp會(huì)議上發(fā)布。現(xiàn)在，jQuery已發(fā)展為一個(gè)開源項(xiàng)目。jQueryUI以jQuery為基礎(chǔ)，提供用于構(gòu)建Web圖形界面的UI組件。jQueryMobile則以jQuery為基礎(chǔ)，用移動(dòng)平臺(tái)專用組件對(duì)其進(jìn)行了擴(kuò)展，用于移動(dòng)應(yīng)用開發(fā)。7.1.1jQuery主要功能jQuery主要提供下列功能。選取和操作HTML元素：jQuery提供了豐富、高效的選擇器，可準(zhǔn)確選取HTML文檔中的一個(gè)或多個(gè)元素，并可操作HTML元素的外觀和行為。操作CSS：直接使用JavaScript操作頁(yè)面中的CSS樣式表會(huì)受限于瀏覽器的兼容性，jQuery很好地解決了瀏覽器兼容問題。標(biāo)準(zhǔn)化HTML事件處理：jQuery提供了豐富的頁(yè)面事件處理方法，不僅解決了瀏覽器兼容問題，而且使事件處理更加簡(jiǎn)單。支持網(wǎng)頁(yè)特效和動(dòng)畫：jQuery提供了豐富的頁(yè)面特效，通過簡(jiǎn)單地調(diào)用內(nèi)置的動(dòng)畫函數(shù)，即可實(shí)現(xiàn)高級(jí)動(dòng)畫特效。簡(jiǎn)化了HTMLDOM操作：jQuery降低了JavaScript操作DOM的復(fù)雜性，只需極少的代碼即可完成復(fù)雜的DOM操作。簡(jiǎn)單的AJAX操作：開發(fā)人員只需簡(jiǎn)單地調(diào)用函數(shù)即可完成AJAX請(qǐng)求，獲得服務(wù)器端的響應(yīng)，而無(wú)須考慮客戶端和服務(wù)器之間的通信細(xì)節(jié)。7.1.2jQuery主要特點(diǎn)1．簡(jiǎn)潔jQuery庫(kù)非常小，未壓縮的庫(kù)（3.7.1版）只有287KB。2．功能強(qiáng)大傳統(tǒng)的JavaScript腳本編程方式需要開發(fā)人員具備良好的程序設(shè)計(jì)功底，并熟練掌握HTML、CSS和DOM等各種Web開發(fā)技術(shù)。JavaScript腳本在客戶端瀏覽器中解釋執(zhí)行，在大型Web應(yīng)用中調(diào)試和維護(hù)JavaScript腳本往往會(huì)耗費(fèi)開發(fā)人員的大量精力。jQuery改變了傳統(tǒng)的JavaScript編程方式。使用jQuery提供的函數(shù)，即可快速實(shí)現(xiàn)各種功能，代碼更加簡(jiǎn)潔、結(jié)構(gòu)清晰。3．兼容各種瀏覽器本書前面的章節(jié)回避了JavaScript的瀏覽器兼容問題，原因是目前的各種瀏覽器對(duì)JavaScript的支持越來(lái)越全面。而使用jQuery不需要考慮瀏覽器兼容問題。jQuery具有良好的瀏覽器兼容能力，支持各種主流瀏覽器：Chrome、Edge、Firefox、Safari和Opera等。7.2jQuery資源jQuery主頁(yè)提供各種相關(guān)資源7.2.1下載jQueryjQuery庫(kù)有3種類型。uncompressed：未壓縮版，包含各種注釋、空白和換行符等，適用于開發(fā)階段。compressed：壓縮版，刪除了各種注釋、空白和換行符等，適用于Web應(yīng)用發(fā)布。slim：瘦身版，不包含ajax和effects模塊。jQuery庫(kù)是一個(gè)單獨(dú)的js代碼文件。7.2.2查看jQuery文檔在jQuery主頁(yè)中單擊“APIDocumentation”按鈕，可進(jìn)入jQuery文檔中心7.2.3jQuery學(xué)習(xí)中心在jQuery主頁(yè)右側(cè)的資源列表中單擊“jQueryLearningCenter”鏈接，可進(jìn)入jQuery學(xué)習(xí)中心頁(yè)面7.2.4中文學(xué)習(xí)資源菜鳥教程提供了在線的中文jQuery學(xué)習(xí)資源7.3使用jQuery要使用jQuery庫(kù)，需要在HTML文檔中將其引入。引入后，即可在腳本中調(diào)用jQuery庫(kù)提供的各種函數(shù)。7.3.1引入jQuery在HTML文檔中使用<script>標(biāo)記來(lái)引入jQuery。有兩種引入jQuery庫(kù)的方法：引用本地jQuery庫(kù)引用CDN上的jQuery庫(kù)。1．引入本地jQuery庫(kù)可將jQuery庫(kù)下載到本地，放在和HTML文檔相同的文件夾或子文件夾中，也可放在本地Web服務(wù)器中。對(duì)初學(xué)者而言，建議將jQuery庫(kù)下載到本地，放在和HTML文檔相同的文件夾中。然后，在HTML文檔中使用下面的語(yǔ)句將其引入。<script

src="jquery-3.7.1.min.js"></script>jquery-3.7.1.min.js是下載到本地的jQuery庫(kù)文件名，該名稱包含了版本號(hào)，“min”表示是壓縮版的庫(kù)文件。2．引入CDN上的jQuery庫(kù)CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)網(wǎng)絡(luò)）是互聯(lián)網(wǎng)中提供文本、圖片、腳本、應(yīng)用程序或其他資源的網(wǎng)絡(luò)服務(wù)器。通常，CDN只提供各類資源的穩(wěn)定版本。兩個(gè)常用CDN中的jQuery查詢地址和引用地址如下。jQueryCDN：。jQuery3.7.1引用地址為https://code./jquery-3.7.1.js。微軟CDN：/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0。jQuery3.7.1引用地址為/ajax/jQuery/jquery-3.7.1.js。例如，下面的語(yǔ)句從jQueryCDN引入壓縮版的jQuery庫(kù)。<script

src="/jquery-3.7.1.js"></script>7.3.2jQuery語(yǔ)法jQuery()函數(shù)是jQuery庫(kù)中最重要的一個(gè)函數(shù)，大多數(shù)jQuery腳本都是從jQuery()函數(shù)開始的。$是jQuery的別名，絕大多數(shù)開發(fā)人員喜歡使用$()而不是jQuery()。jQuery基礎(chǔ)語(yǔ)法格式如下。$(selector).action()其中，selector為選擇器，用于選取HTML標(biāo)記，action()為對(duì)選中HTML標(biāo)記執(zhí)行的操作。<html><head>

<!--引入本地jQuery庫(kù)-->

<script

src="jquery-3.7.1.min.js"></script></head><body>

<div

id="show"></div>

<script>

$(function

()

{

$("#show").text("你好，jQuery！")//修改id為show的標(biāo)記的文本內(nèi)容

})

</script>jQuery代碼的基本結(jié)構(gòu)

<script>

$(document).ready(function

()

{

…//jQuery腳本

})

</script>jQuery腳本放在$(document).ready()的回調(diào)函數(shù)中ready()函數(shù)的調(diào)用方式j(luò)Query提供了多種調(diào)用ready()函數(shù)的方式。$(回調(diào)函數(shù))。$(document).ready(回調(diào)函數(shù))。$("document").ready(回調(diào)函數(shù))。$("img").ready(回調(diào)函數(shù))。$().ready(回調(diào)函數(shù))。jQuery3.x推薦使用第1種方法，其他方法仍可使用但已過時(shí)。參數(shù)“回調(diào)函數(shù)”可以是函數(shù)名稱，也可以是一個(gè)匿名函數(shù)。7.3.3選取HTML標(biāo)記$()函數(shù)的第1個(gè)參數(shù)有多種形式：字符串形式的CSS選擇器、字符串形式的HTML標(biāo)記、一個(gè)或多個(gè)DOM元素或者一個(gè)函數(shù)。$()函數(shù)返回一個(gè)jQuery對(duì)象，該對(duì)象封裝了參數(shù)匹配的HTML標(biāo)記或者新建的HTML標(biāo)記。如果有多個(gè)匹配的HTML標(biāo)記，則返回對(duì)象是一個(gè)jQuery對(duì)象數(shù)組。對(duì)jQuery對(duì)象執(zhí)行的操作將作用于其包含的所有標(biāo)記。7.3.4上下文$()函數(shù)的第2個(gè)參數(shù)指定上下文——HTML標(biāo)記的選擇范圍。如果沒有指定上下文，則在整個(gè)HTML文檔中選擇標(biāo)記。7.3.5將HTML標(biāo)記轉(zhuǎn)換為jQuery對(duì)象$()函數(shù)可將HTML標(biāo)記轉(zhuǎn)換為jQuery對(duì)象。7.3.6使用鏈接方法調(diào)用jQuery中的大部分方法都會(huì)返回其操作的jQuery對(duì)象，所以可使用句點(diǎn)符號(hào)來(lái)實(shí)現(xiàn)鏈接方法調(diào)用，使代碼更簡(jiǎn)潔。7.3.7jQuery命名空間jQuery引入了命名空間的概念。jQuery腳本中的所有全局變量均屬于jQuery命名空間，jQuery和$均表示jQuery命名空間。在與其他JavaScript庫(kù)一起使用時(shí)，可能會(huì)出現(xiàn)$標(biāo)識(shí)符沖突的情況。jQuery提供了noConflict()方法用于避免沖突。noConflict()方法返回全局jQuery

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論