jQuery － Write less, Do more

jQuery 是一套物件導向式簡潔輕量級的 JavaScript Library。透過 jQuery 你可以用最精簡少量的程式碼來輕鬆達到跨瀏覽器 DOM 操作、事件處理、設計頁面元素動態效果、AJAX 互動等。

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

摘自：http://jquery.com/

jQuery 的程式碼長怎樣？

$("p.neat").addClass("ohmy").show("slow");

再談談 jQuery 的好

1. 官方文件詳細。(重要)
2. 簡潔不笨重，壓縮後大約15KB (v1.2.6)。
3. 只要你有 JavaScript 的基礎，不用再多去學習一大堆新語法。
4. 不用去煩惱跨瀏覽器的問題，jQuery 已經幫你作好了。(IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+)
5. 支援CSS3選擇器。
6. 社群活躍，你可以有很多人家寫好免費的 plugin 用。
7. 跟其它 library 一起使用也不衝突。(jQuery.noConflict())
8. jQuery UI 幫你漂亮搞定 (Web 2.0?) 網站使用者介面。

學習 jQuery 之前你最好先了解

在輕鬆的使用jQuery之前，你必需先了解基本的JavaScript、CSS與HTML。

開始 jQuery

先下載 jQuery Library
http://docs.jquery.com/Downloading_jQuery
接著將此 JS 檔放進您網頁 HTML 的 <head> 及 </head> 之間...

<script type="text/javascript" src="jQuery 檔案路徑"></script>

您也可以透過 Google 載入 jQuery

利用 Google 可以幫您節省點頻寬與存放空間。
&amp;lt;script type="text/javascript" src="http://www.google.com/jsapi"&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script type="text/javascript" language="javascript"&amp;gt; google.load("jquery", "1.3"); &amp;lt;/script&amp;gt;

jQuery 初探 (Basics)

jQuery 所有的屬性及函式都是定義在「jQuery」這個物件之下，這使你不會因為使用 jQuery Library 而與原本有的全域變數等其它命名空間產生衝突。此外，要取得 jQuery 物件也可以透過它提供的的另外一個縮寫符號 (別名)－錢字號「$」，這時大家可能會問那我有使用其它的 JavaScript Library 也是用「$」怎麼辦？有辦法，用下面這一行就解決了：

jQuery.noConflict();

接著你就可以繼續用 $ 來操作你原本有的函式。但是如果你還是比較想用 $ 來操作 jQuery 怎麼辦？也有取巧的辦法：

(function($) {
    // 在此區塊內我們使 $ 參照 jQuery 物件
    // 在此區塊內使用 $ 不會與其它函式衝突
})(jQuery);

你也可以自己取個 jQuery Object 的別名：

var $alias = jQuery.noConflict();

接下來你就可以使用 $alias 取代 $。

jQuery 的基本操作概念 (Coding basics)

jQuery 程式碼由 $ (或jQuery) 開始 → 後面會接著圓刮號「()」→ 而圓刮號裡面的參數是你想叫 jQuery 幫你找什麼 (取得哪個(些)元素) → 接著是你想叫 jQuery 執行什麼動作 (或處理事件)。例如：

/*
  $("#demo")：選取id為demo的元素，並綁定onclick事件
  .css("background-color","gray")：
  叫jQuery將其CSS的背景顏色屬性改成灰色
  你可以用滑鼠點這個範例看效果
*/
$("#demo").click(function(){
  $("#demo").css("background-color","gray");
});

Chaining －串接

在 jQuery 中，幾乎所有成員都會返回自己執行後的結果－也是一個 jQuery 物件，因此你可以連續地使用函數 (Chaining)。以下我們用一個範例來說明 Chaining 是怎麼一回事：

$("#container").css("color", "blue").css("background-color", "red");

上面這段程式碼由兩段函式組成：

$("#container").css("color", "blue") → 將文字改成藍色
$("#container").css("background-color", "red") → 再將背景顏色改為紅色

利用 Chaining 只剩一行，是不是簡潔多了？

jQuery 選取元素 (Selectors)

jQuery 最基本的中心思想就是以「選取 DOM 元素為開始」，接著就是對它們作一些事。

jQuery 在選取元素方面採用 CSS 選擇器的語法 (CSS1、CSS2、CSS3)，此外透過 plugin 你也可以使用 XPath 語法，我們直接看幾道範例你就會明白怎麼在 jQuery 中用 CSS Selectors 選取元素：

語法 (Syntax)

$(selectors);

tag selector

jQuery 中

$("a"); // 取得頁面中所有的<a>標籤元素

JS DOM 中

document.getElementsByTagName("a");

CSS 中

a {}

id selector

jQuery 中

$("#container"); // 取得id為container的元素

JS DOM 中

document.getElementById("container");

CSS 中

#container {}

class selector

jQuery 中

$(".content"); // 取得class name為content的所有元素

JS DOM 中

document.getElementsByClassName("content");
// FF3、或自己實作這個函式

CSS 中

.content {}

同樣道理，CSS中有的你都能依樣畫葫蘆

jQuery 中

$('#container a'); // 取得id為container之元素其內部的所有連結

CSS 中

#container a {}

jQuery 中

$("div > p"); // 取得div父元素其下所有的p子元素

CSS 中

div > p {}

jQuery 中

$("tr:first"); // 取得第一個找到的tr標籤元素

CSS 中

tr:first {}

jQuery 中

$("input[name='newsletter']"); // 取得其name屬性值為newsletter的input元素

CSS 中

input[name='newsletter'] {}

jQuery Selectors 取回的元素之型態？

jQuery 物件 ($) 會將匹配到的元素以「陣列」型態返回一個 jQuery 物件，也就是說你可以像下面這樣取得被匹配到元素的個數：

// 選取到幾個<a>？
$('a').length;
$('a').size();

jQuery 物件 → 實際 HTML DOM 元素

正如上述，取得的元素是一個 jQuery 物件，因此如果我們作下面這樣操作是會產生錯誤的：

$("#container").style.display = "none";

WHY？因為 style is not defined。(jQuery 物件沒 style 這屬性，因為它不是 DOM 物件嘛！)

jQuery 物件只能使用 jQuery 的方法；而 DOM 物件只能使用 DOM 物件的方法。

如果你想操作實際的 DOM 元素怎麼辦？ jQuery 提供下面的方法來處理這問題：

/* 轉換為真實 DOM 元素集合 */
var container = $("#container").get();
/*
  取得 $(".containers") 元素集合裡的第X個 DOM 元素
  get後面接的是索引值，索引值由0開始
*/
var containers = $(".containers").get(0);
或，您也可以這樣
var container = $("#container")[0];

我們再來看看，可以正確執行的 Code 應該是這樣的：

$("#container").get(0).style.display = "none";

DOM 物件 → jQuery 物件

反過來，如果你想將 DOM 轉為 jQuery 物件，只要將 DOM 傳入「$()」:

jQuery(elements);
或
$(elements);

如：

$(document.getElementById("id"));

jQuery 屬性與樣式 (Attributes & CSS)

我想一般對於 JavaScript 大部分的操作都用在變動 HTML DOM 元素的屬性跟樣式，如果你有這個經驗，就會知道在設定時會有許多複雜及麻煩的問題，比如說 IE 它 setAttribute 不吃 name 屬性；又像在指定 class 屬性時，名稱不能用 class 而要用 className 等問題。令人開心的，jQuery 已經幫你處理掉中間這些繁雜過程可能遇到的問題了！你只需記得原本的 HTML 和 CSS 是怎樣寫就行。

jQuery 對於 HTML Tag 屬性的操作 (Attributes)

取得第一個匹配到的元素之屬性值：

attr(name)

例. 取得第一個連結的 title 值：

$("a").attr("title");

替所有匹配到的元素設定屬性值：

attr(key,value)

例. 替所有連結的 title 設為 Enjoy jQuery：

$("a").attr("title","Enjoy jQuery");

你也可以用 key/value object 的方式來替所有匹配到的元素設定多個屬性值：

attr(properties)

例. 替所有的圖片設定 src、title 及 alt 屬性：

$("img").attr({ 
  src: "logo.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});

移除元素屬性也很簡單：

removeAttr(name)

例. 移除所有連結的 title：

$("a").removeAttr("title");

jQuery 對 class 這個屬性有特別的處理

對於 class，jQuery 另外提供個別的函式來作 class 增刪的動作，這是為了可以方便疊加與移除特定的 class。

增加 class：

addClass(class)

例. 幫所有的段落加入 selected 和 highlight 類別：

$("p").addClass("selected highlight");

移除 class：

removeClass(class)

例. 移除 id 為 wrapper 的元素其 blue 這個類別：

$("#wrapper").removeClass("blue");

Value － Getter/Setter

val([val])，一個很常用到的 Attr. －取得與設定表單元素的 Value 值：

/* 取得表單的Value值 － 無參數 */
$(selectors).val();

/* 設定表單的Value值 － 有參數 */
$(selectors).val(val); 

/* 勾選check、select、radio中值為val的選項 － 有參數
    參數val：Array<String> */
$(selectors).val(val);

例如這樣用：

/* HTML */
<input type="text" /> 
/* jQuery codes */
$("input").val("Hello World!"); 
/* 設定後的 HTML */
<input type="text" value="Hello World!" />

jQuery 對於樣式的操作 (CSS)

傳統 JavaScript 在處理 css 的問題上簡直頭大，設定一個 background-color 你得先知道其實要改用 elem.style.backgroundColor；對透明度 opacity 設定上你要了解 IE 是用 filter··。jQuery 的寫法很簡單，就直接用 key/value 成對的一組屬性來設定，我們只要知道 CSS 的表達式就沒問題。

取得第一個匹配到的元素之樣式：

css(name)

例. 取得第一個段落的字體顏色：

$("p").css("color");

替所有匹配到元素設定一種樣式：

css(name,value)

例. 替所有段落的透明度設為半透明：

$("p").css("opacity","0.5");
// 是的，設opacity就可以，jQuery已經幫你處理好跨瀏覽器問題

你也可以用 key/value 對的方式指定給所有匹配的元素多個樣式：

css(properties)

例. 替所有段落的字體設為紅色，背景設為藍色：

$("p").css({color:"red","background-color":"blue"});

若屬性中包含「-」，記得加上引號，沒有的話則可有可無。

元素的位置及寬高－常用的屬性獨立出來

height([val])、width([val]) －取得/設定元素的寬度和高度

/* 取得第一個匹配到的元素其height(高度 px)值 － 無參數 */
$("p").height(); //取得第一個段落的高度

/* 設定每個匹配到的元素其height(沒指定單位時預設為px)值 － 有參數 */
$("p").height(20); //將所有段落的高度設作20px

offset() －取得元素相對於當前視窗左上角的位置偏移量

返回值 Object{top,left}

一般在傳統JavaScript我們會用offsetLeft及offsetTop來取得元素在頁面上的座標，不過IE與FF瀏覽器解讀這兩個屬性是不一樣的，IE會解讀成目標元素跟父元素的left-top距離；FF則是相對於頁面上的left-top，所以在IE下我們一般都需要利用往父元素跑迴圈加總offsetLeft來取得元素在頁面上的座標值。不過，在jQuery中我們統一用offset()就可以囉！

看過上述 jQuery 對於屬性及樣式的操作，是不是簡化了我們許多不必要的煩惱，讓我們可以將精神拉回純 HTML 與 CSS 的思緒上面呢！

jQuery 篩選元素 (Traversing)

先前談到的選取元素 (selectors) 是直接從根元素去尋找其下的的後代子元素，而我們這裡要探討如何去進一步「篩選」，jQuery 的 Traversing 能幫你作這些過濾、查訪元素的動作。

Traversing也就是從某元素進一步去找出跟它有關係(關連)的元素。

過濾元素 (Filtering)

jQuery 有提供一些函數幫助我們方便的「濾出」我們要的目標元素：

取得第 index 個元素 (index從0開始)

eq(index)
例：取得匹配的第3個元素
$("p").eq(2);

相較於get(index)得到的是DOM物件；eq(index)則是jQuery物件。

找出所有符合表達式條件的元素 (可用逗號「,」分開多個 expr)

filter(expr)
例：取得類別為highlight的所有段落元素
$("p").filter(".highlight");

刪除所有符合表達式條件的元素 (expr 為一個表達式或一個(組) DOM 元素)

not(expr)
例：刪除掉類別為green的及id為blueone的元素
$("div").not(".green, #blueone");

元素 (節點) 間位置的相互關係

在談如何查訪元素之前，我先用一張簡單的示意圖來說明元素節點間相互的空間關係：

依縱向關係來查訪 (Finding)

/* 取得上一階層的父元素 */
$(expression).parent([expr]);

/* 取得全部的父元素集合(祖先元素) */
$(expression).parents([expr]);

/* 取得(僅)下一階層的所有子元素之集合 (不含text nodes) */
$(expression).children([expr]);

/* 取得全部的子元素 (含text nodes)
    若selectors是個iframe，則contents會取得其document物件 */
$(expression).contents([expr]);

依橫向關係來查訪 (Finding)

/* 取得其後緊鄰的兄弟元素 (同輩元素) */
$(expression).next([expr]);

/* 取得從下一個直到最後一個同輩元素 */
$(expression).nextAll([expr]);

/* 前一個同輩元素 */
$(expression).prev([expr]);

/* 從前一個直到最開頭的同輩元素 */
$(expression).prevAll([expr]);

/* 取得其所有同輩元素的集合 */
$(expression).siblings([expr]);

依表達式條件來查訪元素 (Finding)

find(expr)

例如我們想取得段落下的span元素：

/* HTML */&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;span&amp;amp;gt;Hello&amp;amp;lt;/span&amp;amp;gt; World&amp;amp;lt;/p&amp;amp;gt;/* jQuery codes */
$("p").find("span");
/* 得到的結果 */
[&amp;amp;lt;span&amp;amp;gt;Hello&amp;amp;lt;/span&amp;amp;gt;]

你也可以寫成下面這樣的型式，其意思同find()。其中，第一個參數為查訪條件式；第二個參數則為jQuery或DOM物件：
$(expression,[context]);

jQuery DOM 操作 (Manipulation)

jQuery Manipulation 主要是用來操作 DOM 元素的新增、刪除與修改等。

改變元素內容 (Changing Contents)

HTML －類似 JavaScript 中的 innerHTML

/* 取得匹配元素的HTML內容 － 無參數 */
$(selectors).html();

/* 設定匹配元素的HTML內容 － 有參數 */
$(selectors).html(val);
例子：
/* HTML */&amp;amp;lt;div&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;/* jQuery codes */
$("div").html("<p>Hello World</p>"); 
/* 得到的結果 */
[&amp;amp;lt;div&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;Hello World&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;]

若包含<script>、<link rel="stylesheet>這些外部檔案jQuery會幫你載入，而<script></script>間的程式碼jQuery則會幫你eval。

Text －純文字內容

/* 取得一個字串包含著所有匹配元素的純文字內容 － 無參數 */
$(selectors).text();
例子：
/* HTML */&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;em&amp;amp;gt;Test1.&amp;amp;lt;/em&amp;amp;gt;Test12.&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;Test3&amp;amp;lt;/p&amp;amp;gt;/* jQuery codes */
$("p").text();
/* 得到的結果 */
Test1.Test2.Test3

/* 設定所有匹配元素的純文字內容 － 有參數
   "<"與">"會自動被轉成HTML entities */
$(selectors).text(val);

插入內容 (Inserting)

相關函式有 append、prepend、before、after等：

append(content) －在每個匹配的元素內部最後面加入···· (內部插入)

/* HTML */&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt; /* jQuery codes */
$("p").append("<b>Hello</b>"); 
/* 得到的結果 */
[&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;]

prepend(content) －在每個匹配的元素內部最前面加入···· (內部插入)

/* HTML */&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt; /* jQuery codes */
$("p").prepend("<b>Hello</b>"); 
/* 得到的結果 */
[&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;]

before(content) －在每個匹配的元素前面加入···· (外部插入)

/* HTML */&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt; /* jQuery codes */
$("p").before("<b>Hello</b>"); 
/* 得到的結果 */
[&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;]

after(content) －在每個匹配的元素後面加入···· (外部插入)

/* HTML */&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt; /* jQuery codes */
$("p").after("<b>Hello</b>"); 
/* 得到的結果 */
[&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;]

移動元素

如果在前面這些函式的參數中帶入「jQuery」或「DOM」物件則代表移動它們：

append(jQuery or DOM)

/* HTML */&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;/* jQuery codes */
$("p").append( $("b") );
/* 得到的結果 */
[&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;]

prepend(jQuery or DOM)

/* HTML */&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;/* jQuery codes */
$("p").prepend( $("b") );
/* 得到的結果 */
[&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;]

before(jQuery or DOM)

/* HTML */&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;/* jQuery codes */
$("p").before( $("b") );
/* 得到的結果 */
[&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;]

after(jQuery or DOM)

/* HTML */&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;/* jQuery codes */
$("p").after( $("b") );
/* 得到的結果 */
[&amp;amp;lt;p&amp;amp;gt;I would like to say: &amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;]

把自己包起來 (Inserting Around)

wrap(html)

/* HTML */&amp;amp;lt;p&amp;amp;gt;Test Here.&amp;amp;lt;/p&amp;amp;gt;/* jQuery codes */
$("p").wrap("<div class='wrap'></div>"); 
/* 得到的結果 */
[&amp;amp;lt;div class=&quot;wrap&quot;&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;Test Paragraph.&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;]

刪除元素 (Removing)

empty() －刪除匹配到的元素其所有子節點

/* HTML */&amp;amp;lt;p&amp;amp;gt;Hello, &amp;amp;lt;span&amp;amp;gt;Person&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;a href=&quot;#&quot;&amp;amp;gt;and person&amp;amp;lt;/a&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;/* jQuery codes */
$("p").empty();
/* 得到的結果 */
[&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;]

remove([expr]) －從 DOM 中刪除所有匹配到的元素 (但此函式不會將匹配的元素從 jQuery 物件中刪除)

/* HTML */&amp;amp;lt;p&amp;amp;gt;Hello&amp;amp;lt;/p&amp;amp;gt; how are &amp;amp;lt;p&amp;amp;gt;you?&amp;amp;lt;/p&amp;amp;gt;/* jQuery codes */
$("p").remove();
/* 得到的結果 */
[how are]

複製元素 (Copying)

clone([true]) －複製匹配元素的副本

/* HTML */&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;, how are you?&amp;amp;lt;/p&amp;amp;gt;/* jQuery codes */
$("b").clone().prependTo("p");
/* 得到的結果 */
[&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;b&amp;amp;gt;Hello&amp;amp;lt;/b&amp;amp;gt;, how are you?&amp;amp;lt;/p&amp;amp;gt;]

如果想要連綁定的事件一起複製，則加個true參數－clone(true)

jQuery 事件處理 (Events)

jQuery 的事件處理函式大都提供兩種用途，一種是呼叫帶有參數的函式－綁定事件處理函式；另一種則是呼叫不帶有參數的函式－觸發該事件。

帶有參數：(例. 綁定所有段落觸發 click 事件時，將背景顏色改為藍色。)

$("p").click(function() {
  $(this).css("background-color","blue");
});

不帶有參數：(例. 觸發所有段落的 click 事件)

$("p").click();

事件處理函數中的「this」為被觸發的「DOM元素」。(非jQuery物件)

上述的程式碼，我們用到 jQuery 定義好的 click 函式來處理 click event，然而 jQuery 也同樣對 DOM 其它的 event 都有相關的函式，如以下的 jQuery 事件函式也是同樣的使用方法：

事件	觸發條件
(on) blur	物件失去焦點時
(on) change	物件內容改變時
(on) click	滑鼠點擊物件時
(on) dblclick	滑鼠連點二下物件時
(on) error	當圖片或文件下載產生錯誤時
(on) focus	當物件被點擊或取得焦點時
(on) keydown	按下鍵盤按鍵時
(on) keypress	按下並放開鍵盤按鍵後
(on) onkeyup	按下並放開鍵盤按鍵時
(on) onload	網頁或圖片完成下載時
(on) mousedown	按下滑鼠按鍵時
(on) mousemove	介於over跟out間的滑鼠移動行為
(on) mouseout	滑鼠離開某物件四周時
(on) mouseover	滑鼠離開某物件四周時
(on) mouseup	放開滑鼠按鍵時
(on) resize	當視窗或框架大小被改變時
(on) scroll	當捲軸被拉動時
(on) select	當文字被選取時
(on) submit	當按下送出按紐時
(on) unload	當使用者關閉網頁時

jQuery 的 event object

對於所有的 jQuery event handler，你都能傳入一個參數作為 event 物件，如下例：

$(document).click(function(event) {
  alert(event.pageX);
});

上面這個例子是用來取得滑鼠游標相對於頁面的位置，重點是！這段程式碼在IE上也能執行 (註：原本的IE瀏覽器事件無pageX屬性)。WHY？因為 jQuery 又事先幫你解決掉事件處理中跨瀏覽器的問題了－ 「jQuery 修改了 event object 以使其符合 W3C 的標準」，所以從此你不用再重複 if(window.event)，你只需了解並使用標準的事件屬性！

jQuery 其它幾個一般性的事件處理函式

hover(fn1, fn2)
hover = mouseover + mouseout。當滑鼠移動到一個匹配的元素上面時，會觸發第一個函數 (fn1)；當滑鼠移出該元素時，會觸發第二個函數 (fn2)。

toggle(fn1, fn2, [fn3,fn4,...])
綁定元素每當觸發「click 事件」時輪流切換執行函數。如點第 1 次執行fn1；點第 2 次執行 fn2····。
例：

$("something").toggle(
  function () {
    $(this).css(......);
  },
  function () {
    $(this).css(......);
  },
  function () {
    $(this).css(......);
  }
);

bind(eventType, fn)、unbind(eventType)
事件的綁定與移除。bind 及 unbind 還可以讓我們達到自訂事件處理的功能：

$('#sth').bind('myEvent', doSomething);

如上，我們自訂一個叫作 myEvent 的事件，但這不是 DOM 標準事件啊，怎麼觸發它？答案是用接著會談到的「trigger」函式來觸發 myEvent。

trigger(eventType, [data])
觸發事件，其中 data 為要傳給事件處理函式的參數 (一個陣列)。

one(eventType, [data], fn)
如果只是觸發「一次」事件，就使用 one 函式來作 bind 的動作，當該事件被觸發一次之後就會自己自動 unbind。

Namespacing events －　替事件命名
我們雖然可以用unbind來移除事件，但是它會一次移除全部綁定的事件處理耶，何解?
答案是利用jQuery提供的Namespacing events！看個例子就明白它是什麼：
$('.class').bind('click.namespace', function(){}); //綁定
$('.class').trigger('click.namespace'); //觸發
$('.class').unbind('click.namespace'); //移除
Namespacing events 簡單的說就是幫事件取個名字(namespace)，了解吧 :)

最後，但是很重要也很常用的

$(document).ready(function(){})

jQuery 中，大部分的操作都基於 HTML DOM，所以我們必須確定頁面文件已經完全下載好才開始執行你的程式，jQuery 提供下面這個函式來處理 DOM ready 事件 (DOMContentLoaded)：

$(document).ready(function() {
  // 這裡放你要執行的程式碼
});

你也可以這樣寫：

$(function() {   
  // 這裡放你要執行的程式碼
});

jQuery的DOM ready event是等HTML DOM準備好就可以開始執行程式，不像一般常用的window.onload要連圖片、外部檔案等全部都下載完畢才會觸發onload事件。

DOMContentLoaded & 外部樣式表的問題？

如上述，DOMContentLoaded 事件的觸發不必等到圖片檔案等下載完畢，但這裡有個問題就是，那需要等到「外部樣式表 (External CSS Styles)」下載完畢嗎？關於這一點，各家瀏覽器對於 DOMContentLoaded 事件的觸發也的確不一致，在 Opera 中瀏覽器不會等外部樣式表下載完即觸發 DOM ready；而 Firefox 則會等到外部 CSS 都加載完畢。因此若你有在 jQuery ready 事件中改變了元素的 CSS 屬性，對於 Opera，你修改的屬性很可能會被接著加載的外部樣式表覆蓋過去，這也就造成跨瀏覽器處理的問題。但如果你無法避免在頁面初始階段改變 CSS 屬性，這問題我們可以利用 load 事件來避開，以確定事件的觸發會在外部樣式表下載完畢之後：

$(element).load(fn);

jQuery 效果 (Effects)

JavaScript 應用在客戶端網頁上最強悍的用途之一就是動態效果了，往往利用純 JavaScript 作一個效果你可能要寫好幾行的 Code，而 Jquery Effects 幫你把許多常會用到的特效包起來，現在你只需要寫個幾行 Code 來作事。(更多請看 jQuery UI)

基本的 (Basics)

show()、show(speed,[callback])

show() －顯示出隱藏的元素

HTML
<p style="display: none">Hello</p>
jQuery
$("p").show();

show(speed,[callback]) －多了動畫效果，且可在開關完畢後執行一函式

HTML
<p style="display: none">Hello</p>
jQuery
$("p").show(5000);

函式說明：

參數	型別	說明
speed	String,Number	三種預定的速度("slow", "normal", "fast")，或動畫間隔的毫秒數值(如一秒、1000).
callback	Function	每個元素在完成動畫後要執行的函數 function callback() {this; //dom element}

hide()、hide(speed,[callback])

隱藏顯示的元素，相對於 show 函式，用法一樣。

toggle()

輪流切換顯示/隱藏狀態。

滑動 (Sliding)

相對於show、hide，slideDown、slideUp是以滑動的效果來顯示/隱藏元素。

slideDown(speed,[callback])

以滑下的特效來顯示元素，參數同 show。

HTML
<p style="display: none">Hello</p>
jQuery
$("p").slideDown(5000);

slideUp(speed,[callback])

以滑上的特效來隱藏元素，參數同 show。

HTML
<p style="display: none">Hello</p>
jQuery
$("p").slideUp(5000);

slideToggle(speed,[callback])

輪流切換顯示/隱藏狀態。

淡入淡出 (Fading)

以淡入淡出的效果來顯示/隱藏元素。

fadeIn(speed,[callback])

以淡入的特效來顯示元素，參數同 show。

HTML
<p style="display: none">Hello</p>
jQuery
$("p").fadeIn(5000);

fadeOut(speed,[callback])

以淡出的特效來隱藏元素，參數同 show。

HTML
<p style="display: none">Hello</p>
jQuery
$("p").fadeOut(5000);

fadeTo(speed,opacity,[callback])

動態漸變調整元素透明度，且可在開關完畢後執行一函式。(寬高不變)

opacity(Number)：不透明度值0~1

HTML
<p style="display: none">Hello</p>
jQuery
$("p").fadeTo("slow", 0.33);

這是特效 Demo
這是特效 Demo
這是特效 Demo

自己設定 (Custom)

animate(params[,duration[,easing[,callback]]])

animate 這個函式可以讓你自行定義動態效果，其參數分別為：

參數	型別	說明
params	Options	一組包含最終CSS樣式的{屬性:值}
duration	String,Number	三種預定的速度("slow", "normal", "fast")，或動畫間隔的毫秒數值(如一秒、1000)
easing	String	緩和方式，預設是 linear 線性，還有 swing 可選
callback	Function	每個元素在完成動畫後要執行的函數

$("#go").click(function(){
  $("#block").animate({ 
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em", 
    borderWidth: "10px"
  }, 1500 );
});

Hello!

animate只支援「可數字化」的屬性，如height、width、left、top、opacity等。

你可以在屬性值前面指定「+=」或「-=」來做相對運動。
$("#go").click(function(){
  $(".block").animate({left: '+=100px'}, 2000);
});

2010年10月27日 星期三

jQuery說明

jQuery － Write less, Do more

jQuery 的程式碼長怎樣？

再談談 jQuery 的好

學習 jQuery 之前你最好先了解

開始 jQuery

您也可以透過 Google 載入 jQuery

jQuery 初探 (Basics)

jQuery 的基本操作概念 (Coding basics)

Chaining － 串接

jQuery 選取元素 (Selectors)

語法 (Syntax)

tag selector

id selector

class selector

同樣道理，CSS中有的你都能依樣畫葫蘆

jQuery Selectors 取回的元素之型態？

jQuery 物件 → 實際 HTML DOM 元素

DOM 物件 → jQuery 物件

jQuery 屬性與樣式 (Attributes & CSS)

jQuery 對於 HTML Tag 屬性的操作 (Attributes)

jQuery 對 class 這個屬性有特別的處理

Value － Getter/Setter

jQuery 對於樣式的操作 (CSS)

元素的位置及寬高 － 常用的屬性獨立出來

jQuery 篩選元素 (Traversing)

過濾元素 (Filtering)

元素 (節點) 間位置的相互關係

依縱向關係來查訪 (Finding)

依橫向關係來查訪 (Finding)

依表達式條件來查訪元素 (Finding)

jQuery DOM 操作 (Manipulation)

改變元素內容 (Changing Contents)

插入內容 (Inserting)

移動元素

把自己包起來 (Inserting Around)

刪除元素 (Removing)

複製元素 (Copying)

jQuery 事件處理 (Events)

jQuery 的 event object

jQuery 其它幾個一般性的事件處理函式

最後，但是很重要也很常用的

$(document).ready(function(){})

DOMContentLoaded & 外部樣式表的問題？

jQuery 效果 (Effects)

基本的 (Basics)

show()、show(speed,[callback])

hide()、hide(speed,[callback])

toggle()

滑動 (Sliding)

slideDown(speed,[callback])

slideUp(speed,[callback])

slideToggle(speed,[callback])

淡入淡出 (Fading)

fadeIn(speed,[callback])

fadeOut(speed,[callback])

fadeTo(speed,opacity,[callback])

自己設定 (Custom)

animate(params[,duration[,easing[,callback]]])

2010年10月27日星期三

Chaining －串接

元素的位置及寬高－常用的屬性獨立出來