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

下載本文檔

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

文檔簡介

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

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

src="jquery-3.7.1.min.js"></script>jquery-3.7.1.min.js是下載到本地的jQuery庫文件名，該名稱包含了版本號，“min”表示是壓縮版的庫文件。2．引入CDN上的jQuery庫CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)網(wǎng)絡(luò)）是互聯(lián)網(wǎng)中提供文本、圖片、腳本、應(yīng)用程序或其他資源的網(wǎng)絡(luò)服務(wù)器。通常，CDN只提供各類資源的穩(wěn)定版本。兩個常用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。例如，下面的語句從jQueryCDN引入壓縮版的jQuery庫。<script

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

<!--引入本地jQuery庫-->

<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ù)“回調(diào)函數(shù)”可以是函數(shù)名稱，也可以是一個匿名函數(shù)。7.3.3選取HTML標(biāo)記$()函數(shù)的第1個參數(shù)有多種形式：字符串形式的CSS選擇器、字符串形式的HTML標(biāo)記、一個或多個DOM元素或者一個函數(shù)。$()函數(shù)返回一個jQuery對象，該對象封裝了參數(shù)匹配的HTML標(biāo)記或者新建的HTML標(biāo)記。如果有多個匹配的HTML標(biāo)記，則返回對象是一個jQuery對象數(shù)組。對jQuery對象執(zhí)行的操作將作用于其包含的所有標(biāo)記。7.3.4上下文$()函數(shù)的第2個參數(shù)指定上下文——HTML標(biāo)記的選擇范圍。如果沒有指定上下文，則在整個HTML文檔中選擇標(biāo)記。7.3.5將HTML標(biāo)記轉(zhuǎn)換為jQuery對象$()函數(shù)可將HTML標(biāo)記轉(zhuǎn)換為jQuery對象。7.3.6使用鏈接方法調(diào)用jQuery中的大部分方法都會返回其操作的jQuery對象，所以可使用句點符號來實現(xiàn)鏈接方法調(diào)用，使代碼更簡潔。7.3.7jQuery命名空間jQuery引入了命名空間的概念。jQuery腳本中的所有全局變量均屬于jQuery命名空間，jQuery和$均表示jQuery命名空間。在與其他JavaScript庫一起使用時，可能會出現(xiàn)$標(biāo)識符沖突的情況。jQuery提供了noConflict()方法用于避免沖突。noConflict()方法返回全局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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論