jQuery 是一個已經廣為使用的 JavaScript 函式庫，目前已經獲得微軟與 Nokia 青睞，即將被納入這兩家廠商的產品中。觀望了很久，今天是第一天玩 jQuery，記錄一下操作的過程。
首先準備一個簡單的測試頁面。它分成三個部分：HTML、CSS、JavaScript。你可以把以下的原始碼複製貼上到記事本，注意要儲存相對應的副檔名。
test.html
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery 小測試</title>
<link rel="stylesheet" href="fannys23.css" type="text/css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="fannys23.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h1>jQuery 小測試</h1>
<div class="content" id="author">by fannys23</div>
<div class="content" id="textfield"></div>
<div class="content" id="jQueryTest"><p class="neat">從 jQuery 官網首頁的 "Learn JQUERY Now!" 取得的語法測試。</p></div>
</div>
</body>
</html>
fannys23.css
body
{
margin: 30px;
}
.content-set
{
font-size: 12pt;
color: Navy;
}
.author-set
{
font-style: italic;
border: 1px solid Green;
padding: 0.5em;
width: 20em;
float: right;
}
p.neat
{
display: none;
clear: both;
margin: 1em 0;
padding: 1em 15px;
background: #0F67A1;
color: #fff;
}
fannys23.js
$(document).ready(function() {
$('.content').addClass('content-set');
$('#author').addClass('author-set');
if ($('#textfield').html().length==0){
$('#textfield').html('<p>預設的測試內容</p>');
}
$("p.neat").addClass("ohmy").show("slow");
});
把三個檔案依檔名存好以後放在同一層目錄下，在瀏覽器打開 test.html，會發現這時的測試頁面只是一個搭配了樣式表的網頁，完全沒有用到 jQuery 的任何東西。為了要成功引入 jQuery 的功能，得再補上 jQuery 的函式庫。
引用 jQuery 的方法很多，我的做法是到 jQuery Project 下載 jQuery-1.2.6.min.js。下載後放在同一層目錄裡頭，這時再重新整理一下，嘿，好了，畫面有變化了呢。
不過，如果使用者可以下載一次 jQuery 函式庫就好，或者說我們以後不用自己更新版本，再或者說不用擔心要把 jQuery 函式庫放到哪裡……應該會更理想吧？所以，我們也可以再改一下 HTML，直接抓 HOST 在 Google 的 jQuery 函式庫。語法是這樣：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
也就是把 test.html 中，原本指定在本地端檔案的 "jquery-1.2.6.min.js"，取代成擺在 Google 上的 "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"。這麼一來，讓使用者拜訪數個使用同樣版本的 jQuery 的網站時，可以到 Google AJAX API 去下載一次就好。
但這樣的 jQuery 一點都不炫麗有趣啊。最有趣的入門範例還是要推薦好人助教 Ericsk 的部落格上的「jQuery 學習心得筆記」系列文以及教學投影片，循序漸近、淺顯易懂，在這邊誠懇大推！(y)
附記一下，有三種取得頁面元素的作法：
| 欲取得頁面元素 | 範例 | 語法 |
|---|---|---|
| 經由 HTML 標籤的名稱取用 | 取用 <p> 標籤裡的內容 | $('p') |
| 經由元素的唯一名稱(ID)取得 | 取用 <p id="test"> 標籤裡的內容 | $('#test') |
| 經由元素的類別名稱(class)取用 | 取用 <p class="test"> 標籤裡的內容 | $('.test') |
留言列表
文書處理 (5)