jQuery 是一套跨瀏覽器的 JavaScript 函式庫，用於簡化 HTML 與 JavaScript 之間的操作。約翰雷西格在 2006 年 1 月的 BarCamp NYC 上釋出了第一個版本。目前由 Dave Methvin 領導的團隊進行開發。全球前 10000 個訪問最高的網站中，有 65 使用了 jQuery，是曾經最受歡迎的 JavaScript 函式庫。 簡介 jQuery 是開源軟體，使用 MIT 許可證授權。 jQuery 的語法設計使得許多操作變得容易，如操作 zhhans 文件物件；zhhant 檔案；（document）、選擇文件物件模型元素、建立動畫效果、處理事件、以及開發 Ajax 程式。jQuery 也提供了給開發人員在其上建立外掛的能力。這使開發人員可以對底層互動與動畫、高階效果和高階主題化的元件進行抽象化。模組化的方式使 jQuery 函式庫能夠建立功能強大的動態網頁以及網路應用程式。 微軟和諾基亞已宣佈在他們的平臺上繫結 jQuery。微軟最初在 Visual Studio 中集成了 jQuery 以便在微軟自己的 ASPNET AJAX 框架和 ASPNET MVC Framework 中使用，而諾基亞則在他的 Web 執行時元件開發平臺中集成了 jQuery。MediaWiki 自從 116 版本後也開始使用 jQuery。 jQuery 13 版以後，引入全新的層疊樣式表選擇器引擎 Sizzle。同時不再提供 Packed 版本，因為解壓縮所消耗的時間，遠大於所節省的下載時間，且不利於除錯，且已有 Google AJAX Libraries API 等公開站臺提供 jQuery 的 js 的引用服務，故 Packed 版本原本的優點已蕩然無存。 特色 jQuery 有下列特色： 使用多瀏覽器開源選擇器引擎 Sizzle（jQuery 專案的衍生產品）進行 DOM 元素選擇 基於 CSS 選擇器的 DOM 操作，使用元素的名稱和屬性（如 id 和 class）作為選擇 DOM 中節點的條件 事件 特效和動畫 Ajax Deferred 和 Promise 物件來控制非同步處理 JSON 解析 透過外掛擴充套件 工具函式，如特徵檢測 現代瀏覽器中原生的相容性方法，但對於舊版瀏覽器需要後備（fallback）方法，比如 inArray 和 each 多瀏覽器（不要與跨瀏覽器混淆）支援 瀏覽器支援 jQuery 30 及以後版本支援 當前1 版本 的 Firefox、Chrome、Safari、Edge（就是說當前穩定版本以及當前穩定版本之前的一個版本），另外還支援 Internet Explorer 9 以後的 IE 版本。在移動端支援 iOS 7 和 Android 40。Browser Support jQuery 用法 載入 jQuery jQuery 庫是包含所有公共 DOM、事件、效果和 Ajax 函式的一個 JavaScript 檔案。可以透過連結到本地副本或公共伺服器提供的許多副本之一把 jQuery 包含在網頁中。jQuery 有一個由 MaxCDN 託管的內容傳遞網路（CDN）。 Google 和微軟也託管了 jQuery。 script srcjqueryjsscript 也可以直接從 CDN 中載入 jQuery： script srchttpscodejquerycomjquery331minjs integritysha256FgpCbKJQlLNfOu91ta32oNMZxltwRo8QtmkMRdAu8 crossoriginanonymousscript 使用風格 jQuery 有兩種使用風格： 透過 jQuery 物件的工廠方法 函式。這些函式通常稱作命令，使用方法鏈進行呼叫，因為它們都返回 jQuery 物件。 透過 開頭的函式。這些是工具函式，它們不直接作用於 jQuery 物件。 在 jQuery 中訪問和操作多個 DOM 節點通常從用 CSS 選擇器字串呼叫 函式開始。這會返回一個引用 HTML 頁面中所有匹配元素的 jQuery 物件。比如 divtest，會返回一個擁有 class test 的所有 div 元素的 jQuery 物件。可以透過呼叫返回的 jQuery 物件或節點本身的方法來操作這個節點集。 無衝突模式 jQuery 還有noConflict 模式，這會釋放對 的控制。如果其他的庫也使用 作為識別符號的話，這個模式會比較有用。在無衝突模式下，開發人員可以使用 jQuery 替代 而不會缺失任何功能。 典型的程式碼開頭 通常，jQuery 是透過將初始化程式碼和事件處理函式放入 handler 中來使用的。當瀏覽器構建 DOM 併發送載入事件時觸發。 function 這個匿名函式是頁面載入完成時要呼叫的函式。 jQuery 程式碼，事件處理回撥寫在這裡。 或者 fn 在其他地方定義的名為 fn 的函式，是頁面載入完成時要呼叫的函式。 或者我們也可以使用 documentready function 這是頁面完成載入時要呼叫的函式。 jQuery 程式碼，事件處理回撥寫在這裡。 由於歷史原因，documentready callback 已經成為 DOM 就緒時執行程式碼的實質性標誌。但 jQuery 30 以後，鼓勵開發人員使用更簡短的 handler 標誌。 對尚未載入的元素進行事件處理的回撥函式可以作為匿名函式在ready 內部註冊。這些事件處理函式只會在觸發事件時被呼叫。例如，下面的程式碼添加了一個，用於在 img 影像元素上單擊滑鼠事件的處理函式。 function imgon click function 處理頁面中任何 img 元素上的 click 事件。 連結（Chaining） jQuery 命令通常返回一個 jQuery 物件，因此命令可以連結： divtestadd pquoteaddClass blueslideDown slow 這行程式碼找到了所有 class 屬性為 test 的 div 標籤，以及所有 class 屬性為 quote 的 p 標籤的並集，對於所有匹配的元素都增加一個 blue 的 class 屬性，並用一個動畫增加了它們的高度。函式 與 add 影響匹配的元素有哪些，而 addClass 和 slideDown 影響了引用的節點。 一些 jQuery 函式返回特定的值（例如 inputuseremailval ）。在這些情況下，由於該值沒有引用 jQuery 物件，連結將不起作用。 建立新的 DOM 元素 除了透過 jQuery 物件層次結構訪問 DOM 節點外，如果作為引數傳遞給 的字串看起來像 HTML，也可以建立新的 DOM 元素。例如，這行程式碼找到 ID 為 carmakes 的 HTML select 元素，並會增加一個 value 屬性為 VAG、文字為 Volkswagen 的 option 元素： selectcarmakes append option attr valueVAG append Volkswagen 工具函式 帶有 字首的 jQuery 函式是工具函式，或者說是影響全域性屬性和行為的函式。下面的例子使用了函式 each 來遍歷陣列： each 123 function consolelog this 1 這會將 2，3，4 寫入控制檯。 Ajax 使用 ajax 可以執行跨瀏覽器的 Ajax 請求。其相關方法可用於載入和處理遠端資料。 ajax type POST url processsubmitphp data name John location Boston done function msg alert Data Saved msg fail function xmlHttpRequest statusText errorThrown alert Your form submission failednn XML Http Request JSONstringify xmlHttpRequest nStatus Text statusText nError Thrown errorThrown 本示例將資料 nameJohn 和 locationBoston 釋出到伺服器上的 processsubmitphp。當這個請求結束時，會呼叫 success 函式來提醒使用者。如果請求失敗，它會提醒使用者，告知該請求的狀態以及特定的錯誤。 非同步 請注意，上面的例子使用 ajax 的延期性來處理它的非同步特性：done 和fail 建立僅在非同步過程完成時才執行的回撥。 釋出版本 JQuery 目前分成 1x 版、2x 版、3x 版，這三種釋出版本，後兩種不再支援 IE 678，前者透過 jQuery Migrate plugin 與先前版本保持相容。 版本號 釋出日期 最新更新 大小（KB） 備註 10 第一個穩定版本 11 12 126 54 13 132 559 將 Sizzle 選擇器引擎引入核心 14 144 76 15 152 83 延遲迴調管理，ajax 模組重寫 16 164 89 顯著改善 attr 與 val 的效能 17 172 92 新的事件 API：on 和off ，而舊的 API 仍然支援。 18 183 914 重寫 Sizzle 選擇器引擎，改善動畫和 html props 的靈活性。 19 191 90 移除棄用介面，清理程式碼 110 1102 91 修復了 19 和 20 beta 版本週期的 bug 和差異 111 1113 959 112 1124 95 20 203 811 除去對 IE 68 的支援以提高效能，並降低檔案大小 21 214 824 22 224 856 30 300 863 Deferred、ajax、when 支援 PromisesA，令data 相容 HTML5 31 311 863 加入 jQueryreadyException，ready handler 錯誤現在不會不顯示了 32 321 846 增加了對檢索 template 元素內容的支援，棄用了多種舊方法。 33 331 848 棄用舊函式，函式現在可以接受類，並支援其寫成陣列格式。 34 341 861 改進效能，增加 nonce 及 nomodule，修復 radio elements。 35 351 874 安全性更新，以even 及odd 代替even 及odd，棄用 jQuerytrim。 36 364 882 錯誤修正，當發生 JSONP 錯誤時返回 JSON，相容新版 Chrome 選擇器。 37 371 854 添加了 uniqueSort 方法，效能最佳化，最佳化 outerWidth true 和 outerHeight true 對負邊距的處理，焦點修復。 子專案 以下專案均是源自於 Interface 外掛 jQuery UI 基於 jQuery 的使用者介面庫，包括拖放、縮放、對話方塊、標籤頁等多個元件。 jQuery Tools jQuery Tools 是一個第三方的套件，基於 jQuery。包括了標籤頁、表單驗證、滑鼠滾輪事件等多個元件。 jQuery Mobile 基於 jQuery 的手機網頁製作工具，jQuery Mobile 的網站上包含了網頁的設計工具、主題設計工具。另外 jQuery Mobile 的 js 外掛包含了換頁、事件等的多項功能。 參閱 jQuery UI 競品 Prototype JavaScript 框架 參考文獻 相關書籍 英文 Learning jQuery ISBN 1847192505 jQuery in Action ISBN 1933988355 Pro JavaScript Techniques ISBN 1590597273 中文 鋒利的 jQuery ISBN 9787115207012 網頁設計？愛上 jQuery ISBN 9789866850844 Learning jQuery 中文版，ISBN 9789866761607 jQuery UI Plugins ISBN 9789866551116 你不能錯過的 jQuery 指南 ISBN 9789572244173 外部連結 jQuery 官方網站 jQuery UI 官方網站 jQuery Google Code （各版本 JQuery 的下載處） （2008 年 4 月 3 日，Google Tech Talks） Github 上的 jQuery 原始碼 CategoryJavaScript 函式庫 CategoryAJAX Category 用 JavaScript 程式設計的自由軟體