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。

```html5
<script src="jquery.js"></script>
```

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

```html5
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
```

### 使用風格

jQuery有兩種使用風格：

- 通過jQuery對象的工廠方法`$`函數。這些函數通常稱作命令，使用方法鏈進行調用，因為它們都返回jQuery對象。
- 通過`$.`開頭的函數。這些是工具函數，它們不直接作用於jQuery對象。

在jQuery中訪問和操作多個DOM節點通常從用CSS選擇器字串調用`$`函數開始。這會返回一個引用HTML頁面中所有匹配元素的jQuery對象。比如`$("div.test")`，會返回一個擁有class `test`的所有`div`元素的jQuery對象。可以通過調用返回的jQuery對象或節點本身的方法來操作這個節點集。

### 無衝突模式

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

### 典型的代碼開頭

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

```javascript
$(function() {
    // 这个匿名函数是页面加载完成时要调用的函数。
    // jQuery代码，事件处理回调写在这里。
});
```

或者

```javascript
$(fn); // 在其他地方定义的名为fn的函数，是页面加载完成时要调用的函数。
```

或者我們也可以使用

```javascript
$(document).ready(function() {
    // 这是页面完成加载时要调用的函数。
    // jQuery代码，事件处理回调写在这里。
});
```

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

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

```javascript
$(function() {
    $('img').on('click', function() {
        // 处理页面中任何img元素上的click事件。
    });
});
```

### 連結（Chaining）

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

```javascript
$('div.test').add('p.quote').addClass('blue').slideDown('slow');
```

這行代碼找到了所有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`元素：

```javascript
$('select#carmakes')
    .append($('<option>')
    .attr({
        value:"VAG"
    })
    .append("Volkswagen"));
```

### 工具函數

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

```javascript
$.each([1,2,3], function() {
    console.log(this + 1);
});
```

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

### Ajax

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

```javascript
$.ajax({
    type: 'POST',
    url: '/process/submit.php',
    data: {
        name : 'John',
        location : 'Boston'
    },
}).done(function(msg) {
    alert('Data Saved: ' + msg);
}).fail(function(xmlHttpRequest, statusText, errorThrown) {
    alert('Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});
```

本示例將數據`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與先前版本保持相容。

版本號｜發布日期｜最新更新｜大小（KB）｜備註

1.0｜2006年8月26日｜第一個穩定版本

1.1｜2007年1月14日

1.2｜2007年9月10日｜1.2.6｜54

1.3｜2009年1月14日｜1.3.2｜55.9｜將Sizzle選擇器引擎引入核心

1.4｜2010年1月14日｜1.4.4｜76

1.5｜2011年1月31日｜1.5.2｜83｜延遲回調管理，ajax模塊重寫

1.6｜2011年5月3日｜1.6.4｜89｜顯著改善attr與val的性能

1.7｜2011年11月3日｜1.7.2 (2012年3月21日)｜92｜新的事件API：.on和.off，而舊的API仍然支持。

1.8｜2012年8月9日｜1.8.3 (2012年11月13日)｜91.4｜重寫Sizzle選擇器引擎，改善動畫和$(html, props)的靈活性。

1.9｜2013年1月15日｜1.9.1 ｜90｜移除棄用接口，清理代碼

1.10｜2013年5月24日｜1.10.2 (2013年7月3日)｜91｜修復了1.9和2.0 beta版本周期的bug和差異

1.11｜2014年1月24日｜1.11.3 (2015年4月28日)｜95.9

1.12｜2016年1月8日｜1.12.4 (2016年5月20日)｜95

2.0｜2013年4月18日｜2.0.3 (2013年7月3日)｜81.1｜除去對IE 6-8的支持以提高性能，並降低文件大小

2.1｜2014年1月24日｜2.1.4 (2015年4月28日)｜82.4

2.2｜2016年1月8日｜2.2.4 (2016年5月20日)｜85.6

3.0｜2016年6月9日｜3.0.0 (2016年6月9日)｜86.3｜Deferred、$.ajax、$.when支持Promises/A+，令.data兼容HTML5

3.1｜2016年7月7日｜3.1.1 (2016年9月23日)｜86.3｜加入jQuery.readyException，ready handler錯誤現在不會不顯示了

3.2｜2017年3月16日｜3.2.1 (2017年3月20日)｜84.6｜增加了對檢索`<template>`元素內容的支持，棄用了多種舊方法。

3.3｜2018年1月19日｜3.3.1 (2018年1月20日)｜84.8｜棄用舊函數，函數現在可以接受類，並支持其寫成陣列格式。

3.4｜2019年4月10日｜3.4.1 (2019年5月1日)｜86.1｜改進性能，增加`nonce`及`nomodule`，修復`radio elements`。

3.5｜2020年4月10日｜3.5.1 (2019年5月4日)｜87.4｜安全性更新，以`.even()`及`.odd()`代替 `:even` 及 `:odd`，棄用`jQuery.trim`。

3.6｜2021年3月2日｜3.6.4 (2023年3月8日)｜88.2｜錯誤修正，當發生JSONP錯誤時返回JSON，兼容新版Chrome選擇器。

3.7｜2023年5月11日｜3.7.1 (2023年8月28日)｜85.4｜添加了 `.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框架
- MooTools

## 相關書籍

英文

- Learning jQuery, ISBN 1-84719-250-5
- jQuery in Action, ISBN 1-933988-35-5
- Pro JavaScript Techniques, ISBN 1-59059-727-3

中文

- 鋒利的jQuery , ISBN 978-7-115-20701-2
- 網頁設計？愛上jQuery, ISBN 978-986-6850-84-4
- Learning jQuery中文版，ISBN 978-986-6761-60-7
- jQuery UI & Plugins, ISBN 978-986-6551-11-6
- 你不能錯過的 jQuery 指南 ISBN 9789572244173

## 外部連結

- jQuery官方網站
- jQuery UI官方網站
- jQuery - Google Code （各版本JQuery的下載處）
- 8mwKq7_JlS8（2008年4月3日，Google Tech Talks）
- Github上的jQuery 原始碼

## 基本資料

- 日語原文：jQuery
- 作者：約翰·雷西格
- 開發者：jQuery Team
- 發行日期：2006年8月26日
- 程式語言：JavaScript
- 類型：網頁應用程序框架
- 許可協議：MIT許可證
- 網站： jquery.com