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" 字樣的區域。

所以先在