複製鏈接
請複製以下鏈接發送給好友

jQuery

編輯 鎖定
jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript代碼庫(框架)於2006年1月由John Resig發佈。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+等。 [1] 
軟件名稱
jQuery
軟件平台
Chrome、IESafariOpera、Firefox、Edge [17] 
上線時間
2006年1月
最近更新時間
2021年3月2日
軟件語言
JavaScript
開發商
OpenJS Foundation
軟件授權
MIT License
軟件版本
3.6.0 [16] 
軟件大小
292 KB

jQuery產生背景

編輯
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版發佈。 [2-3] 

jQuery運行環境

編輯
運行jQuery所需的條件很簡單:一台計算機、一個智能電話或一個可以運行現代瀏覽器的設備。jQuery對瀏覽器的要求也相當自由。官方網站列出了下列支持jQuery的瀏覽器:
FirefoX 2.0+
Internet Explorer 6+
Safari 3+
Opera 10.6+
Chrome 8+ [4] 
編程工具
Notepad++:一套有特色的自由軟件的純文字編輯器,有完整的中文化接口及支持多國語言編寫的功能。它的功能比Windows中的 Notepad(記事本)強大,除了可以用來製作一般的純文字説明文件,也十分適合當作編寫電腦程序的編輯器。Notepad++ 不僅有語法高亮度顯示,也有語法摺疊功能,並且支持宏以及擴充基本功能的外掛模組。
Brackets:一個免費、開源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成開發環境 (IDE工具)。該項目由 Adobe 創建和維護,根據MIT許可證發佈,支持Windows、Linux平台。Brackets的特點是簡約、優雅、快捷,它的核心目標是減少在開發過程中那些效率低下的重複性工作,例如瀏覽器刷新,修改元素的樣式,搜索功能等等。
JS Nice:一款讓經過混淆處理的JavaScript代碼可讀更好的工具。它使用一種用於JavaScript代碼美化的去混淆和去壓縮引擎。JSNice採用先進的機器學習和程序分析技術,從可用的開源項目學習命名和類型規律。 [5] 

jQuery語言特點

編輯
快速獲取文檔元素
jQuery的選擇機制構建於Css的選擇器,它提供了快速查詢DOM文檔中元素的能力,而且大大強化了JavaScript中獲取頁面元素的方式。
提供漂亮的頁面動態效果
jQuery中內置了一系列的動畫效果,可以開發出非常漂亮的網頁,許多網站都使用jQuery的內置的效果,比如淡入淡出、元素移除等動態特效。
創建AJAX無刷新網頁
AJAX是異步的JavaScript和XML的簡稱,可以開發出非常靈敏無刷新的網頁,特別是開發服務器端網頁時,比如PHP網站,需要往返地與服務器通信,如果不使用AJAX,每次數據更新不得不重新刷新網頁,而使用AJAX特效後,可以對頁面進行局部刷新,提供動態的效果。
提供對JavaScript語言的增強
jQuery提供了對基本JavaScript結構的增強,比如元素迭代和數組處理等操作。
增強的事件處理
jQuery提供了各種頁面事件,它可以避免程序員在HTML中添加太多事件處理代碼,最重要的是,它的事件處理器消除了各種瀏覽器兼容性問題。
更改網頁內容
jQuery可以修改網頁中的內容,比如更改網頁的文本、插入或者翻轉網頁圖像,jQuery簡化了原本使用JavaScript代碼需要處理的方式。 [6-7] 

jQuery工作原理

編輯
jQuery的模塊可以分為3部分:入口模塊、底層支持模塊和功能模塊。
在構造jQuery對象模塊中,如果在調用構造函數jQuery()創建jQuery對象時傳入了選擇器表達式,則會調用選擇器Sizzle(一款純JavaScript實現的CSS選擇器引擎,用於查找與選擇器表達式匹配的元素集合)遍歷文檔,查找與之匹配的DOM元素,並創建一個包含了這些DOM元素引用的jQuery對象。
瀏覽器功能測試模塊提供了針對不同瀏覽器功能和bug的測試結果,其他模塊則基於這些測試結果來解決瀏覽器之間的兼容性問題。
在底層支持模塊中,回調函數列表模塊用於增強對回調函數的管理,支持添加、移除、觸發、鎖定、禁用回調函數等功能;異步隊列模塊用於解耦異步任務和回調函數,它在回調函數列表的基礎上為回調函數增加了狀態,並提供了多個回調函數列表,支持傳播任意同步或異步回調函數的成功或失敗狀態;數據緩存模塊用於為DOM元素和Javascript對象附加任意類型的數據;隊列模塊用於管理一組函數,支持函數的入隊和出隊操作,並確保函數按順序執行,它基於數據緩存模塊實現。
在功能模塊中,事件系統提供了統一的事件綁定、響應、手動觸發和移除機制,它並沒有將事件直接綁定到DOM元素上,而是基於數據緩存模塊來管理事件;Ajax模塊允許從服務器上加載數據,而不用刷新頁面,它基於異步隊列模塊來管理和觸發回調函數;動畫模塊用於向網頁中添加動畫效果,它基於隊列模塊來管理和執行動畫函數;屬性操作模塊用於對HTML屬性和DOM屬性進行讀取、設置和移除操作;DOM遍歷模塊用於在DoM樹中遍歷父元素、子元素和兄弟元素;DOM操作模塊用於插入、移除、複製和替換DOM元素;樣式操作模塊用於獲取計算樣式或設置內聯樣式;座標模塊用於讀取或設置DOM元素的文檔座標;尺寸模塊用於獲取DOM元素的高度和寬度。 [8-9] 

jQuery語言基礎

編輯

jQuery選擇器

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"(或選擇)HTML 元素。 它基於已經存在的CSS 選擇器,除此之外,它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭:$()。
元素選擇器
jQuery 元素選擇器基於元素名選取元素。
$("p")
在頁面中選取所有
元素
id 選擇器
jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的,所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法如下:
$("#test")
class 選擇器
jQuery 類選擇器可以通過指定的 class 查找元素。
語法如下:
$(".test")

jQuery事件處理

jQuery 事件方法語法
在 jQuery 中,大多數 DOM 事件都有一個等效的 jQuery 方法。
頁面中指定一個點擊事件:
$("p").click();
下一步是定義什麼時間觸發事件。您可以通過一個事件函數實現:
$("p").click(function(){
    // 動作觸發後執行的代碼!!
});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允許我們在文檔完全加載完後執行函數。該事件方法在jQuery 語法章節中已經提到過。
click()
click() 方法是當按鈕點擊事件被觸發時會調用一個函數。
該函數在用户點擊 HTML 元素時執行。
在下面的實例中,當點擊事件在某個
元素上觸發時,隱藏當前的
元素:
$("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");
});
參考資料來源 [10-11] 

jQuery技術應用

編輯
網站
只需要少量的代碼,即可將它們集成到網站上,並且能夠幫助訪問者分享網站上的內容。 [12] 
移動端
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標籤在所有的瀏覽器中生效,並且對網頁的行為和效果均進行了增強,讓網頁在等級較高的瀏覽器中能獲得優秀的體驗,在較差的瀏覽器中也能正常的使用。 [13] 

jQuery學習指南

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

jQuery語言評價

編輯
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 提供了方便。 [15] 
參考資料
展開全部 收起