《jQuery Cookbook中文版》——第1章 jQuery基礎1.0 導言

本節書摘來自異步社群《jquery cookbook中文版》一書中的第1章，第1.0節，作者:【美】jquery社群專家組 譯者：姚軍 , 孫博更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

既然你已經選擇了一本有關jquery的“食譜”，本書作者基本就可以假定你對jquery的定義和功能有了大緻的認識。坦白說，“食譜”通常是為尋求加強已有知識基礎的讀者所編寫的。是以，本書使用了問題-解決方案-讨論的編排方式，快速地介紹常見問題的解決方案。但是，如果你是一位jquery新手，不要把本書抛諸腦後，認為第1章是老生常談，這一章就是專為新手所寫的。

如果你需要複習，或者隻有很少或者完全沒有jquery的知識，第1章将幫助你學習jquery的概要知識（其他章節假定你已經了解了這些基礎知識）。現在，從實際出發，如果你對javascript和dom完全沒有了解，可能應該退後一步，問問自己：在對javascript核心語言及其與dom之間的關系沒有基本了解的情況下，學習jquery是否可行。我的建議是在接觸jquery之前，先認真學習dom和javascript的核心知識。我強烈建議将david flanagan編著的《javascript: the definitive guide》一書作為閱讀本書之前的入門讀物。但是，如果你試圖在學習dom和javascript之前就開始jquery的學習，也不要讓我的一家之言阻擋了腳步。許多人都通過jquery學到了這些技術的有用知識。雖然這樣做不理想，但是隻要我們勇敢面對，仍然可以實作學習的目的。

說了這麼多，現在我們來看看jquery的正式定義和功能的簡單描述：

jquery是一個開放源碼的javascript程式庫，簡化了html文檔（更準确地說是文檔對象模型（document object model，dom））與javascript之間的互動。

用通俗的話說，也為了讓守舊的javascript黑客明白，jquery将動态html（dhtml）變得極其簡單。具體地說，jquery簡化了html文檔周遊和操縱、浏覽器事件處理、dom動畫、ajax互動和跨浏覽器javascript開發。

了解了jquery的正式含義之後，我們接下來研究選擇使用jquery的原因。

1.0.1　為什麼使用jquery

在“食譜”中談論jquery的優點似乎有點傻，尤其是在你已選擇閱讀這本“食譜”，很可能已經意識到這些優點的情況下。

是以，雖然這麼做就像在唱詩班面前傳道，但是我們仍然要簡單地看看開發人員選擇使用jquery的原因。通過在研究“怎麼做”之前先解釋“為什麼”，能夠促進你對jquery基礎知識的掌握。

在jquery案例的構造中，我不打算将jquery與其競争者作比較來提高jquery的重要性。這是因為，我相信這方面還沒有真正的直接競争者。而且，我相信jquery是當今唯一同時滿足設計師和程式員需求的程式庫。從這一方面說，jquery是獨一無二的。

市場上充斥着聲名狼藉的javascript程式庫和架構，但是我絕對相信，每個産品都有自己合适的用途和價值。進行廣泛的比較很愚蠢，但是人們總是這麼做，連我自己也不能免俗。所有的程式庫都有價值，哪一個更勝一籌取決于誰使用它以及如何使用它，而不是它實際上能做什麼。而且，根據我的觀察，考慮到javascript開發的目标廣泛，各種javascript程式庫之間的微小差别根本不值一提。是以，我們不再進一步進行哲學方面的探讨了，而是列出能夠支援選擇jquery的一組特性：

jquery是開放源碼的程式庫，該項目在mit和gnu通用公共授權（general public license，gpl）下授權使用。在很多方面，它都是免費的！

jquery很小（精簡後隻有18kb），用gzip壓縮（解壓後為114kb）。

jquery的流行程度令人難以置信，也就是說，有着大規模的使用者社群，許多貢獻者以開發者和傳道者的身份參與該項目。

jquery規範了web浏覽器之間的差異，這樣你就不需要為此費心。

jquery有意地設計為輕量級的程式庫，具有簡單而又智能的插件架構。

jquery的插件庫規模很大，而且從jquery釋出之後就穩步增長。

jquery的api有完整的文檔，包括内聯的代碼示例，這在javascript程式庫中可以稱得上豪華了。多年以來，任何的文檔都是奢侈品。

jquery很友好，提供了一些方法幫助使用者避免與其他javascript程式庫的沖突。

jquery的社群支援相當實用，包括了多個郵件清單、irc頻道和來自jquery社群的大量教程、文章、部落格文章。

jquery的開發是開放式的，任何人都可以送出缺陷修複、改進和開發幫助。

jquery的開發是穩定一緻的，也就是說，開發團隊并不擔憂更新的釋出。

大型機構（如microsoft、dell、bank of america、digg、cbs、netflix）的采用已經并将持續地提高jquery的生命力和穩定性。

jquery先于浏覽器吸收了來自w3c的規範。例如，jquery支援大部分css3選擇器。

jquery目前已經為流行浏覽器（chrome 1、chrome nightly、ie 6、ie 7、ie 8、opera 9.6、safari 3.2、webkit nightly、firefox 2、firefox 3、firefox nightly）上的開發進行了測試和優化。

jquery在設計師的手裡和程式員手裡一樣強大，對兩類使用者一視同仁。

jquery優雅、講求方法以及改變javascript書寫方式的觀念正在成為标準。隻要想想有多少其他解決方案借用了選擇器和連結（chainning）模式就能明白這一點。

jquery無法解釋的副作用——良好的程式設計感覺具有感染力，令人無法抗拒；甚至連批評家都深深地為jquery的特性所着迷。

jquery的文檔有許多使用路徑（例如，api浏覽器、儀表闆應用、“小抄”），包括一個離線api浏覽器（air應用程式）。

jquery旨在傾向于簡化無幹擾javascript方法。

jquery的核心仍然是一個javascript程式庫（與架構相反），同時又提供用于使用者界面部件和應用程式開發的姐妹項目（jquery ui）。

由于jquery建立在大部分開發人員和設計師已經了解的概念（例如，css和html）之上，是以它的學習曲線很平滑。

我認為，使jquery不同于其他解決方案的是上述特性的結合，而不是單一特性。作為javascript工具，整個jquery程式包是無以匹敵的。

1.0.2　jquery原則

jquery的原則是“用更少的代碼做更多的事”。這一原則可以進一步分為三個概念：

（通過css選擇器）尋找一些元素，（通過jquery方法）對其進行某些處理。

連結一組元素上的多個jquery方法。

使用jquery包裝器和隐式疊代。

詳細了解這三個概念是編寫你自己的jquery代碼和擴充本書中學到的秘訣的基礎。下面詳細地解釋這些概念。

1．尋找一些元素并對其進行某些處理

更具體地講，這條原則是指在dom中找到一組元素，然後對這組元素進行某種處理。例如，研究一下這樣的場景：你想要對使用者隐藏一個

元素，在隐含的中加載一些新的文本内容，修改的屬性，最後讓隐藏的再次可見。

上面的最後一句話轉換成的jquery代碼如下：

//隐藏頁面上的所有div

//更新所有div中包含的文本

//為所有div添加值為updatedcontent的class屬性

//顯示頁面上的所有div

我們逐條檢視這4條jquery語句：

隐藏頁面上的

元素，使使用者無法看到它。

用新的文本（new content）替換隐藏元素中的文本。

用新的屬性（class）和值（updatedcontent）更新元素。

在頁面上顯示元素，使使用者又能看到它。

如果現在這些jquery代碼還讓你覺得深奧，也沒有關系。我們将在本章的第一個秘訣中介紹這些基礎知識。另外，從這個代碼示例中，你需要了解的是jquery“找到一些元素并對其進行某些處理”的概念。在讀例子中，用jquery函數（jquery()）找出html頁面中所有的元素，然後用jquery方法對它們進行了一些處理（例如，hide()、text()、addclass()、show()）。

2．鍊

jquery的構造方式允許jquery方法鍊。例如，為什麼不在找到元素之後，将該元素上的操作連結起來呢？上一個代碼示例闡述了“找到一些元素并對其進行某些處理”的概念，它可以用鍊改寫為一條javascript指令。

利用鍊，下面的代碼原來如下：

更改後的代碼如下：

或者加上縮進和換行，如下所示：

簡而言之，鍊允許你在目前用jquery函數選擇（目前用jquery功能包裝起來）的元素上應用無限的jquery方法鍊。在背景，每當應用jquery方法之前，總是傳回以前選擇的元素，使鍊能夠繼續下去。在未來的秘訣中你将會看到，因為插件也以這種方式構造（傳回包裝的元素），是以使用插件也不會破壞這一鍊條。

雖然并非顯而易見，但是根據對代碼的研究，通過一次性選擇一組dom元素，由jquery方法以鍊的方式進行多次操作，能夠減少處理開銷。避免不必要的dom周遊是網頁性能改進的關鍵部分，一定要盡可能重用或者緩存選中的dom元素集。

3．jquery包裝器集

大部分時候，如果jquery很複雜，你會使用所謂的“包裝器”。換句話說，你會從一個html頁面上選擇一組用jquery功能包裝的dom元素。我個人常常将其稱為“包裝器集”或者“包裝集”，因為它是一組由jquery功能包裝的元素。有時候這種包裝器集包含單個dom元素，其他時候則包含多個元素，甚至還有包裝器集沒有包含任何元素的情況。在這種情況下，jquery提供的方法/屬性在空包裝器集中将會“無提示”地失敗，這就可以避免不必要的if語句。

現在，以我們用于解釋“尋找一些元素并對其進行某些處理”的代碼為基礎，如果在網頁上添加幾個

元素，你認為會發生什麼情況呢？在下面這段更新過的代碼示例中，添加了三個元素，這樣網頁上一共有4個元素：

你在這裡沒有顯式編寫任何循環代碼，但是猜猜看會怎麼樣？jquery掃描網頁，将所有

元素放在包裝器集中，這樣我所使用的jquery方法在集合中的每個dom元素上執行（亦稱隐式疊代）。例如，.hide()方法實際上應用到集合中的每個元素。是以，如果再次檢視代碼，就會發現每個方法都應用到頁面上的每個元素，就像你編寫了一個循環在每個dom元素上調用各個jquery方法一樣。更新後的代碼示例将導緻頁面中的所有被隐藏，更新文本内容，指定一個新的類值，然後再次顯示。

對包裝器集和預設的循環系統（隐式疊代）的了解對于圍繞循環的進階概念是至關重要的。你隻要記住，在真正進行更多的循環（例如，jquery('div').each(function(){}）之前，已經發生了簡單的循環。你也可以這樣看：包裝器中的每個元素一般都會被所調用的jquery方法所改變。

還要記住一點，在以後的章節中你将會學習到，某些情況下隻有第一個元素（而不是包裝器集中的所有元素）受到jquery方法（例如，attr()）的影響。

1.0.3　jquery api的組織方式

毫無疑問，在我開始接觸jquery時，選擇它作為我的javasript程式庫的主要原因隻是因為它的文檔很好（以及大量的插件）。後來，我意識到自己愛上jquery的另一個原因是：它的api按照合乎邏輯的分類進行組織。隻要檢視api的組織方式，我就能縮小所需功能的範圍。

在你真正開始使用jquery之前，我建議你通路線上文檔，簡單地了解一下api的組織方式。了解了api的組織方式，你就能更快地在文檔中找到你所需要的資訊，考慮到編寫一個jquery解決方案有許多不同的方法，這實在是一個巨大的優勢。由于一個問題有許多解決方案，是以健全的api組織方式能幫助你更全心全意地投入實作之中。這裡将重申api的組織方式，建議你記住api的大綱，至少記住第一級分類。

. jquery核心

jquery函數

jquery對象通路器

資料

插件

互操作性

. 選擇器

基礎

層次結構

基本過濾器

内容過濾器

可見性過濾器

屬性過濾器

子元素過濾器

表單

表單過濾器

. 屬性

屬性

類

html

文本

值

. 周遊

過濾

查找

鍊

. 操縱

修改内容

内部插入

外部插入

周圍插入

替換

删除

複制

. css

css

定位

高度和寬度

. 事件

頁面加載

事件處理

live事件

互動助手

事件助手

. 特效

滑行

淡入/淡出

自定義

設定

. ajax

ajax請求

ajax事件

雜項

. 工具

浏覽器和特性檢測

數組和對象操作

測試操作

字元串操作

url

在我們開始學習一系列基本的jquery秘訣之前，我想提醒一下：本章介紹的秘訣是互相依賴的。也就是說，從第一個秘訣到最後一個的順序遵循合乎邏輯的知識結構，對于首次接觸這些秘訣的讀者，我建議從1.1節到1.17節順序閱讀。