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

作者：Shay Howe

譯者：清風(fēng)

作為網(wǎng)頁設(shè)計師或前端的一員你經(jīng)常會遇到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)站添加交互和豐富用戶體驗的能力。HTML為頁面提供了結(jié)構(gòu)，CSS為頁面提供了外觀，Javascript為頁面提供了行為。

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

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

值&變量

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

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

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

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

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

語句

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

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

函數(shù)

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

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

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

數(shù)組

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

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

對象

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

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

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

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

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

jQuery簡介

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

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

開始使用jQuery

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

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

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

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

哪里是主要的http?

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

jQuery對象

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

$();jQuery()	

文檔準備完成

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

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

選擇器

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

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

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

選擇關(guān)鍵字this

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

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

jQuery選擇過濾器

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

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

這些過濾器可以在選擇器的內(nèi)部使用，但因為他們不是原生的DOM所以速度有一點點慢。在:filter()方法中使用這些過濾器會達到最好的結(jié)果，filter()方法是jQuery遍歷功能的一部分。

遍歷

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

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

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

方法鏈

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

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

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

遍歷方法

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

過濾

• .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提供的一部分功能，另外重要的一部分就是當這些元素被選中之后可以做些什么。對這些元素的可能操作或者讀取，或者添加或者改變屬性或樣式。另外，DOM中的元素有可能被改變，改變它們在DOM中的位置，移動（DOM結(jié)構(gòu)不變），添加新元素等等。總的來說，操作元素的可選項是很多的。

讀取&設(shè)置

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

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

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

操作屬性

元素可以被檢測和操作的一部分就是屬性。一些選項包括添加，移除，或者改變屬性或?qū)傩灾?。在下面的例子?addClass()方法被用來給所有的偶數(shù)列表項添加一個類，.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()

操作樣式

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

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

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

$('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

最后我們可以檢測和操作DOM，改變元素的位置，添加或移除元素，還有其他各種改變元素的情況。這里的選項是深入和多樣的，允許對DOM做出任何潛在的改變。

每個DOM操作方法都有自己的語法，但下面有他們中的幾個的概述。.prepend()方法用來在選擇的元素的頂部添加一個新的元素，.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ā)生某些特定的事件或行為時被調(diào)用。例如，給元素添加類的方法可以設(shè)置為當那個元素被點擊時執(zhí)行。

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

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

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

靈活的事件

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

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

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

嵌套事件

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

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

事件演示

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

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提供了相當多的方法，當用戶和瀏覽器發(fā)生交互時用這些方法可以注冊用戶的行為。這些方法注冊了相當多的事件，包括但不局限于瀏覽器，表單，鍵盤事件和鼠標事件。這些方法里最普遍的如下：

瀏覽器事件

• .resize()
• .scroll()

文檔加載

• .ready()

事件捕獲

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

事件對象

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

表單事件

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

鍵盤事件

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

鼠標事件

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

效果

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

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

jQuery CSS 動畫

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

效果持續(xù)時間

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

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

緩動效果

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

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

jQuery UI

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

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

效果回調(diào)

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

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

效果語法

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

效果演示

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

滑動效果

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

滑動演示

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();});	

擴展閱讀

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

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

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

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

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

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

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

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