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

作者：Shay Howe

譯者：清風(fēng)

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

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

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

Javascript

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

Javascript介紹

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

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

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

值&變量

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

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

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

常見的變量命名方式是使用駝峰命名法，而不使用任何波折號(hào)(-)和下劃線（_）。駝峰拼寫法是由去掉空格的合成詞組成，它利用了除第一個(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'];	

語句

一般地說，javascript就是一組被瀏覽器按照它們書寫順序執(zhí)行的語句。這些語句提供了用來確定應(yīng)采取何種行為的命令。語句的格式和長度各異，多條語句用分號(hào)分隔。新的語句在新的一行開始，當(dāng)出現(xiàn)語句嵌套的時(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)包起來的參數(shù)列表（如果必須）然后是一條或一組在花括號(hào)內(nèi)（{}）的javascript語句。

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

數(shù)組

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

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

對(duì)象

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

在這個(gè)例子中變量school被設(shè)置為一個(gè)用用來保存多個(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"];	

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

jQuery簡介

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

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

開始使用jQuery

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

在引用jQuery的時(shí)候這里有幾點(diǎn)要注意，使用的是壓縮版還是未壓縮版，以及是否使用了類似Google hosted libraries的內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）。如果編寫的代碼是用在線上的生產(chǎn)的環(huán)境，鼓勵(lì)使用壓縮的版本來獲得更短的加載時(shí)間。另外，使用類似谷歌的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文件。所有手寫的自定義的javascript和jQuery腳本應(yīng)該寫在這個(gè)文件中。另外，這個(gè)文件要放在jQuery文件下面，這樣它就可以引用已經(jīng)聲明過的jQuery函數(shù)。

哪里是主要的http?

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

jQuery對(duì)象

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

$();jQuery()	

文檔準(zhǔn)備完成

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

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

選擇器

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

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

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

選擇關(guān)鍵字this

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

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

jQuery選擇過濾器

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

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

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

遍歷

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

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

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

方法鏈

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

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

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

遍歷方法

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

過濾

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

層次遍歷

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

遍歷DOM樹

• .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)不變），添加新元素等等?？偟膩碚f，操作元素的可選項(xiàng)是很多的。

讀取&設(shè)置

操作方法中最常用的兩個(gè)指令即讀取或設(shè)置信息。通過選擇器獲取信息需要給這個(gè)選擇器添加一個(gè)方法來確定那個(gè)信息需要被檢索。另外，同樣的選擇器和方法同樣可以用來設(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()方法被用來給所有的偶數(shù)列表項(xiàng)添加一個(gè)類，.removeClass()方法被用來移除所有段落的類，最后.attr方法被用來給所有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()方法可以使用不同的語法設(shè)置一個(gè)或多個(gè)屬性。若設(shè)置一個(gè)屬性，屬性名和值應(yīng)該在引號(hào)內(nèi)并被逗號(hào)分隔。如果設(shè)置多個(gè)屬性，屬性應(yīng)該嵌套在大括號(hào)內(nèi)，屬性名使用駝峰的形式移除任何的連字符（Ps：按照css的正常寫法也可以，關(guān)于這些方法的詳細(xì)語法可以參考api.jquery.com）后面跟冒號(hào)和用引號(hào)引起來的值。每個(gè)屬性和值對(duì)應(yīng)該用逗號(hào)隔開

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

$('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操作方法都有自己的語法，但下面有他們中的幾個(gè)的概述。.prepend()方法用來在選擇的元素的頂部添加一個(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)用。例如，給元素添加類的方法可以設(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ù)用來確保內(nèi)部的任何動(dòng)作都可以被執(zhí)行。function后面的括號(hào)用來給函數(shù)傳遞參數(shù)，就像在這個(gè)示例中使用的event對(duì)象。

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

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

靈活的事件

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

在使用.on()方法時(shí)，第一個(gè)參數(shù)是原生事件名稱，第二個(gè)參數(shù)是時(shí)間處理函數(shù)。從下面的例子可以看出，.on()方法被用來代替.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類的元素上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)用戶和瀏覽器發(fā)生交互時(shí)用這些方法可以注冊(cè)用戶的行為。這些方法注冊(cè)了相當(dāng)多的事件，包括但不局限于瀏覽器，表單，鍵盤事件和鼠標(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()

鍵盤事件

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

鼠標(biāo)事件

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

效果

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

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

jQuery CSS 動(dòng)畫

jQuery利用不同的css屬性實(shí)現(xiàn)了常見的css動(dòng)畫，雖然這些動(dòng)畫有一些css現(xiàn)在本身已經(jīng)可以實(shí)現(xiàn)了。由于瀏覽器的支持原生CSS動(dòng)畫擁有更好的性能，原生動(dòng)畫是更好的選擇，當(dāng)可以使用時(shí)。由于Modernizr 的幫助jQuery動(dòng)畫效果對(duì)那些不支持原生css動(dòng)畫的瀏覽器來說是一個(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)畫在不同時(shí)間的速度也可以設(shè)置。jQuery有兩個(gè)默認(rèn)的緩動(dòng)關(guān)鍵字swing和linear。默認(rèn)的swing值，使動(dòng)畫從比較慢的速度開始然后在動(dòng)畫過程中加速然后在完成之前又減速。liner值則以一個(gè)不變的值運(yùn)行在整個(gè)過程中。

$('.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ì)執(zhí)行其他的函數(shù)，這個(gè)函數(shù)就叫做回調(diào)函數(shù)?；卣{(diào)函數(shù)應(yīng)該放在持續(xù)時(shí)間或緩動(dòng)參數(shù)之后,如果它們存在的話。在這個(gè)函數(shù)中可以放置新的事件或者函數(shù)，這些事件或函數(shù)得遵守他們各自的語法。

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

效果語法

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

效果演示

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

未展開效果：

展開效果

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

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

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

關(guān)于清風(fē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.shayhowe.com/advanced-html-css/jquery

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