jQuery 教學 - 基礎篇

資料來源:
----------------------------------------------
http://jsgears.com/thread-63-1-1.html



簡介:
----------------------------------------------
jQuery 是一套 JavaScript 的 Library，因此，你必須稍具 JavaScript 的基礎，jQuery 主要是用在 DOM 文件的操作，包含「快速選取元素(Element)」並且「做一些事情」，快速選取元素可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能。



快速選取元素:
----------------------------------------------
jQuery 怎麼用來「快速選取元素」並且「做一些事情」呢？請看看程式碼：
$("div").addClass("special");

錢記號 $ 是 jQuery 的物件，使用 $("div") 就是用 jQuery 來選取元素，這個範例可以選取文件內所有的 <div> 元素。後面接著的 .addClass("special") 就是用來做一些事情，這個範例是將先前所選取到的所有元素都加上一個名為 "special" 的 class。也就是透過 $("div").addClass("special") 的語法，可以讓你一次幫文件上有的 <div> 元素都加入 special 的 class。



做一些事情:
----------------------------------------------
使用 jQuery 來選取元素之後，接下來當然就是要來對這些選取到的元素做些改變囉。透過 jQuery 內建的函數，你可以：

1.對 DOM 進行操作，例如對文件節點的新增或修改
2.添加事件處理
3.做一些基本的視覺效果，例如隱藏、顯示、下拉顯示、淡出淡入等等
4.使用 AJAX 傳送表單內容或取得遠端文件



[範例] 選取所有有 target 屬性的 <a>，並且在其節點下加入一段文字。
$("a[target]").append(" (Opens in New Window)");
這是一段原始的 HTML :
<a href="http://jsgears.com">jsGears</a>
<a href="http://google.com" target="_blank">Google</a>
<a href="http://amazon.com" target="_blank">Amazon</a>
選取有 target 屬性並加入文字後的結果：
<a href="http://jsgears.com">jsGears</a>
<a href="http://google.com" target="_blank">Google (Opens in New Window)</a>
<a href="http://amazon.com" target="_blank">Amazon (Opens in New Window)</a>



連續地使用函數(Chaining):
----------------------------------------------
jQuery 很重要的一個特性是可以連續地使用函數(Chaining)，當你選取了一個或一組的元素後，可以連續對這些元素進行多個處理。以下範例會將所有的 <div> 隱藏，修改文字顏色為藍色，再將 <div> 以下拉布幕的效果顯示出來：
$("div").hide();
$("div").css("color", "blue");
$("div").slideDown();
這樣的三行程式碼可以用以下一行的程式碼取代，結果會是完全相同的：
$("div").hide().css("color", "blue").slideDown();




相關的教學文章:
----------------------------------------------
jQuery 學習筆記
網址：http://blog.ericsk.org/archives/tag/jquery-tut
作者：ericsk
部落格：國二學生認真打雜

自製 jQuery Plugin
網址：http://www.jaceju.net/blog/?p=336 (Part 1)
http://www.jaceju.net/blog/?p=337 (Part 2)
作者：jace ju
部落格：網站製作學習誌

jQuery 手冊- 選擇器(Selectors 1.2)
網址：http://jquery.shian.tw/selectors.php
作者：遨遊飛翔
部落格：遨遊飛翔

邊做邊學 jQuery 系列 (有圖有文有影片、適合 ASP.NET 的開發者)
網址：http://msdn.microsoft.com/zh-tw/asp.net/dd446623.aspx
作者：Jeffrey
部落格：黑暗執行緒



相關的範例下載:
----------------------------------------------
http://jsgears.com/tag.php?name=jQuery


官方網站:
----------------------------------------------
http://jquery.com/