什麼是 jQuery？

jQuery 是一個快速又簡潔的 JavaScript 程式庫，簡化了讓你在 HTML 文件裡面尋找 DOM物件、處理事件、製作動畫和處理 Ajax 互動的過程，簡單地來說，jQuery 是一套足以改變傳統撰寫 JavaScript 的超酷函式庫方式。

雖然如此簡單，不過對於剛接觸的人要立即入門應用還是會有些摸不著頭緒，而網路上眾多範例都是屬於進階、甚至高階技巧，所以我會盡量將這陣子接觸到並實際應用於專案內的實用案例寫成一系列文章，而第一篇就鎖定在網頁元素的操作，希望對於入門者有所幫助。

剛開始的準備

當然就是下載最新版本的 jQuery 並引入網頁的 head 區段，並準備好方便編輯 HTML 源碼的編輯器，我推薦 PSPad，一套支援中文、FTP 編輯以及高亮度語法的免費文書編輯程式。

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

PsPad

基礎：網頁元素控制

我合作過不少網頁設計師，對於網頁通常都是慣用 Adobe Dreamweaver 來規劃設計，所以對於 HTML 原始碼通常都一知半解，但是要活用 jQuery 就必須了解這些標籤元素和屬性的基本作用。

舉個最常在 DW 源碼內出現的 id 屬性，多數使用 DW 的設計師都不清楚這個 id 有什麼用途？簡單來說，id 就是所謂的 identity（識別）也就是該元素的唯一識別名稱，單一網頁的一個 id 只能出現一次，為的就是方便使用 DOM 的方式來控制這些元素。

案例一

將滑鼠移到超連結上，下方黑線區塊內的文字變更為超連結的文字，移開後就恢復空白。這個案例適用於想要用不同的方式設計連結說明。

/*在 <body>…</body> 內放置超連結 a 元素和一個 id 為 mytext 的 div 元素*/
<a href="http://www.google.com.tw/" id="link">Google</a>
<div id="mytext"></div>
    
/*在 <head>…內加入下列 script*/
<script type="text/javascript">

/* 建立 onload 事件 */
$(function(){

  /* 建立 id 為 link 元素的 mouseover 滑鼠移入事件 */
  $("#link").mouseover(function () {
    /* 將 id 為 mytext 元素的 inline 內容改為 link 元素的 inline 文字 */
    $("#mytext").html($("#link").html());
  });
        
  /* 建立 id 為 link 元素的 mouseout 滑鼠移出事件 */
  $("#link").mouseout(function () {
    /* 將 id 為 mytext 元素的 inline 內容清空 */
    $("#mytext").html("");
  });

});
</script>

當然也可以直接獲取元素的 class name 來控制元素，只要將 class=”link” 加入 a 元素中，並將 jQuery Selector 改寫為：

$(".link").mouseover(function () {
…
}

使用 jQuery 控制網頁元素就是這麼簡單！

下一個單元就是令很多網頁設計師頭疼的 Form 表單元件的應用範例，如聚焦事件、鎖定按鈕、友善的錯誤提示等等。