JQuery是繼prototype之後又一個優秀的Javascript函式庫。它是輕量級的js庫,它相容於CSS3,也相容於各種瀏覽器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及後續版本將不再支援IE6/ 7/8瀏覽器。 jQuery讓用戶能更方便地處理HTML(標準通用標記語言下的一個應用程式)、events、實作動畫效果,並且方便地為網站提供AJAX互動。 jQuery還有一個比較大的優點是,它的文件說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。 jQuery能夠讓使用者的html頁面保持程式碼和html內容分離,也就是說,不用再在html裡面插入一堆js來呼叫指令了,只需要定義id即可。
jQuery是一個相容多瀏覽器的javascript函式庫,核心概念是write less,do more(寫得更少,做得更多)。 jQuery在2006年1月由美國人John Resig在紐約的barcamp發布,吸引了來自世界各地的眾多JavaScript高手加入,由Dave Methvin率領團隊進行開發。如今,jQuery已成為最受歡迎的javascript函式庫,在全球前10,000個造訪最多的網站中,有超過55%在使用jQuery。
jQuery是免費、開源的,使用MIT授權協議。 jQuery的語法設計可以讓開發更加便捷,例如操作文件物件、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。除此之外,jQuery提供API讓開發者編寫外掛程式。其模組化的使用方式使開發者可以輕鬆的開發出功能強大的靜態或動態網頁。
jQuery,顧名思義,也就是JavaScript和查詢(Query),也就是輔助JavaScript開發的函式庫。
歷史
#大概在1992 年,一家稱作Nombas 的公司開發了一種叫做C 減減(C-minus-minus,簡稱Cmm)的嵌入式腳本語言。 Cmm 背後的理念很簡單:一個足夠強大可以取代巨集操作(macro)的腳本語言,同時保持與 C (和 C ++)足夠的相似性,以便開發人員能很快學會。這個腳本語言捆綁在一個稱為 CEnvi 的共享軟體中,它首次向開發人員展示了這種語言的威力。
Nombas 最後把 Cmm 的名字改成了 ScriptEase,原因是後面的部分(mm)聽起來過於消極,同時字母 C 「令人害怕」。
當 Netscape Navigator 嶄露頭角時,Nombas 開發了一個可以嵌入網頁中的 CEnvi 的版本。這些早期的試驗被稱為 Espresso Page(濃縮咖啡般的頁面),它們代表了第一個在萬維網上使用的客戶語言。而 Nombas 絲毫沒有料到它的理念將會成為萬維網的一塊重要基石。
當網路衝浪越來越流行時,對於開發客戶端腳本的需求也逐漸增加。此時,大部分因特網用戶還僅透過 28.8 kbit/s 的數據機連接到網絡,即便這時網頁已經不斷地變得更大和更複雜。而更加劇使用者痛苦的是,僅僅為了簡單的表單有效性驗證,就要與伺服器進行多次往返互動。設想一下,使用者填完一個表單,點擊提交按鈕,等待了 30 秒的處理後,看到的卻是一條告訴你忘記填寫一個必要的欄位。
當時正處於技術革新最前沿的 Netscape,開始認真考慮開發一種客戶端腳本語言來解決簡單的處理問題。
當時工作於Netscape 的Brendan Eich,開始著手為即將在1995 年發行的Netscape Navigator 2.0 開發一個稱為LiveScript 的腳本語言,當時的目的是在瀏覽器和伺服器(本來要叫它LiveWire)端使用它。 Netscape 與 Sun 及時完成 LiveScript 實作。
就在 Netscape Navigator 2.0 即將正式發布前,Netscape 將其更名為 JavaScript,目的是為了利用 Java 這個因特網時髦詞彙。 Netscape 的賭注最終得到回報,JavaScript 從此變成了網際網路的必備元件。
因為 JavaScript 1.0 如此成功,Netscape 在 Netscape Navigator 3.0 中發布了 1.1 版。恰巧那個時候,微軟決定進軍瀏覽器,發布了 IE 3.0 並搭載了一個 JavaScript 的克隆版,叫做 JScript(這樣命名是為了避免與 Netscape 潛在的許可糾紛)。微軟步入 Web 瀏覽器領域的這一重要一步雖然令其聲名狼藉,但也成為 JavaScript 語言發展過程中的重要一步。
在微軟進入後,有 3 種不同的 JavaScript 版本同時存在:Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。與 C 和其他程式語言不同的是,JavaScript 並沒有一個標準來統一其語法或特性,而這 3 種不同的版本恰恰突顯了這個問題。隨著業界擔心的增加,這個語言的標準化顯然已經勢在必行。
2006年1月,jQuery的第一個版本面世,至今已經有10年多了(註:這個時間點是截止至出書時間)。雖然過了這麼久,但它依然以其簡潔、靈活的程式風格讓人一見傾心。在本篇文章中,我們將講述jQuery的發展歷史,讓讀者對jQuery有更多的了解。
在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()方法。 2005年8月,John Resig提議改進Prototype的「Behaviour」庫,於是他在blog上發表了自己的想法,並用了3個例子做說明。
當時John的想法很簡單:他發現這種語法相對現有的JavaScript函式庫比較為簡潔。但他沒想到的是,這篇文章一發佈就引起了業界的廣泛關注。於是John開始認真思考這件事(編寫語法更為簡潔的JavaScript程式庫),直到2006年1月14日,John正式宣布以jQuery的名稱發布自己的程式庫。隨之而來的是jQuery的快速發展。
2006年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),以及一組用於建立進階元素(例如可拖曳、拖曳、排序)的工具。
2010年2月,jQuery 1.4.2版發布,它新增了兩個關於事件委託的方法:delegate()和undelegate()。 delegate()用於取代1.3.2中的live()方法。這個方法比live()來的方便,而且也可以達到動態加入事件的作用。例如給表格的每個td綁定hover事件
特點
1.动态特效
2.AJAX
3.通过插件来扩展
4.方便的工具 - 例如浏览器版本判断
5.渐进增强
6.链式调用
7.多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+(在2.0.0中取消了对Internet Explorer6,7,8的支持)
历史版本
jQuery 1.0
(2006年8月):该库的第一个稳定版本,已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。
jQuery 1.1
(2007年1月):这一版大幅简化了API。许多较少使用的方法被合并,减少了需要掌握和解释的方法数量。
jQuery 1.1.3
(2007年7月):这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。
jQuery 1.2
(2007年9月):这一版去掉了对XPath选择符的支持,原因是相对于CSS语法它已经变得多余了。这一版能够支持对效果的更灵活定制,而且借助新增的命名空间事件,也使插件开发变得更容易。
jQuery UI(2007年9月):这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件(widget),以及一组用于构建高级元素(例如可拖放的界面元素)的工具。
jQuery 1.2.6
(2008年5月):这一版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中。
jQuery 1.3
(2009年1月):这一版使用了全新的选择符引擎Sizzle,库的性能也因此有了极大提升。这一版正式支持事件委托特性。
jQuery 1.3.2
(2009年2月):这次小版本升级进一步提升了库的性能,例如改进了:visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外,也支持查询的元素按文档顺序返回。
jQuery 1.4
(2010年1月14号):对代码库进行了内部重写组织,开始建立一些风格规范。老的core.js文件被分为attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js;CSS和attribute的逻辑分离。
重要变化:
1. Ajax重寫
#Ajax模組完全進行了重寫。新增一個jXHR對象,為不同瀏覽器內建的XMLHttpRequest提供了一致的超集。對於XMLHttpRequest之外的傳輸機制,例如JSONP請求,jXHR物件也可以進行處理。 (詳情可參考:jQuery.ajax文件)
此外,系統的可擴充性大大增強,可以附加各種資料處理器、過濾器和傳輸機制,為開發新的Ajax插件提供了方便。
2. 延遲對象
延遲對象(Deferred Object,jQuery.Deferred對象)是一個可連結的(chainable)實用工具對象,實作了Promise接口,可以在回呼隊列中註冊多個回調、呼叫回調佇列並轉發任何同步/非同步函數的成敗狀態。如同Using Deferreds in jQuery 1.5一文中所說明的,其結果是在jQuery中能夠將依賴於某個任務(事件)結果的邏輯與任務本身解耦了。這點在JavaScript中其實並不新鮮,Mochikit和Dojo等已經實現有些日子了。由於jQuery 1.5的Ajax模組內建使用了延遲對象,因此透過jQuery編寫Ajax程式將自動獲得此功能。
開發人員藉此可以使用無法立即取得的回傳值(如非同步Ajax請求的回傳結果),而且第一次能夠附加多個事件處理器。
例如,使用了新的jQuery內部Ajax API就可以實現下面的程式碼了:
// Assign handlers immediately after making the request,// and remember the jxhr object for this request var jxhr = $.ajax({ url: "example.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) . complete(function() { alert("complete"); });// perform other work here ... // Set another completion function for the request above jxhr.complete(function(){ alert("second complete") ; });
此外,使用jQuery.Deferred還可以開發自己的延遲物件。更多詳情請參閱:延遲物件文件。
3. jQuery.sub()
jQuery 1.5提供了一個建立和修改jQuery副本的方式。可以用來新增不向外部公開的方法,或對jQuery的某些方法進行重新定義以提供新功能,或提供更好的封裝、避免名稱空間衝突。當然,也可以用來開發插件,但Resig強烈建議在開發插件之前,先考慮jQuery UI widget工廠。
值得注意的是,sub函數並沒有提供真正的隔離,所有方法、資料、呼叫仍然依靠jQuery本身來支援。
4. 遍歷效能提高
在新版本中.children(),.prev(),.next()幾個常用的遍歷函數效能有了顯著提升。
5. 內部開發系統
John Resig也特別提到了jQuery團隊內部開發系統的兩點改變:一是伺服器端用Node.js取代了舊的Java/Rhino系統,讓團隊可以專注於JavaScript環境的新變化;二是所用的程式碼最佳化程式從Google Closure切換到UglifyJS,新工具的壓縮效果非常令人滿意。
使用方法
#jQuery可以下載使用,有兩個版本的jQuery 可供下載
Production version - 用於實際的網站中,已被精簡和壓縮。
Development version - 用於測試和開發(未壓縮,是可讀的程式碼)
jQuery 1.8.0版時壓縮前後的對比
#插件機制
jQuery的官方外掛程式是jQuery UI。開發者可以任意擴充jQuery的函式庫或依照自己的需求開發UI元件。網路上已經有數以萬計的jQuery插件,涵蓋各種各樣的需求。例如Ajax輔助、資料表、動態清單、XML工具、拖曳、cookie處理、彈出層等等。 jQuery 的文件說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇,例如ComponentOne Studio for ASP NET Wijmo.
隨著jQuery插件在網站建設過程中的使用率不斷的增加,所以有必要跟進時代步伐開發出一些新的插件/程式碼片段,以此來鞏固並提高前端用戶體驗,將用戶體驗提升到一個新的高度。其中包括Flat jQuery Price Slider、Gmaps jQuery Map Plugin 、FormChimp——MailChimp Ajax plugin for jQuery 等。
控制項
jQuery Gantt控制項是基於原生HTML5/jQuery,功能豐富的控件,該控制項真正實現了跨平台,在許多裝置和瀏覽器中無縫的運行。
使用專案甘特圖中內建的調度,依賴等功能實現任務分層清單的視覺化。
使用資源甘特圖實作一個資源利用視圖。
使用基於API的jQuery或基於API的MVC可協助您輕鬆安裝甘特圖並加快應用速度。
可與諸如KnockOut(KO),jQuery.tmpl等流行的jQuery模式一同使用。