JQuery是這個星球上最流行的JavaScript庫之一（what is JavaScript）。在它誕生的時候，JavaScript（從這裡開始在中稱為JS）處於一個非常不同的位置。2006年1月14日是jQuery在BarCampNYC發佈的日子。JS還有些欠缺——瀏覽器都支持它的一部分，但為了符合要求，必須實施許多黑客和變通方法。

JQuery出現了，改變了一切。JQuery使編寫符合瀏覽器的代碼變得非常容易。你可以在沒有計算機科學學位的情況下**動畫網頁——萬歲！十年過去了，jQuery仍然是國王嗎？如果你以前從未使用過它，你能用它做什麼呢？

除了溫習JavaScript技巧之外，如果您對HTML和CSS教程也不熟悉，您可能還需要先閱讀它們。

我們之前已經介紹過jQuery，因此本jQuery指南將重點介紹實際的編碼。

入門

您可能熟悉從文檔對象模型（DOM）中選擇ID的JS方法：

document.getElementById('foo');

JQuery更進一步。您不必調用不同的方法來選擇類、id或多個元素。以下是如何選擇id：

$('#bar');

很簡單吧？選擇幾乎任何DOM元素的語法都完全相同。以下是如何選擇類：

$('.baz');

你也可以通過一些真正的力量來獲得創造力。這將選擇表中除第一個元素外的所有td元素。

$('table td').not(':first');

注意選擇器名稱如何與CSS對應的名稱幾乎完全匹配。可以將對象分配給常規JS變量：

var xyzzy = $('#parent .child');

或者可以使用jQuery變量：

var $xyzzy = $('#parent .child');

美元符號僅用於表示該變量是jQuery對象，這對複雜項目非常有用。

可以選擇元素的父元素：

$('child').parent();

或兄弟姐妹：

$('child').siblings();

一旦瀏覽器準備就緒，就需要執行代碼。下面是您如何做到這一點：

$(document).ready(function() { c***ole.log('ready!');});

更強大的力量

既然你已經知道了基礎知識，讓我們繼續討論一些更復雜的東西。給定一個html表：

<table id="cars"> <tr> <th>Make</th> <th>Model</th> <th>Color</th> </tr> <tr> <td>Ford</td> <td>Escort</td> <td>Black</td> </tr> <tr> <td>Mini</td> <td>Cooper</td> <td>Red</td> </tr> <tr id="fordCortina"> <td>Ford</td> <td>Cortina</td> <td>White</td> </tr></table>

假設你想讓每一行有不同的顏色（稱為斑馬條紋）。現在您可以使用CSS來實現：

#cars tr:nth-child(even) { background-color: red;}

這就是如何使用jQuery實現的：

$('tr:even').addClass('even');

這將實現同樣的事情，即使是CSS中定義的類。注意，不需要類名之前的完全停止。這些通常僅適用於主選擇器。理想情況下，您將首先使用CSS來實現這一點，儘管這不是什麼大不了的。

JQuery還可以隱藏或刪除行：

$('#fordCortina').hide();$('#fordCortina').remove();

刪除元素之前不必隱藏它。

功能

JQuery函數就像JS一樣。他們使用大括號，可以接受參數。真正有趣的是通過回調。回調幾乎可以應用於任何jQuery函數。它們指定一段代碼，以便在核心操作完成後運行。這提供了巨大的功能。如果它們不存在，並且您編寫的代碼期望它以線性方式運行，那麼JS將繼續執行下一行代碼，同時等待上一行代碼。回調確保代碼只在原始任務完成後運行。舉個例子：

$('table').hide(function(){ alert('MUO rules!');});

請注意——此代碼對每個元素執行警報。如果您的選擇器不止一次在頁面上顯示，您將收到多個警報。

您可以將回調與其他參數一起使用：

$('tr:even').addClass('even', function(){ c***ole.log('Hello');});

注意右大括號後面有一個分號。JS函數通常不需要這樣做，但是這段代碼仍然被認為在一行中（因為回調在括號中）。

動畫

JQuery使網頁動畫**變得非常容易。可以淡入或淡出元素：

$('.fade1').fadeIn('slow');$('#fade2').fadeOut(500);

您可以指定三種速度（慢、中、快）或以毫秒為單位表示速度的數字（1000ms=1秒）。幾乎可以為任何CSS元素設置動畫。這會將選擇器的寬度從當前寬度設置為250px。

$('foo').animate({width: '250px'});

無法設置顏色的動畫。也可以將回調與動畫一起使用：

$('bar').animate({height: '250px'}, function(){ $('bar').animate({width: '50px'}});

循環

循環在jQuery中非常出色。Each（）用於迭代給定類型的每個元素：

$('li').each(function() { c***ole.log($(this));});

也可以使用索引：

$('li').each(function(i) { c***ole.log(i + ' - ' + $(this));});

這將打印0，然後打印1，依此類推。

您也可以使用each（）遍歷數組，就像在JS中一樣：

var cars = ['Ford', 'Jaguar', 'Lotus'];$.each(cars, function (i, value){ c***ole.log(value);});

注意，額外的參數value——這是數組元素的值。

值得注意的是，each（）有時比vanilla JS循環慢。這是由於jQuery執行的額外處理開銷造成的。在大多數情況下，這不是一個問題。如果您關心性能，或者正在處理大型數據集，請首先考慮使用jsPerf對代碼進行基準測試。

ajax

異步JavaScript和XML或AJAX使用jQuery非常簡單。AJAX為互聯網提供了巨大的能量，我們已經在jQuery教程的第5部分介紹了這一點。它提供了一種部分加載網頁的方法——例如，當您只想更新足球比分時，就沒有理由重新加載整個網頁。jQuery有幾個AJAX方法，最簡單的是load（）：

$('#baz').load('some/url/page.html');

這將對指定的頁面（some/url）執行AJAX調用/頁面.html)把數據輸入選擇器。很簡單！

您可以執行HTTP GET請求：

$.get('some/url', function(result) { c***ole.log(result);});

也可以使用POST發送數據：

$.post('some/other/url', {'make':'Ford', 'model':'Cortina'});

提交表單數據非常簡單：

$.post('url', $('form').serialize(), function(result) { c***ole.log(result);}

函數的作用是：獲取所有的表單數據，併為傳輸做好準備。

承諾

承諾用於延遲執行。它們可能很難學習，但是jQuery使它稍微不那麼麻煩。ECMAScript 6向JS引入了本機承諾，然而，瀏覽器支持充其量是脆弱的。目前，jQuery承諾在跨瀏覽器支持方面做得更好。

承諾幾乎和聽起來一模一樣。代碼將承諾在稍後完成時返回。JavaScript引擎將繼續執行其他代碼。一旦承諾解決（返回），就可以運行其他一些代碼。承諾可以被看作是回扣。jQuery文檔對此進行了更詳細的解釋。

舉個例子：

// dfd == deferredvar dfd = $.Deferred();function doThing() { $.get('some/slow/url', function() { dfd.resolve(); }); return dfd.promise();}$.when(doThing()).then(function(){ c***ole.log('YAY, it is finished');});

注意承諾是如何作出的(dfd.承諾（）），並且僅當AJAX調用完成時才解析它。您可以使用一個變量來跟蹤多個AJAX調用，並且只有在完成所有調用後才能完成另一個任務。

性能提示

壓縮瀏覽器性能的關鍵是限制對DOM的訪問。這些技巧中的許多也可以應用於JS，您可能需要分析您的代碼，看看它是否慢得令人無法接受。在當前高性能JavaScript引擎的時代，代碼中的小瓶頸常常會被忽視。儘管如此，仍然值得嘗試編寫性能最快的代碼。

而不是在DOM中搜索每個操作：

$('foo').css('background-color', 'red');$('foo').css('color', 'green');$('foo').css('width', '100px');

將對象存儲在變量中：

$bar = $('foo');$bar.css('background-color', 'red');$bar.css('color', 'green');$bar.css('width', '100px');

優化你的循環。給一個香草圈：

var cars = ['Mini', 'Ford', 'Jaguar'];for(int i = 0; i < cars.length; ++i) { // do something}

雖然這個循環本身並不壞，但是可以更快地實現。對於每個迭代，循環都必須計算cars數組的值(車輛長度). 如果將其存儲在另一個變量中，則可以獲得性能，尤其是在處理大型數據集時：

for(int i = 0, j = cars.length; i < j; ++i) { // do something}

現在cars數組的長度存儲在j中，不再需要在每次迭代中計算。如果使用each（），則不需要這樣做，儘管經過適當優化的vanillajs可以比jQuery更好。jQuery真正的亮點在於開發和調試的速度。如果您不是在處理大數據，jQuery通常非常快。

你現在應該知道足夠的基礎知識，成為jQuery忍者！

您是否定期使用jQuery？你有沒有因為任何原因停止使用它？讓我們知道你的想法在下面的評論！