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

下載本文檔

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

文檔簡介

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

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

})

</script>jQuery代碼的基本結構

<script>

$(document).ready(function

()

{

…//jQuery腳本

})

</script>jQuery腳本放在$(document).ready()的回調(diào)函數(shù)中ready()函數(shù)的調(diào)用方式jQuery提供了多種調(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標記$()函數(shù)的第1個參數(shù)有多種形式：字符串形式的CSS選擇器、字符串形式的HTML標記、一個或多個DOM元素或者一個函數(shù)。$()函數(shù)返回一個jQuery對象，該對象封裝了參數(shù)匹配的HTML標記或者新建的HTML標記。如果有多個匹配的HTML標記，則返回對象是一個jQuery對象數(shù)組。對jQuery對象執(zhí)行的操作將作用于其包含的所有標記。7.3.4上下文$()函數(shù)的第2個參數(shù)指定上下文——HTML標記的選擇范圍。如果沒有指定上下文，則在整個HTML文檔中選擇標記。7.3.5將HTML標記轉換為jQuery對象$()函數(shù)可將HTML標記轉換為jQuery對象。7.3.6使用鏈接方法調(diào)用jQuery中的大部分方法都會返回其操作的jQuery對象，所以可使用句點符號來實現(xiàn)鏈接方法調(diào)用，使代碼更簡潔。7.3.7jQuery命名空間jQuery引入了命名空間的概念。jQuery腳本中的所有全局變量均屬于jQuery命名空間，jQuery和$均表示jQuery命名空間。在與其他JavaScript庫一起使用時，可能會出現(xiàn)$標識符沖突的情況。jQuery提供了noConflict()方法用于避免沖突。noConflict()方法返回全局jQuery

溫馨提示

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

評論

0/150

提交評論