JQuery

**jQuery** 是一套跨瀏覽器的 JavaScript 函式庫，用於簡化 HTML 與 JavaScript 之間的操作。約翰・雷西格（John Resig）在 2006 年 1 月的 BarCamp NYC 上釋出了第一個版本。目前由 Dave Methvin 領導的團隊進行開發。全球前 10,000 個存取最高的網站中，有 65% 使用了 jQuery，是曾經最受歡迎的 JavaScript 函式庫。

## 簡介

jQuery 是開源軟體，使用 MIT 授權條款授權。 jQuery 的語法設計使得許多操作變得容易，如操作文件（document）、選擇文件物件模型（DOM）元素、建立動畫效果、處理事件、以及開發 Ajax 程式。jQuery 也提供了給開發人員在其上建立外掛程式的能力。這使開發人員可以對底層互動與動畫、進階效果和進階主題化的組件進行抽象化。模組化的方式使 jQuery 函式庫能夠建立功能強大的動態網頁以及網路應用程式。

微軟和諾基亞已宣布在他們的平台上繫結 jQuery。微軟最初在 Visual Studio 中整合了 jQuery 以便在微軟自己的 ASP.NET AJAX 框架和 ASP.NET MVC Framework 中使用，而諾基亞則在他的 Web 執行時組件開發平台中整合了 jQuery。MediaWiki 自從 1.16 版本後也開始使用 jQuery。

jQuery 1.3 版以後，引入全新的層疊樣式表（CSS）選擇器引擎 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 3.0 及以後版本支援「當前−1 版本」 的 Firefox、Chrome、Safari、Edge（就是說當前穩定版本以及當前穩定版本之前的一個版本），另外還支援 Internet Explorer 9 以後的 IE 版本。在行動端支援 iOS 7 + 和 Android 4.0+。

## 用法

### 載入 jQuery

jQuery 庫是包含所有公共 DOM、事件、效果和 Ajax 函式的一個 JavaScript 檔案。可以通過連結到本地副本或公共伺服器提供的許多副本之一把 jQuery 包含在網頁中。jQuery 有一個由 MaxCDN 代管的內容傳遞網路（CDN）。 Google 和微軟也代管了 jQuery。

也可以直接從 CDN 中載入 jQuery：

### 使用風格

jQuery 有兩種使用風格：

* 通過 jQuery 物件的工廠方法 `$` 函式。這些函式通常稱作_命令_，使用方法鏈進行呼叫，因為它們都返回 jQuery 物件。
* 通過 `$.` 開頭的函式。這些是_工具函式_，它們不直接作用於 jQuery 物件。

在 jQuery 中存取和操作多個 DOM 節點通常從用 CSS 選擇器字串呼叫 `$` 函式開始。這會返回一個參照 HTML 頁面中所有匹配元素的 jQuery 物件。比如 `$("div.test")`，會返回一個擁有 class `test` 的所有 `div` 元素的 jQuery 物件。可以通過呼叫返回的 jQuery 物件或節點本身的方法來操作這個節點集。

### 無衝突模式

jQuery 還有 `.noConflict()` 模式，這會釋放對 `$` 的控制。如果其他的庫也使用 `$` 作為識別碼的話，這個模式會比較有用。在無衝突模式下，開發人員可以使用 `jQuery` 替代 `$` 而不會缺失任何功能。

### 典型的代碼開頭

通常，jQuery 是通過將初始化代碼和事件處理常式放入 `$(_handler_)` 中來使用的。當瀏覽器構建 DOM 並行送載入事件時觸發。

或者

或者我們也可以使用

由於歷史原因，`$(document).ready(callback)` 已經成為 DOM 就緒時執行代碼的實質性標誌。但 jQuery 3.0 以後，鼓勵開發人員使用更簡短的 `$(handler)` 標誌。

對尚未載入的元素進行事件處理的回呼函式可以作為匿名函式在 `.ready()` 內部註冊。這些事件處理常式只會在觸發事件時被呼叫。例如，下面的代碼添加了一個，用於在 `img` 圖像元素上單擊滑鼠事件的處理常式。

### 連結（Chaining）

jQuery 命令通常返回一個 jQuery 物件，因此命令可以連結：

這行代碼找到了所有 class 屬性為 `test` 的 `div` 標籤，以及所有 class 屬性為 `quote` 的 `p` 標籤的併集，對於所有匹配的元素都增加一個 `blue` 的 class 屬性，並用一個動畫增加了它們的高度。函式 `$` 與 `add` 影響匹配的元素有哪些，而 `addClass` 和 `slideDown` 影響了參照的節點。

一些 jQuery 函式返回特定的值（例如 `$('#input-user-email').val()`）。在這些情況下，由於該值沒有參照 jQuery 物件，連結將不起作用。

### 建立新的 DOM 元素

除了通過 jQuery 物件階層存取 DOM 節點外，如果作為參數傳遞給 $() 的字串看起來像 HTML，也可以建立新的 DOM 元素。例如，這行代碼找到 ID 為 `carmakes` 的 HTML `select` 元素，並會增加一個 value 屬性為 "VAG"、文字為 "Volkswagen" 的 `option` 元素：

### 工具函式

帶有 `$.` 字首的 jQuery 函式是工具函式，或者說是影響全域屬性和行為的函式。下面的例子使用了函式 `each()` 來遍歷陣列：

這會將「2」，「3」，「4」寫入控制台。

### Ajax

使用 `$.ajax()` 可以執行跨瀏覽器的 Ajax 請求。其相關方法可用於載入和處理遠端資料。

本範例將資料 `name=John` 和 `location=Boston` 釋出到伺服器上的 `/process/submit.php`。當這個請求結束時，會呼叫 success 函式來提醒使用者。如果請求失敗，它會提醒使用者，告知該請求的狀態以及特定的錯誤。

#### 非同步

請注意，上面的例子使用 `$.ajax()` 的延期性來處理它的非同步特性：`.done()` 和 `.fail()` 建立僅在非同步過程完成時才執行的回呼。

## 發佈版本

JQuery 目前分成 1.x 版、2.x 版、3.x 版，這三種發佈版本，後兩種不再支援 IE 6/7/8，前者透過 jQuery Migrate plugin 與先前版本保持相容。

## 子專案

以下專案均是源自於 Interface 外掛程式

### jQuery UI

基於 jQuery 的使用者介面庫，包括拖放、縮放、對話方塊、標籤頁等多個組件。

### jQuery Tools

jQuery Tools 是一個第三方的套件，基於 jQuery。包括了標籤頁、表單驗證、滑鼠滾輪事件等多個組件。

### jQuery Mobile

基於 jQuery 的手機網頁製作工具，jQuery Mobile 的網站上包含了網頁的設計工具、主題設計工具。另外 jQuery Mobile 的 js 外掛程式包含了換頁、事件等的多項功能。

## 參閱

* jQuery UI

### 競品

* Prototype JavaScript 框架
* MooTools

## 參考文獻

## 相關書籍

**英文**

**中文**

## 外部連結

* jQuery 官方網站（頁面存檔備份，存於網際網路檔案館）
* jQuery UI 官方網站（頁面存檔備份，存於網際網路檔案館）
* jQuery - Google Code （頁面存檔備份，存於網際網路檔案館）（各版本 JQuery 的下載處）
* YouTube 上的 jQuery（2008 年 4 月 3 日，Google Tech Talks）
* Github 上的 jQuery 原始碼 （頁面存檔備份，存於網際網路檔案館）