使用 jQuery
要在 HTML 中使用 jQuery 這個 JavaScript framework 很簡單，只要在 <head> 及 </head>
UPDATE 091130: 其實只要在用到 jQuery 程式碼之前把它 include 進來就好，不一定得放在 <head> 裡。
<script type="text/javascript" src="jQuery的檔案"></script>
引用來 js 檔可以到jQuery 專案網頁
UPDATE 091130: jQuery 專案網站已經移至 http://github.com/jquery/jquery，而下載 jQuery 程式碼可以到它的官網（jquery.com）下載
上來下載，該網站上有三個版本的 jQuery 檔案可以下載，分別是：
- jquery-1.2.1.js – 這是 jQuery 程式碼最好讀的版本，如果你打算研究 jQuery 的原始程式碼，那下載這個版本是最清楚的。
- jquery-1.2.1.min.js – 這個版本與 1. 是一模一樣的程式碼，只不過把多餘的空白或是換行給拿掉，以便讓整個 js 檔案大小可以下降，在上線的網站上使用這個版本可以讓使用者下載量變少一點，以提升整個頁面的載入速度。
- 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 秒鐘之內要讓按鈕暫時失效。
所以先來把頁面寫出來：
<html>
<head>
<title>jQuery Tutorial 1</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
// 等一下把程式碼放在這裡。
</script>
</head>
<body>
<div id="msg"></div>
<input type="button" value="Click Me"/>
</body>
</html>
把這樣的 HTML 存成一個 .html 檔案之後，就可以看到一個白白的頁面，上面只有一個按鈕，當然，現在按下按鈕不會有任何事情發生（因為還沒寫相關的 JavaScript 啊），而 <div id="msg"></div> 這部份是我們打算顯示 “Hello” 字樣的區域。
所以先在 <script> 裡寫一個 function 讓顯示區域出現 “Hello” 字樣：
function showMsg() {
$('#msg').html('<h1>Hello</h1>');
}
就這樣，一行就結束了，這裡用到了 jQuery 取得物件的工具(selector) — $('#msg')，$ 這個符號在 jQuery 裡被定義為 jQuery 物件，而 $() 則是用來取得頁面上元件(DOM element)的函式，傳入的 ‘#msg’ 代表的即是 id 為 msg (跟 CSS 的用法一模一樣)，所以 $('#msg') 整個的意義是：
取得頁面上 id 為 msg 的元件，然後把它變成一個 jQuery 物件。
這樣才能用 jQuery 的 html 函式把要塞入的訊息放進指定的物件下。但為了讓按鈕按下時呼叫這個 JavaScript 函式，所以要把按鈕的部份作這樣的修改：
<input type="button" value="Click Me" onclick="showMsg()"/>
加入了 onclick 屬性，相當於定義了：當這按鈕被按下時，去呼叫 showMsg() 這個函式。以上都修改完畢後，重新載入網頁，你就會發現按下按鈕後，就會出現 Hello 的字樣了。
不過光是這樣還不夠，我們要讓這 Hello 字樣在３秒中後消失，所以 showMsg() 得再動點手腳：
function showMsg() {
$('#msg').html('<h1>Hello</h1>');
setTimeout(function(){
$('#msg').hide();
}, 3000);
}
這裡加入了 setTimeout 這個函式，使得字樣出現的 3000 毫秒（也就是 3 秒）後，用了 jQuery 的 hide 方法把字隱藏起來。不過這樣的寫法，你會發現按鈕按一次出現字之後，再怎麼按按鈕都看不到字的出現，這都是因為使用 hide 之後，div#msg 這個物件就一直在隱藏的狀態（也就是在 CSS 中的 display 被設為 none 了），所以得再修改讓字會出現：
function showMsg() {
$('#msg').html('<h1>Hello</h1>').show();
setTimeout(function(){
$('#msg').hide();
}, 3000);
}
相對於 hide 函式，show 的函式會將隱藏的物件給顯示出來，為了保持一致性，原本 div#msg 的部份也可以改寫成這樣：
<div id="msg" style="display:none"></div>
當然這樣的 code 還不夠聰明，明明我除了第一次呼叫這個函式以外，div#msg 裡面就已經被塞入 <h1>Hello</h1> 了，為什麼以後還要笨笨地一直塞呢？所以我們來讓它聰明一點，檢查如果 div#msg 裡已經有東西的話就不塞 HTML 字串進去了：
function showMsg() {
if ($('#msg').html().length == 0) {
$('#msg').html('<h1>Hello</h1>');
}
$('#msg').show();
setTimeout(function(){
$('#msg').hide();
}, 3000);
}
注意加入的 if 判斷式，這裡用了一個沒傳參數的 html 函式，jQuery 裡 html 函式若是沒有傳參數進去的話，它就會回傳該 DOM 元件下的 HTML 字串，所以若回傳的字串長度等於 0 的時候才塞 HTML 進去。這是 jQuery 裡很典型的 getter/setter paradigm ，學愈多 jQuery 的函式愈會發現幾乎都有這樣的設計概念。
接下來就是要在按下按鈕時，讓這個按鈕暫時失效，等待字串消失後再恢復，為了能夠操作按鈕這個物件，先幫它加上 id：
<input type="button" value="Click Me" onclick="showMsg()" id="btn"/>
然後就是修改 showMsg() 函式:
function showMsg() {
$('#btn').attr('disabled', true);
if ($('#msg').html().length == 0) {
$('#msg').html('<h1>Hello</h1>');
}
$('#msg').show();
setTimeout(function(){
$('#msg').hide();
$('#btn').attr('disabled', false);
}, 3000);
}
這裡用到了 jQuery 的 attr 函式，這個函式是用來 get/set DOM 元件的屬性值，如果只傳一個參數，那就是傳回該屬性的值，比方說 $('#btn').attr('type') 會回傳 “button”；若是傳入第二個參數，則表示要設定或修改讓屬性的值，這裡的例子就是透過修改 disabled 這個屬性的值來讓按鈕失效或恢復。
基本上快要大功告成了，不過可以簡單修改一下 show/hide 的方式，讓 Hello 字樣的出現或消失不要那麼突兀，可以用點淡入(fade in)淡出(fade out)的方式來作到 show/hide，所以再把 showMsg 修改一下：
function showMsg() {
$('#btn').attr('disabled', true);
if ($('#msg').html().length == 0) {
$('#msg').html('<h1>Hello</h1>');
}
$('#msg').fadeIn();
setTimeout(function(){
$('#msg').fadeOut();
$('#btn').attr('disabled', false);
}, 3000);
}
如此一來，Hello 的字樣也就會用淡入淡出的方式來呈現了，這一整個練習也就完成了。
| 