jQuery 學習心得筆記 (2)

簡單看看要怎麼使用 jQuery 來寫 JavaScript

使用 jQuery

要在 HTML 中使用 jQuery 這個 JavaScript framework 很簡單，只要在 及 間加入一行：

UPDATE 091130: 其實只要在用到 jQuery 程式碼之前把它 include 進來就好，不一定得放在 裡。




引用來 js 檔可以到jQuery 專案網頁

UPDATE 091130: jQuery 專案網站已經移至 http://github.com/jquery/jquery，而下載 jQuery 程式碼可以到它的官網（jquery.com）下載

上來下載，該網站上有三個版本的 jQuery 檔案可以下載，分別是：

  1. jquery-1.2.1.js – 這是 jQuery 程式碼最好讀的版本，如果你打算研究 jQuery 的原始程式碼，那下載這個版本是最清楚的。
  2. jquery-1.2.1.min.js – 這個版本與 1. 是一模一樣的程式碼，只不過把多餘的空白或是換行給拿掉，以便讓整個 js 檔案大小可以下降，在上線的網站上使用這個版本可以讓使用者下載量變少一點，以提升整個頁面的載入速度。
  3. jquery-1.2.1.pack.js – 這個版本把原本 jQuery 的程式碼作了「壓縮」，也就是有一些名稱代換的方式把 code size 進行更進一步的塑身。不過因為它用了 eval() 這個函式，所以 JavaScript 的載入會稍微延遲一點時間。

我個人在使用的版本是 jquery-1.2.1.min.js，根據官方網站的資料，如果 Server 支援 HTTP compressing 的話，那 jquery-1.2.1.min.js 更可以壓縮到只有 14kb，對於使用者載入不會造成太大的負擔。

UPDATE 100331: 目前最新的版本是 1.4.2

用 jQuery 來寫程式

說了那麼多廢話，還是直接來看 jQuery 怎麼使用吧！那就先來個簡單的實驗，需求是：頁面上有一個按鈕，希望它被按下時，頁面上會出現3秒 “Hello” 的字樣然後消失，當然在這 3 秒鐘之內要讓按鈕暫時失效。
所以先來把頁面寫出來：



jQuery Tutorial 1







把這樣的 HTML 存成一個 .html 檔案之後，就可以看到一個白白的頁面，上面只有一個按鈕，當然，現在按下按鈕不會有任何事情發生（因為還沒寫相關的 JavaScript 啊），而

這部份是我們打算顯示 “Hello” 字樣的區域。
所以先在