本文由清風(fēng)根據(jù)Shay Howe的《An Adavnced Guide to HTML & CSS》第六課《jQuery》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處：http://learn./advanced-html-css/jquery，以及作者相關(guān)信息

作者：Shay Howe

譯者：清風(fēng)

作為網(wǎng)頁(yè)設(shè)計(jì)師或前端的一員你經(jīng)常會(huì)遇到j(luò)avascript和jQuery，JS是Javascript的縮寫(xiě)。在排名前10000的網(wǎng)站，有超過(guò)92%的網(wǎng)站在使用javascript，而jQuery則有超過(guò)63%的網(wǎng)站在使用。所以就不用多說(shuō)他們有多流行了。你可能希望通過(guò)編寫(xiě)javascript或者jquery來(lái)展現(xiàn)自己的網(wǎng)站的某些行為。

如果你還在問(wèn)javascript和jQuery到底是什么，不要害怕，這節(jié)課將簡(jiǎn)要概述javascript然后去了解一下jQuery。

這節(jié)內(nèi)容包括的內(nèi)容

Javascript

1. JavaScript介紹
2. jQuery介紹
3. 選擇器
4. 遍歷
5. 操作
6. 事件
7. 效果

Javascript介紹

Javascript提供了可以給網(wǎng)站添加交互和豐富用戶(hù)體驗(yàn)的能力。HTML為頁(yè)面提供了結(jié)構(gòu)，CSS為頁(yè)面提供了外觀，Javascript為頁(yè)面提供了行為。

就像CSS，javascript應(yīng)該保存在以.js為擴(kuò)展名的外部文件中，然后在HTML文檔中使用script元素引用。Javascript在哪個(gè)位置被引用取決于它應(yīng)該什么時(shí)候執(zhí)行。一般來(lái)說(shuō)，引用javascript最好的位置是在</body>之前，這樣javascript文件會(huì)在所有的HTML被解析后加載。但是，有時(shí)javascript需要幫助渲染HTML和確定它的行為，因此可以在文檔頭部引用。

 <script src="script.js"></script>	

值&變量

Javascript的基礎(chǔ)包括值和變量。一般情況下值就是javascript用來(lái)識(shí)別的不同類(lèi)型的值，變量用來(lái)存儲(chǔ)和共享這些值。

值包括文本字符串(string)，true或false等布爾值，數(shù)字，undefined ，null或其他類(lèi)似函數(shù)和對(duì)象的值。

定義變量的一個(gè)常見(jiàn)的方式是使用關(guān)鍵字var，后跟變量名和等號(hào)（=）然后是值，elCase最后以分號(hào)（；）結(jié)束。變量名必須以字符下劃線（_）或$開(kāi)頭。變量不能以數(shù)字開(kāi)頭雖然它們?cè)诤竺婵梢员皇褂?。并且不能使用任何連字符。另外javascript對(duì)大小寫(xiě)敏感，所以字符包括a-z和A-Z。

常見(jiàn)的變量命名方式是使用駝峰命名法，而不使用任何波折號(hào)(-)和下劃線（_）。駝峰拼寫(xiě)法是由去掉空格的合成詞組成，它利用了除第一個(gè)單詞以外的其他單詞的的首字母。例如 shay is awesome 經(jīng)常會(huì)以shayIsAwesome的形式命名。

var theStarterLeague = 125;
var food_truck = 'Coffee';
var mixtape01 = true;
var vinyl = ['Miles Davis', 'Frank Sinatra', 'Ray Charles'];	

語(yǔ)句

一般地說(shuō)，javascript就是一組被瀏覽器按照它們書(shū)寫(xiě)順序執(zhí)行的語(yǔ)句。這些語(yǔ)句提供了用來(lái)確定應(yīng)采取何種行為的命令。語(yǔ)句的格式和長(zhǎng)度各異，多條語(yǔ)句用分號(hào)分隔。新的語(yǔ)句在新的一行開(kāi)始，當(dāng)出現(xiàn)語(yǔ)句嵌套的時(shí)候應(yīng)該使用縮進(jìn)，以提高可讀性，但不是必須的。

log(polaroid);
return('bicycle lane');
alert('Congratulations, you ' + outcome);	

函數(shù)

除了javascript基礎(chǔ)以外，函數(shù)也很重要。函數(shù)提供了一種執(zhí)行或保存一組腳本的方法，根據(jù)函數(shù)功能它們可能接受不同的參數(shù)。

函數(shù)是這樣定義的：function關(guān)鍵字后面跟函數(shù)名和被括號(hào)包起來(lái)的參數(shù)列表（如果必須）然后是一條或一組在花括號(hào)內(nèi)（{}）的javascript語(yǔ)句。

function sayHello(name) {
  return('Hello ' + name);
}	

數(shù)組

正如你可能已經(jīng)認(rèn)識(shí)到的那樣，一些值可能會(huì)以數(shù)組的形式返回。數(shù)組提供了一種存儲(chǔ)列表或一些值的方法。數(shù)組是很有用的，原因有很多，其中一個(gè)是可以用不同的方法和操作進(jìn)行遍歷。另外根據(jù)情況，數(shù)組可以被用來(lái)存儲(chǔ)并返回各種不同的值。

一般而言，數(shù)組由一對(duì)方括號(hào)([])和其內(nèi)的一些被逗號(hào)分隔的項(xiàng)組成。數(shù)組的項(xiàng)從0開(kāi)始，逐步遞增。當(dāng)標(biāo)示一個(gè)列表中的第三項(xiàng)時(shí)使用[2]的形式來(lái)來(lái)標(biāo)記。

對(duì)象

Javascript同樣是建立在對(duì)象的基礎(chǔ)上，對(duì)象就是鍵 值對(duì)的集合。例如，這里有一個(gè)名為school的對(duì)象，包括的鍵也稱(chēng)為屬性有, name, location, students, andteachers和它們的值。

在這個(gè)例子中變量school被設(shè)置為一個(gè)用用來(lái)保存多個(gè)屬性的對(duì)象。每個(gè)屬性都有鍵和對(duì)應(yīng)的值。整個(gè)對(duì)象包括在一對(duì)花括號(hào)（{}）內(nèi)，由鍵和跟在后面的冒號(hào)和值組成的屬性用逗號(hào)分隔。

var school = {
  name: 'The Starter League',
  location: 'Merchandise Mart',
  students: 120,
  teachers: ['Jeff', 'Raghu', 'Carolyn', 'Shay']
};	

var school = ["Austin", "Chicago", "Portland"];	

上圖使用的是谷歌瀏覽器的開(kāi)發(fā)者工具，javascript可以在控制臺(tái)上運(yùn)行。

jQuery簡(jiǎn)介

在對(duì)javascript有了基本的了解并有了一些基礎(chǔ)后，是時(shí)候來(lái)看下jQuery了。jQuery是John Resig編寫(xiě)的一個(gè)開(kāi)源的javascript庫(kù)，它簡(jiǎn)化了HTML, CSS, 和 JavaScript的交互。自從2006年jQuery被發(fā)布以來(lái)，飛速發(fā)展，被大大小小的公司使用。

使jQuery如此流行的是它的簡(jiǎn)單易用。它的選擇像css和易于理解的分離的行為。jQuery的好處是巨大的，但我們目的是使用它來(lái)查找元素和執(zhí)行動(dòng)作。

開(kāi)始使用jQuery

使用jQuery的第一步是在HTML文檔中引用它。正如前面所提到的javascript，也是在</body>前使用script元素。由于jQuery是個(gè)獨(dú)立的庫(kù),最好與其它JavaScript代碼保存獨(dú)立。

在引用jQuery的時(shí)候這里有幾點(diǎn)要注意，使用的是壓縮版還是未壓縮版，以及是否使用了類(lèi)似Google hosted libraries的內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）。如果編寫(xiě)的代碼是用在線上的生產(chǎn)的環(huán)境，鼓勵(lì)使用壓縮的版本來(lái)獲得更短的加載時(shí)間。另外，使用類(lèi)似谷歌的CDN同樣有助于縮短加載時(shí)間還有潛在的緩存的好處。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>	
<script src="script.js"></script>	

在上面的示例代碼中，注意第二個(gè)script元素引用的javascript文件。所有手寫(xiě)的自定義的javascript和jQuery腳本應(yīng)該寫(xiě)在這個(gè)文件中。另外，這個(gè)文件要放在jQuery文件下面，這樣它就可以引用已經(jīng)聲明過(guò)的jQuery函數(shù)。

哪里是主要的http?

您可能已經(jīng)注意到,在上面的示例中引用CDN沒(méi)有使用http頭部。http故意漏掉，主要是允許兩個(gè)http和https連接。當(dāng)在本地工作時(shí),沒(méi)有任何web服務(wù)器,前面的htt試圖在文件系統(tǒng)磁盤(pán)驅(qū)動(dòng)。

jQuery對(duì)象

jQuery提供了自己的對(duì)象即$符號(hào)，也被稱(chēng)為jQuery。$對(duì)象是特別為選擇元素然后返回元素節(jié)點(diǎn)以便在上面執(zhí)行動(dòng)作。這些選擇和動(dòng)作應(yīng)該寫(xiě)在一個(gè)新的文件中，在jQuery庫(kù)外面引用。

$();
jQuery()	

文檔準(zhǔn)備完成

在使用任何jQuery遍歷和操作一個(gè)頁(yè)面之前，最好等待DOM加載完成。幸好jQuery有一個(gè)準(zhǔn)備完成事件，.ready()，它在HTML文檔準(zhǔn)備好被修改的時(shí)候（Ps：就是DOM渲染完成）被調(diào)用。將所有我們自己寫(xiě)的jQuery放入這個(gè)函數(shù)里面，可以確保它們?cè)陧?yè)面加載完成和DOM準(zhǔn)備完成之前不會(huì)執(zhí)行。

$(document).ready(function(event){ 
  // jQuery code 
});	

選擇器

如上所述，jQuery的一個(gè)核心概念就是選中元素然后執(zhí)行動(dòng)作。jQuery在選擇元素這個(gè)任務(wù)上完成的非常好，它模仿了極易使用的CSS。除了常見(jiàn)的CSS選擇器，jQuery還提供了所有的CSS3選擇器，無(wú)論瀏覽器是否支持，它都可以使用。

調(diào)用jQuery對(duì)象，$()，包含一個(gè)選擇器會(huì)返回對(duì)應(yīng)的DOM節(jié)點(diǎn)以便操作它們。選擇器放在括號(hào)內(nèi)(‘’)，然后選擇的元素和CSS里的一樣。

$('.feature');              // 類(lèi)選擇器
$('li strong');             // 后代選擇器
$('em, i');                 // 多選擇器
$('a[target="_blank"]');    // 屬性選擇器
$('p:nth-child(2)');        // 偽類(lèi)選擇器	

選擇關(guān)鍵字this

在jQuery函數(shù)內(nèi)部執(zhí)行時(shí)，你可能想選擇某個(gè)元素，這個(gè)元素在源選擇器中被引用。在這種情況下，this關(guān)鍵字會(huì)被用來(lái)引用那個(gè)當(dāng)前正在處理的元素。

$('div').click(function(event){ 
  $(this);
});	

jQuery選擇過(guò)濾器

只是CSS選擇器是不夠的，jQuery還有一些自定義的過(guò)濾器來(lái)幫助選擇。這些過(guò)濾器是CSS3的擴(kuò)展，對(duì)選擇一個(gè)元素或相關(guān)元素提供了更多控制。

$('div:has(strong)');	

這些過(guò)濾器可以在選擇器的內(nèi)部使用，但因?yàn)樗麄儾皇窃腄OM所以速度有一點(diǎn)點(diǎn)慢。在:filter()方法中使用這些過(guò)濾器會(huì)達(dá)到最好的結(jié)果，filter()方法是jQuery遍歷功能的一部分。

遍歷

有時(shí)一般的CSS選擇器本身不會(huì)分割結(jié)果，但我們也需要一些更詳細(xì)的控制。幸運(yùn)的是jQuery提供了一些方法來(lái)上下遍歷DOM樹(shù)，必要時(shí)可以過(guò)濾或選擇某些特定元素。

在開(kāi)始過(guò)濾DOM內(nèi)部的元素之前需要首先有一個(gè)選擇結(jié)果，過(guò)濾會(huì)相對(duì)于這個(gè)選擇結(jié)果進(jìn)行遍歷。在下面的例子中，原始的選擇是在DOM中查找所有的div元素，然后使用.not()方法過(guò)濾。這個(gè)特殊的方法使所有沒(méi)有type或collection類(lèi)的div元素被選中。

$('div').not('.type, .collection');	

方法鏈

可以簡(jiǎn)單的在不同的遍歷方法間使用點(diǎn)（.）連接成鏈以便對(duì)選中的元素應(yīng)用更多的控制。

下面的代碼示例使用了.not()方法和.parent()方法。結(jié)合在一起之后，將會(huì)只選擇沒(méi)有type或collection類(lèi)的div元素的父元素。

$('div').not('.type, .collection').parent();	

遍歷方法

jQuery有相當(dāng)多的遍歷方法可使用。它們分為三個(gè)種類(lèi)，過(guò)濾，層次遍歷和DOM樹(shù)遍歷。每個(gè)種類(lèi)所屬的方法都可以在下面看到。

過(guò)濾

• .eq()
• .filter()
• .first()
• .has()
• .is()
• .last()
• .map()
• .not()
• .slice()

層次遍歷

• .add()
• .andSelf()
• .contents()
• .end()

遍歷DOM樹(shù)

• .children()
• .closest()
• .find()
• .next()
• .nextAll()
• .nextUntil()
• .offsetParent()
• .parent()
• .parents()
• .parentsUntil()
• .prev()
• .prevAll()
• .prevUntil()
• .siblings()

操作

選擇和遍歷DOM中的元素只是jQuery提供的一部分功能，另外重要的一部分就是當(dāng)這些元素被選中之后可以做些什么。對(duì)這些元素的可能操作或者讀取，或者添加或者改變屬性或樣式。另外，DOM中的元素有可能被改變，改變它們?cè)贒OM中的位置，移動(dòng)（DOM結(jié)構(gòu)不變），添加新元素等等。總的來(lái)說(shuō)，操作元素的可選項(xiàng)是很多的。

讀取&設(shè)置

操作方法中最常用的兩個(gè)指令即讀取或設(shè)置信息。通過(guò)選擇器獲取信息需要給這個(gè)選擇器添加一個(gè)方法來(lái)確定那個(gè)信息需要被檢索。另外，同樣的選擇器和方法同樣可以用來(lái)設(shè)置信息。

// Gets the value of the alt attribute
$('img').attr('alt');
// Sets the value of the alt attribute
$('img').attr('alt', 'Wild kangaroo');	

在這個(gè)例子和片段遵循方法主要是用于設(shè)置模式,但是他們也能被用于獲得模式一樣。

操作屬性

元素可以被檢測(cè)和操作的一部分就是屬性。一些選項(xiàng)包括添加，移除，或者改變屬性或?qū)傩灾?。在下面的例子?addClass()方法被用來(lái)給所有的偶數(shù)列表項(xiàng)添加一個(gè)類(lèi)，.removeClass()方法被用來(lái)移除所有段落的類(lèi)，最后.attr方法被用來(lái)給所有abbr元素的title屬性設(shè)置值Hello Word。

$('li:even').addClass('even-item');
$('p').removeClass();
$('abbr').attr('title', 'Hello World');	

操作屬性的方法

• .addClass()
• .attr()
• .hasClass()
• .prop()
• .removeAttr()
• .removeClass()
• .removeProp()
• .toggleClass()
• .val()

操作樣式

除了操作屬性外，元素的樣式也可以使用某些方法操作。當(dāng)讀取或者設(shè)置元素的寬度，高度或者位置時(shí)，有少數(shù)可用的特殊方法，對(duì)于所有其他的樣式操作，.css()方法可以處理任何CSS改變。

.css()方法可以使用不同的語(yǔ)法設(shè)置一個(gè)或多個(gè)屬性。若設(shè)置一個(gè)屬性，屬性名和值應(yīng)該在引號(hào)內(nèi)并被逗號(hào)分隔。如果設(shè)置多個(gè)屬性，屬性應(yīng)該嵌套在大括號(hào)內(nèi)，屬性名使用駝峰的形式移除任何的連字符（Ps：按照css的正常寫(xiě)法也可以，關(guān)于這些方法的詳細(xì)語(yǔ)法可以參考api.）后面跟冒號(hào)和用引號(hào)引起來(lái)的值。每個(gè)屬性和值對(duì)應(yīng)該用逗號(hào)隔開(kāi)

高度，寬度和位置方法都默認(rèn)使用像素值，但其他的尺寸單位也可以使用。像下面看到的那樣，改變單位的值，然后使用一個(gè)加號(hào)后面是引號(hào)引起來(lái)的尺寸單位。

$('h1 span').css('font-size', 'normal');
$('div').css({
  fontSize: '13px', 
  background: '#f60'
});
$('header').height(200);
$('.extend').height(30 + 'em');	

操作樣式的方法

• .css()
• .height()
• .innerHeight()
• .innerWidth()
• .offset()
• .outerHeight()
• .outerWidth()
• .position()
• .scrollLeft()
• .scrollTop()
• .width()

操作DOM

最后我們可以檢測(cè)和操作DOM，改變?cè)氐奈恢茫砑踊蛞瞥?，還有其他各種改變?cè)氐那闆r。這里的選項(xiàng)是深入和多樣的，允許對(duì)DOM做出任何潛在的改變。

每個(gè)DOM操作方法都有自己的語(yǔ)法，但下面有他們中的幾個(gè)的概述。.prepend()方法用來(lái)在選擇的元素的頂部添加一個(gè)新的元素，.text()方法用Hello Word替換了所有h1元素的文本。

$('section').prepend('<h3>Featured</h3&ht;');
$('a[target="_blank"]').after('<em>New window.</em>');
$('h1').text('Hello World');	

操作DOM的方法

• .after()
• .append()
• .appendTo()
• .before()
• .clone()
• .detach()
• .empty()
• .html()
• .insertAfter()
• .insertBefore()
• .prepend()
• .prependTo()
• .remove()
• .replaceAll()
• .replaceWith()
• .text()
• .unwrap()
• .wrap()
• .wrapAll()
• .wrapInner()

事件

jQuery最美的地方之一就是可以很容易的添加事件處理程序，這些方法在發(fā)生某些特定的事件或行為時(shí)被調(diào)用。例如，給元素添加類(lèi)的方法可以設(shè)置為當(dāng)那個(gè)元素被點(diǎn)擊時(shí)執(zhí)行。

下面是一個(gè)標(biāo)準(zhǔn)的選擇器，選中所有的列表項(xiàng)。.click()事件方法綁定在了列表項(xiàng)選擇器上，設(shè)置了當(dāng)點(diǎn)擊任何一個(gè)列表元素時(shí)執(zhí)行的動(dòng)作。在.click()事件方法內(nèi)部是一個(gè)函數(shù)，這個(gè)函數(shù)用來(lái)確保內(nèi)部的任何動(dòng)作都可以被執(zhí)行。function后面的括號(hào)用來(lái)給函數(shù)傳遞參數(shù)，就像在這個(gè)示例中使用的event對(duì)象。

在函數(shù)內(nèi)部是另一個(gè)綁定了.addClass()方法的選擇器?，F(xiàn)在，當(dāng)列表項(xiàng)被點(diǎn)擊時(shí)，通過(guò)this關(guān)鍵字，被點(diǎn)擊的那個(gè)列表項(xiàng)添加了saved-item類(lèi)。

$('li').click(function(event){
  $(this).addClass('saved-item');
});	

靈活的事件

.click()事件方法，像其他一些事件方法一樣是一個(gè)速記方法，這些方法在jQuery 1.7中使用.on()方法實(shí)現(xiàn)。.on()方法提供了很大的靈活性，為元素應(yīng)用的這些方法被動(dòng)態(tài)添加到頁(yè)面中。

在使用.on()方法時(shí)，第一個(gè)參數(shù)是原生事件名稱(chēng)，第二個(gè)參數(shù)是時(shí)間處理函數(shù)。從下面的例子可以看出，.on()方法被用來(lái)代替.click()方法?，F(xiàn)在click事件名作為.on()方法的第一個(gè)參數(shù)，事件處理函數(shù)仍然和以前一樣。

$('li').on('click', function(event){
  $(this).addClass('saved-item');
});	

嵌套事件

嵌套在另一個(gè)事件函數(shù)中也可以操作或觸發(fā)事件處理函數(shù)。作為一個(gè)示例，下面的.on()方法使用了hover參數(shù)，當(dāng)在所有擁有pagination類(lèi)的元素上hover時(shí)會(huì)觸發(fā)這個(gè)事件。當(dāng).on()事件觸發(fā)時(shí)ID為up的錨上的.click()事件會(huì)被調(diào)用。

$('.pagination').on('hover', function(event){
  $('a#up').click();
});	

事件演示

使用警示信息作為演示，下面的代碼片段展示了如何創(chuàng)建一個(gè)警示信息然后當(dāng)點(diǎn)擊關(guān)閉圖標(biāo)時(shí)移除這個(gè)信息。

HTML

<div class="alert-warning">
  <strong>Warning!</strong> I’m about to lose my cool.
  <div class="alert-close">×</div>
</div>	

JavaScript

$('.alert-close').on('click', function(event){
  $('.alert-warning').remove();
});	

事件方法

jQuery提供了相當(dāng)多的方法，當(dāng)用戶(hù)和瀏覽器發(fā)生交互時(shí)用這些方法可以注冊(cè)用戶(hù)的行為。這些方法注冊(cè)了相當(dāng)多的事件，包括但不局限于瀏覽器，表單，鍵盤(pán)事件和鼠標(biāo)事件。這些方法里最普遍的如下：

瀏覽器事件

• .resize()
• .scroll()

文檔加載

• .ready()

事件捕獲

• .off()
• .on()
• .one()
• jQuery.proxy()
• .trigger()
• .triggerHandler()
• .unbind()
• .undelegate()

事件對(duì)象

• event.currentTarget
• event.preventDefault()
• event.stopPropagation()
• event.target
• event.type

表單事件

• .blur()
• .change()
• .focus()
• .select()
• .submit()

鍵盤(pán)事件

• .focusin()
• .focusout()
• .keydown()
• .keypress()
• .keyup()

鼠標(biāo)事件

• .click()
• .dblclick()
• .focusin()
• .focusout()
• .hover()
• .mousedown()
• .mouseenter()
• .mouseleave()
• .mousemove()
• .mouseout()
• .mouseover()
• .mouseup()

效果

事件之后，jQuery也提供了一些自定義的效果。這些效果來(lái)自不同的方法，包括顯示和隱藏內(nèi)容，漸隱漸顯內(nèi)容以及向上或向下滑動(dòng)內(nèi)容。所有這些方法都可以被單獨(dú)使用或者按照最佳的方式組合使用。

每個(gè)效果方法都有自己的語(yǔ)法，所以最好參考jQuery效果文檔中的每個(gè)方法的特定語(yǔ)法。最常見(jiàn)的是，這些效果通常會(huì)接收持續(xù)時(shí)間，緩動(dòng)效果，和特殊的回調(diào)函數(shù)這幾個(gè)參數(shù)。

jQuery CSS 動(dòng)畫(huà)

jQuery利用不同的css屬性實(shí)現(xiàn)了常見(jiàn)的css動(dòng)畫(huà)，雖然這些動(dòng)畫(huà)有一些css現(xiàn)在本身已經(jīng)可以實(shí)現(xiàn)了。由于瀏覽器的支持原生CSS動(dòng)畫(huà)擁有更好的性能，原生動(dòng)畫(huà)是更好的選擇，當(dāng)可以使用時(shí)。由于Modernizr 的幫助jQuery動(dòng)畫(huà)效果對(duì)那些不支持原生css動(dòng)畫(huà)的瀏覽器來(lái)說(shuō)是一個(gè)完美的備份解決方案。

效果持續(xù)時(shí)間

以.show()方法為例，傳給該方法的第一個(gè)可選參數(shù)是持續(xù)時(shí)間，這個(gè)參數(shù)可以是一個(gè)關(guān)鍵字或者毫秒值。關(guān)鍵字slow等于600毫秒，fast等于200毫秒?？梢允褂藐P(guān)鍵字，但使用毫秒值也可以。使用關(guān)鍵字則必須和提供的值一致，而毫秒值則不需要。

$('.error').show();
$('.error').show('slow');
$('.error').show(500);	

緩動(dòng)效果

除了設(shè)置效果的持續(xù)時(shí)間，緩動(dòng)和動(dòng)畫(huà)在不同時(shí)間的速度也可以設(shè)置。jQuery有兩個(gè)默認(rèn)的緩動(dòng)關(guān)鍵字swing和linear。默認(rèn)的swing值，使動(dòng)畫(huà)從比較慢的速度開(kāi)始然后在動(dòng)畫(huà)過(guò)程中加速然后在完成之前又減速。liner值則以一個(gè)不變的值運(yùn)行在整個(gè)過(guò)程中。

$('.error').show('slow', 'linear');
$('.error').show(500, 'linear');	

jQuery UI

jQuery的這兩個(gè)緩動(dòng)值可以使用不同的插件擴(kuò)展，這些插件可能提供額外的值。其中最流行的一個(gè)插件就是jQuery UI組件。

除了上面的緩動(dòng)值外jQuery UI也提供了很多其他的交互效果，小工具和其他有用的資源，值得看看。

效果回調(diào)

當(dāng)動(dòng)畫(huà)完成可能會(huì)執(zhí)行其他的函數(shù)，這個(gè)函數(shù)就叫做回調(diào)函數(shù)?；卣{(diào)函數(shù)應(yīng)該放在持續(xù)時(shí)間或緩動(dòng)參數(shù)之后,如果它們存在的話。在這個(gè)函數(shù)中可以放置新的事件或者函數(shù)，這些事件或函數(shù)得遵守他們各自的語(yǔ)法。

$('.error').show('slow', 'linear', function(event){
  $('.error .status').text('Continue');
});	

效果語(yǔ)法

如上所述，每個(gè)特效方法都有自己的語(yǔ)法，這些可以在jQuery官方效果文檔中找到。這里列出的持續(xù)時(shí)間（duration），緩動(dòng)效果（easing）和回調(diào)函數(shù)（callback）等參數(shù)是常見(jiàn)的，但不是在每個(gè)方法里面都可用。所以當(dāng)你對(duì)某個(gè)方法有疑問(wèn)的時(shí)候最好去看下它的語(yǔ)法。

效果演示

和上面的演示用同樣的事件，.remove()方法現(xiàn)在作為.fadeOut方法的回調(diào)函數(shù)的一部分。.fadeOut()方法可以使提示信息逐漸隱藏，比快速消失要好很多，然后在動(dòng)畫(huà)完成之后將自身從DOM中移除。

HTML

<div class="alert-warning">
  <strong>Warning!</strong> I’m about to lose my cool.
  <div class="alert-close">×</div>
</div>	

JavaScript

$('.alert-close').on('click', function(event){
  $('.alert-warning').fadeOut('slow', function(event){
    $(this).remove();
  });
});

基本效果

• hide()
• .show()
• .toggle()

常用效果

• .animate()
• .clearQueue()
• .delay()
• .dequeue()
• jQuery.fx.interval
• jQuery.fx.off
• .queue()
• .stop()

隱藏效果

• .fadeIn()
• .fadeOut()
• .fadeTo()
• .fadeToggle()

滑動(dòng)效果

• .slideDown()
• .slideToggle()
• .slideUp()

滑動(dòng)演示

HTML

<div class="panel">
  <div class="panel-stage"></div>
  <a href="#" class="panel-tab">Open <span>▼</span></a>
</div>	

JavaScript

$('.panel-tab').on('click', function(event){
  event.preventDefault();
  $('.panel-stage').slideToggle('slow', function(event){
    if($(this).is(':visible')){
      $('.panel-tab').html('Close ▲');
    } else {
      $('.panel-tab').html('Open ▼');
    }
  });
});	

未展開(kāi)效果：

展開(kāi)效果

Tabs演示

HTML

<ul class="tabs-nav">
  <li><a href="#tab-1">Features</a></li>
  <li><a href="#tab-2">Details</a></li>
</ul>
<div class="tabs-stage">
  <div id="tab-1">...</div>
  <div id="tab-2">...</div>
</div>	

JavaScript

// Show the first tab by default
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');
// Change tab class and display content
$('.tabs-nav a').on('click', function(event){
  event.preventDefault();
  $('.tabs-nav li').removeClass('tab-active');
  $(this).parent().addClass('tab-active');
  $('.tabs-stage div').hide();
  $($(this).attr('href')).show();
});	

擴(kuò)展閱讀

1. JavaScript For Cats
2. A Re-introduction to JavaScript via Mozilla Developer Network
3. 30 Days to Learn jQuery
4. Google Hosted Libraries
5. jQuery Documentation
6. jQuery Fundamentals via Bocoup
7. jQuery UI

上一課下一課（正在整理之中）

譯者手語(yǔ)：整個(gè)翻譯依照原文線路進(jìn)行，并在翻譯過(guò)程略加了個(gè)人對(duì)技術(shù)的理解。如果翻譯有不對(duì)之處，還煩請(qǐng)同行朋友指點(diǎn)。謝謝！

關(guān)于清風(fēng)

常用昵稱(chēng) “清風(fēng)”。標(biāo)準(zhǔn)的前端工程師，應(yīng)用級(jí)關(guān)注css，側(cè)重javascript。對(duì)javascript基礎(chǔ)有較好理解，關(guān)注重點(diǎn)javascript中的mvc應(yīng)用，異步編程及前端自動(dòng)化測(cè)試等。

如需轉(zhuǎn)載煩請(qǐng)注明出處：

英文原文：http://learn./advanced-html-css/jquery

中文譯文：http://www./css/advanced-html-css-lesson6-jquery.html