［菜鳥系列］jQuery入門（一）

什麼是 jQuery ?

jQuery 就是一個 JavaScript 函數庫，簡單說就是一些現成的 JavaScript 函數，你可以拿來就用。

jQuery 能做啥

• 遍曆頁面中的每個元素。你要想對 HTML 文檔進行操控，必須要對元素進行定位，也就是說迅速的找到那個想改動的元素。
• 修改頁面的模樣。著就要靠 jQuery 對 CSS 做手腳了。
• 修改頁面內容。比如，你想再插入一段話，你想加一張圖，jQuery 都可以幫你做到。
• 響應使用者互動。使用者會對文檔有很多操作（比如點擊一個連結），那麼你想讓文檔對它有什麼反應，都可以用 jQuery 來控制。
• 為頁面增添視覺動畫。
• Ajax 應用。也就是說不用重新整理頁面，就可以對內容進行更新。
• 簡化常見的 JavaScript 任務。

jQuery 為啥這麼好用

• 利用 CSS 的機理。CSS 的選擇符機制對 jQuery 表達文檔結構起到了很大的協助。
• 支援擴充。你可以為 jQuery 寫外掛程式，以擴充其現有的功能。
• 瀏覽器外用的不同模式。jQuery 不會因為瀏覽器的不同模式而有所變化，它是獨立提取出來的一層。
• 集體觀念。jQuery 的許多操作都是對一組元素進行的，你無須再逐條進行跌代，省去了不少事情。
• 可把多項操作放在一行。可以把許多操作用句點“.”連起來，形成一個操作鏈結。感覺有些像自動生產線。

jQuery執行個體

1. 把 jQuery 下載到機器上，選那個60+K的非壓縮版就可以了。
2. 建一個 HTML 文檔，就像這樣。你把它另存新檔 HTML 就可以看到效果了。
3. 建一個 CSS 文檔，名為 alice.css。
4. 建一個 JavaScript 文檔，名為 alice.js 。你會發現它只有三行代碼，非常的簡單。稍後我會講述它們是幹嘛的。
5. 好了，現在需要把 jquery.js 和 alice.js 鏈到 HTML 文檔中。切記，要把 jquery.js 放到最前面，這樣你自己定義的 js 才能用到它。
6. 好了，此時再看看 HTML 文檔發生了什麼變化。你會發現那兩段詩，多了個邊框，字型也變成斜的了。

好了，下面讓我們詳細的說說，那三行 JavaScript 代碼是什麼意思。

12345

<code>$(document).ready(function() { $('.poem-stanza').addClass('emphasized');});</code>

$() 會返回你所尋找的對象/元素，例如 $('.poem-stanza') 會返回所有 class 為 .poem-stanza 的元素。這三行代碼的作用就是，找到擁有 poem-stanza 類的元素，然後為它們加上（addClass）一個新類 emphasized。而它的 CSS 是在 alice.css 中事先定義好的。

ready() 表示以下這些函數是要在文檔被瀏覽器全部載入後再執行的。因為對 DOM 的操作必須得等到文檔全部被瀏覽器讀取後，才能夠進行。如果沒有 ready() 的話，我們需要把這些操作放在一個函數中，比如：

12345

<code>function emphasizePoemStanzas() { $('.poem-stanza').addClass('emphasized');}</code>

然後，再把這個函數加到 onload 事件處理函數中，onload 的作用就是等某個元素載入完畢後，再執行某個函數，我們需要把它加到 body 元素中：

123	<code>&lt; body onload="emphasizePoemStanzas();" &gt;</code>

這便讓你的 HTML 程式碼（結構）與 JavaScript 代碼（功能）混合在了一起，這對日後的維護與更新都是非常不利的，而利用 jQuery 的 ready()，我們可以把它寫成這樣：

123	<code>$(document).ready(emphasizePoemStanzas);</code>

這樣一來，便不用對 HTML 沒有做任何修改了。不過，你可能注意到，我們並沒有為這個函數起名，而是用 function() ——這是一個沒有名字的函數，我們把它稱為匿名函數（anonymous functions），因為這三行代碼，我們只會用到這麼一次，所以我們才使用了匿名函數。

這就是我們的第一個例子，你應該對 jQuery 有一個初步的印象了，下一次，我們會將將如何用 jQuery 得到你想要的 HTML 元素。