jQuery

jQuery一個快速、簡潔的JavaScript框架,它的設計宗旨是「Write Less, Do More」,即倡導寫更少的代碼,做更多的事情。jQuery封裝了JavaScript常用的功能代碼,提供了一種簡便的JavaScript設計模式,優化了HTML文檔操作、事件處理、動畫設計和Ajax交互。本文將深入探討jQuery的概念、特點以及應用場景,幫助讀者更好地理解和使用這個強大的JavaScript庫。

自2006年問世以來,jQuery憑藉其獨特的鏈式語法和強大的功能,迅速成為前端開發領域的翹楚。它的核心理念是「寫更少的代碼,做更多的事情」,讓開發者能夠更加高效地編寫JavaScript代碼,從而大大加速了Web頁面的交互性和動態性的實現。

jQuery

產生背景

2005年8月,JohnResig提議改進Prototype的「Behaviour」庫,於是他在blog上發表了自己的想法,並用了3個例子做簡單的流程說明。

第一個例子是為元素註冊一個事件:

他認為應該改寫為:

他認為應該改寫為:

第三個例子是為不斷變化的元素註冊不同的事件:

他認為應該改寫為:

這些代碼也是jQuery語法的最初雛形。當時John的想法很簡單:他發現這種語法相對現有的JavaScript庫更為簡潔。但他沒想到的是,這篇文章一經發佈就引起了業界的關注。於是John開始認真思考着這件事情(編寫語法更為簡潔的JavaScript程序庫),直到2006年1月14日,John正式宣布以jQuery的名稱發佈自己的程序庫。隨之而來的是jQuery的快速發展。

2006年1月JohnResig等人創建了jQuery;8月,jQuery的第一個穩定版本,並且已經支持CSS選擇符、事件處理和AJAX交互。

2007年7月,jQuery1.1.3版發佈,這次小版本的變化包含了對jQuery選擇符引擎執行速度的顯著提升。從這個版本開始,jQuery的性能達到了Prototype、Mootools以及Dojo等同類JavaScript庫的水平。同年9月,jQuery1.2版發佈,它去掉了對XPath選擇符的支持,原因是相對於CSS語法它已經變得多餘了。這一版能夠對效果進行更為靈活的定製,而且藉助新增的命名空間事件,也使插件開發變得更容易。同時,jQueryUI項目也開始啟動,這個新的套件是作為曾經流行但已過時的Interface插件的替代項目而發佈的。jQueryUI中包含大量預定義好的部件(widget),以及一組用於構建高級元素(例如可拖放、拖拽、排序)的工具。

2008年5月,jQuery1.2.6版發佈,這版主要是將BrandonAaron開發的流行的Dimensions插件的功能移植到了核心庫中,同時也修改了許多BUG,而且有不少的性能得到提高。因此,如果以前的jQuery版本升級到1.2.6,那麼完全可以從代碼中排除Dimensions插件(一個獲得元素尺寸、定位的插件)。

在jQuery迅速發展的同時,一些大的廠商也看中了商機。2009年9月,微軟和諾基亞公司正式宣布支持開源的jQuery庫,另外,微軟公司還宣稱他們將把jQuery作為VisualStudio工具集的一部分。他將提供包括jQuery的智能提示、代碼片段、示例文檔編製等內容在內的功能。微軟和諾基亞公司將長期成為jQuery的用戶成員,其他成員還有Google,Intel,IBM,Intuit等公司。

2009年1月,jQuery1.3版發佈,它使用了全新的選擇符引擎Sizzle,在各個瀏覽器下全面超越其他同類型JavaScript框架的查詢速度,程序庫的性能也因此有了極大提升。這一版本的第2個變化就是提供live()方法,使用live()方法可以為當前及將來增加的元素綁定事件,在1.3版之前,如果要為將來增加的元素綁定事件,需要使用livequery插件,而在1.3版中,可以直接用live()方法。

2010年1月,也是jQuery的四周年生日,jQuery1.4版發佈,為了慶祝jQuery四周歲生日,jQuery團隊特別創建了jquery14.com站點,帶來了連續14天的新版本專題介紹。

在1.3及更早版本中,jQuery通過JavaScript的eval方法來解析json對象。在1.4中,如果你用的瀏覽器支持,則會使用原生的JSON.parse解析json對象,這樣對json對象的書寫驗證則更為嚴格。比如:{foo:”bar”}的寫法將不會被驗證為合法的json對象,必須寫成{“foo”:”bar”}。如果你的程序打算升級到1.4版本,那麼這一點要尤其注意。

2010年2月,jQuery1.4.2版發佈,它新增了有關事件委託的兩個方法:delegate()和undelegate()。delegate()用於替代1.3.2中的live()方法。這個方法比live()來的方便,而且也可以達到動態添加事件的作用。比如給表格的每個td綁定hover事件,代碼如下:

2011年1月,jQuery1.5版發佈。

2011年11月,jQuery1.7版發佈。

運行環境

運行jQuery所需的條件很簡單:一台計算機、一個智能電話或一個可以運行現代瀏覽器的設備。jQuery對瀏覽器的要求也相當自由。官方網站列出了下列支持jQuery的瀏覽器:

FirefoX2.0+

InternetExplorer6+

Safari3+

Opera10.6+

Chrome8+

編程工具

Notepad++:一套有特色的自由軟件的純文字編輯器,有完整的中文化接口及支持多國語言編寫的功能。它的功能比Windows中的Notepad(記事本)強大,除了可以用來製作一般的純文字說明文件,也十分適合當作編寫電腦程序的編輯器。Notepad++不僅有語法高亮度顯示,也有語法摺疊功能,並且支持宏以及擴充基本功能的外掛模組。

Brackets:一個免費、開源且跨平台的HTML/CSS/JavaScript前端WEB集成開發環境(IDE工具)。該項目由Adobe創建和維護,根據MIT許可證發佈,支持Windows、Linux平台。Brackets的特點是簡約、優雅、快捷,它的核心目標是減少在開發過程中那些效率低下的重複性工作,例如瀏覽器刷新,修改元素的樣式,搜索功能等等。

JSNice:一款讓經過混淆處理的JavaScript代碼可讀更好的工具。它使用一種用於JavaScript代碼美化的去混淆和去壓縮引擎。JSNice採用先進的機器學習和程序分析技術,從可用的開源項目學習命名和類型規律。

語言特點

快速獲取文檔元素

jQuery的選擇機制構建於Css的選擇器,它提供了快速查詢DOM文檔中元素的能力,而且大大強化了JavaScript中獲取頁面元素的方式。

提供漂亮的頁面動態效果

jQuery中內置了一系列的動畫效果,可以開發出非常漂亮的網頁,許多網站都使用jQuery的內置的效果,比如淡入淡出、元素移除等動態特效。

創建AJAX無刷新網頁

AJAX是異步的JavaScript和XML的簡稱,可以開發出非常靈敏無刷新的網頁,特別是開發服務器端網頁時,比如PHP網站,需要往返地與服務器通信,如果不使用AJAX,每次數據更新不得不重新刷新網頁,而使用AJAX特效后,可以對頁面進行局部刷新,提供動態的效果。

提供對JavaScript語言的增強

jQuery提供了對基本JavaScript結構的增強,比如元素迭代和數組處理等操作。

增強的事件處理

jQuery提供了各種頁面事件,它可以避免程序員在HTML中添加太多事件處理代碼,最重要的是,它的事件處理器消除了各種瀏覽器兼容性問題。

更改網頁內容

jQuery可以修改網頁中的內容,比如更改網頁的文本、插入或者翻轉網頁圖像,jQuery簡化了原本使用JavaScript代碼需要處理的方式。

原理

jQuery的模塊可以分為3部分:入口模塊、底層支持模塊和功能模塊。

在構造jQuery對象模塊中,如果在調用構造函數jQuery()創建jQuery對象時傳入了選擇器表達式,則會調用選擇器Sizzle(一款純JavaScript實現的CSS選擇器引擎,用於查找與選擇器表達式匹配的元素集合)遍歷文檔,查找與之匹配的DOM元素,並創建一個包含了這些DOM元素引用的jQuery對象。

瀏覽器功能測試模塊提供了針對不同瀏覽器功能和bug的測試結果,其他模塊則基於這些測試結果來解決瀏覽器之間的兼容性問題。

在底層支持模塊中,回調函數列表模塊用於增強對回調函數的管理,支持添加、移除、觸發、鎖定、禁用回調函數等功能;異步隊列模塊用於解耦異步任務和回調函數,它在回調函數列表的基礎上為回調函數增加了狀態,並提供了多個回調函數列表,支持傳播任意同步或異步回調函數的成功或失敗狀態;數據緩存模塊用於為DOM元素和Javascript對象附加任意類型的數據;隊列模塊用於管理一組函數,支持函數的入隊和出隊操作,並確保函數按順序執行,它基於數據緩存模塊實現。

在功能模塊中,事件系統提供了統一的事件綁定、響應、手動觸發和移除機制,它並沒有將事件直接綁定到DOM元素上,而是基於數據緩存模塊來管理事件;Ajax模塊允許從服務器上加載數據,而不用刷新頁面,它基於異步隊列模塊來管理和觸發回調函數;動畫模塊用於向網頁中添加動畫效果,它基於隊列模塊來管理和執行動畫函數;屬性操作模塊用於對HTML屬性和DOM屬性進行讀取、設置和移除操作;DOM遍歷模塊用於在DoM樹中遍歷父元素、子元素和兄弟元素;DOM操作模塊用於插入、移除、複製和替換DOM元素;樣式操作模塊用於獲取計算樣式或設置內聯樣式;坐標模塊用於讀取或設置DOM元素的文檔坐標;尺寸模塊用於獲取DOM元素的高度和寬度。

基礎

選擇器

jQuery選擇器允許您對HTML元素組或單個元素進行操作。

jQuery選擇器基於元素的id、類、類型、屬性、屬性值等”查找”(或選擇)HTML元素。它基於已經存在的CSS選擇器,除此之外,它還有一些自定義的選擇器。

jQuery中所有選擇器都以美元符號開頭:$()。

元素選擇器

jQuery元素選擇器基於元素名選取元素。

在頁面中選取所有

元素

id選擇器

jQuery#id選擇器通過HTML元素的id屬性選取指定的元素。

頁面中元素的id應該是唯一的,所以您要在頁面中選取唯一的元素需要通過#id選擇器。

通過id選取元素語法如下:

class選擇器

jQuery類選擇器可以通過指定的class查找元素。

語法如下:

事件處理

jQuery事件方法語法

在jQuery中,大多數DOM事件都有一個等效的jQuery方法。

頁面中指定一個點擊事件:

下一步是定義什麼時間觸發事件。您可以通過一個事件函數實現:

常用的jQuery事件方法

$(document).ready()

$(document).ready()方法允許我們在文檔完全加載完后執行函數。該事件方法在jQuery語法章節中已經提到過。

click()

click()方法是當按鈕點擊事件被觸發時會調用一個函數。

該函數在用戶點擊HTML元素時執行。

在下面的實例中,當點擊事件在某個

元素上觸發時,隱藏當前的

元素:

dblclick()

當雙擊元素時,會發生dblclick事件。

dblclick()方法觸發dblclick事件,或規定當發生dblclick事件時運行的函數:

mouseenter()

當鼠標指針穿過元素時,會發生mouseenter事件。

mouseenter()方法觸發mouseenter事件,或規定當發生mouseenter事件時運行的函數。

jQuery

mouseleave()

當鼠標指針離開元素時,會發生mouseleave事件。

mouseleave()方法觸發mouseleave事件,或規定當發生mouseleave事件時運行的函數:

mousedown()

當鼠標指針移動到元素上方,並按下鼠標按鍵時,會發生mousedown事件。

mousedown()方法觸發mousedown事件,或規定當發生mousedown事件時運行的函數:

mouseup()

當在元素上鬆開鼠標按鈕時,會發生mouseup事件。

方法觸發mouseup事件,或規定當發生mouseup事件時運行的函數:

hover()

hover()方法用於模擬光標懸停事件。

當鼠標移動到元素上時,會觸髮指定的第一個函數(mouseenter);當鼠標移出這個元素時,會觸髮指定的第二個函數(mouseleave)。

focus()

當元素獲得焦點時,發生focus事件。

當通過鼠標點擊選中元素或通過tab鍵定位到元素時,該元素就會獲得焦點。

focus()方法觸發focus事件,或規定當發生focus事件時運行的函數。

blur()

當元素失去焦點時,發生blur事件。

blur()方法觸發blur事件,或規定當發生blur事件時運行的函數:

參考資料來源

技術應用

網站

只需要少量的代碼,即可將它們集成到網站上,並且能夠幫助訪問者分享網站上的內容。

移動端

JQueryMobile1.2是JQuery運行在手機和平板設備上的版本。JQueryMobile1.2給主流移動平台提供了JQuery的核心庫,發佈了一個完整統一的JQuery移動UI設計框架,在不同的智能手機和桌面電腦的web瀏覽器上形成統一的用戶UI。支持全球主流的移動平台,對每個平台的支持分為三個等級:A、B、C,實現了對Android2.1-2.3、3.2、4.0、4.1、windowsPhone7-7.5,PalmWebOS1.4-2.0、3.0、FirefoxMobile15,OperaMobile11.5-12等平台的A級支持。JQueryMobile1.2的核心使得基本的HTML標籤在所有的瀏覽器中生效,並且對網頁的行為和效果均進行了增強,讓網頁在等級較高的瀏覽器中能獲得優秀的體驗,在較差的瀏覽器中也能正常的使用。

學習指南

jQueryJavaScript與CSS開發入門經典:本書濃墨重彩地描述jQuery的API及jQuery框架的所有基礎知識,在實例引導下演示如何使用jQuery框架以超越純JavaScript的速度實現更多功能,以及如何使用極少代碼完成繁瑣任務。本書還介紹jQueryUI庫的用法,指導使用jQueryUI庫創建賞心悅目的專業用戶界面。