複製鏈接
請複製以下鏈接發送給好友
https://baike.baidu.hk/item/jQuery/5385065
複製
複製成功

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、IE、Safari、Opera、Firefox、Edge等 [17] 
上線時間
2006年1月
最近更新時間
2021年3月2日
軟件語言
JavaScript
開發商
OpenJS Foundation
軟件授權
MIT License
軟件版本
3.7.1 [16] 
軟件大小
292 KB

目錄

  1. 1 產生背景
  2. 2 運行環境
  3. 3 語言特點
  4. 4 工作原理
  1. 5 語言基礎
  2. ▪ 選擇器
  3. ▪ 事件處理
  4. 6 技術應用
  1. 7 學習指南
  2. 8 語言評價

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] 
參考資料
展開全部 收起