jQuery

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，最佳化HTML文檔操作、事件處理、動畫設計和Ajax互動。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的外掛程式擴展機制和豐富的外掛程式。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

基本介紹

• 中文名：極快瑞
• 外文名：jQuery
• 核心理念：write less,do more
• 發布時間：2006年1月
• 發布人：John Resig
• 發布地點：美國紐約
• 最新版本：jQuery 3.4.1
• 第一個版本：jQuery 1.0（2006年1月）
• 內部引入庫：Sizzle.js

發展歷程

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

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

Behaviour.register({    '#example li': function(e){        e.onclick = function(){            this.parentNode.removeChild(this);        }    }});

他認為應該改寫為：

$('#example li').bind('click',function(){    this.parentNode.removeChild(this);});    第二個例子是為不同的元素註冊不同的事件：

Behaviour.register({    'b.someclass' : function(e){        e.onclick = function(){            alert(this.innerHTML);        }    },    '#someid u' : function(e){        e.onmouseover = function(){            this.innerHTML = "BLAH!";        }    }});

他認為應該改寫為：

$('b.someclass').bind('click',function(){    alert(this.innerHTML);});$('#someid u').bind('mouseover',function(){    this.innerHTML = 'BLAH!';});

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

Behaviour.register({    '#foo ol li': function(a) {       a.title = "List Items!";       a.onclick = function(){ alert('Hello!'); };    },    '#foo ol li.tmp': function(a) {       a.style.color = 'white';    },    '#foo ol li.tmp .foo': function(a) {       a.style.background = 'red';}});

他認為應該改寫為：

$('#foo ol li')    .set('title','List Items!')    .bind('click',function(){ alert('Hello!'); })    .select('.tmp')    .style('color','white')    .select('.foo')    .style('background','red');

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

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

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

2008年5月，jQuery 1.2.6版發布，這版主要是將Brandon Aaron開發的流行的Dimensions外掛程式的功能移植到了核心庫中，同時也修改了許多BUG，而且有不少的性能得到提高。因此，如果以前的jQuery版本升級到1.2.6，那么完全可以從代碼中排除Dimensions外掛程式（一個獲得元素尺寸、定位的外掛程式）。

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

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

2010年1月，也是jQuery的四周年生日，jQuery 1.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月，jQuery 1.4.2版發布，它新增了有關事件委託的兩個方法：delegate()和undelegate()。delegate()用於替代1.3.2中的live()方法。這個方法比live()來的方便，而且也可以達到動態添加事件的作用。比如給表格的每個td綁定hover事件，代碼如下：

//1.4.2$("table").delegate("td", "hover", function(){    $(this).toggleClass("hover");});//1.3.2$("table").each(function(){    $("td", this).live("hover", function(){        $(this).toggleClass("hover");    });});

2011年1月，jQuery 1.5版發布。

2011年11月，jQuery 1.7版發布。

編程開發

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

FirefoX 2．0+

Internet Explorer 6+

Safari 3+

Opera 10．6+

Chrome 8+

編程工具

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

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

JS Nice：一款讓經過混淆處理的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 元素選擇器基於元素名選取元素。

$("p")

在頁面中選取所有 <p> 元素

id 選擇器

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

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

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

$("#test")

class 選擇器

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

語法如下：

$(".test")

事件處理

jQuery 事件方法語法

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

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

$("p").click();

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

$("p").click(function(){    // 動作觸發後執行的代碼!!});

　　

常用的 jQuery 事件方法

$(document).ready()

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

click()

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

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

在下面的實例中，當點擊事件在某個 <p> 元素上觸發時，隱藏當前的 <p> 元素：

$("p").click(function(){    $(this).hide();});

dblclick()

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

dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函式：

$("p").dblclick(function(){    $(this).hide();});

mouseenter()

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

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

$("#p1").mouseenter(function(){    alert("You entered p1!");});

mouseleave()

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

mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函式：

$("#p1").mouseleave(function(){    alert("Bye! You now leave p1!");});

mousedown()

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

mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時運行的函式：

$("#p1").mousedown(function(){    alert("Mouse down over p1!");});

mouseup()

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

方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函式：

$("#p1").mouseup(function(){    alert("Mouse up over p1!");});

hover()

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

當滑鼠移動到元素上時，會觸發指定的第一個函式（mouseenter）；當滑鼠移出這個元素時，會觸發指定的第二個函式（mouseleave）。

$("#p1").hover(function(){    alert("You entered p1!");    },    function(){    alert("Bye! You now leave p1!");});

focus()

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

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

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

$("input").focus(function(){    $(this).css("background-color","#cccccc");});

blur()

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

blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函式：

$("input").blur(function(){    $(this).css("background-color","#ffffff");});

參考資料來源

技術套用

網站

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

移動端

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

學習指南

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

語言評價

jQuery 是繼prototype 之後又一個優秀的輕量級JavaScript 框架。其宗旨是———“Write Less, Do More”,寫更少的代碼,做更多的事情。 它是一個快速和簡潔的JavaScript 庫，可以簡化HTML 文檔元素的遍歷，事件處理，動畫和Ajax 互動以實現快速Web 開發，它被設計用來改變編寫JavaScript 腳本的方式。

jQuery 的文檔非常豐富，因為其輕量級的特性，文檔並不複雜，隨著新版本的發布，可以很快被翻譯成多種語言，這也為jQuery 的流行提供了條件。jQuery 被包在語法上，jQuery 支持CSS1-3 的選擇器， 兼容IE 6.0+, FF 2+,Safari 3.0+, Opera 9.0+, Chrome 等瀏覽器。同時，jQuery 有約幾千種豐富多彩的外掛程式，大量有趣的擴展和出色的社區支持，這彌補了jQuery功能較少的不足並為jQuery 提供了眾多非常有用的功能擴展。加之其簡單易學，jQuery 很快成為當今最為流行的JavaScript 庫，成為開發網站等複雜度較低的Web 應用程式的首選JavaScript 庫，並得到了大公司如微軟，Google 的支持。

jQuery 最有特色的語法特點就是與CSS 語法相似的選擇器，並且它支持CSS1 到CSS3 的幾乎所有選擇器，併兼容所有主流瀏覽器，這為快速訪問DOM 提供了方便。