事件	觸發條件
(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	當使用者關閉網頁時

2. 常用事件 .ready() .load()

.ready(function(){})

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

$(document).ready(function() { //執行程式 }); 相等於 $(function() { //執行程式 });

.load(function(){})

在頁面初始階段改變 CSS 屬性，這問題我們可以利用 load 事件來避開，以確定事件的觸發會在外部樣式表下載完畢之後。

$(element).load(function() { //執行程式 });

3. jQuery一般性的事件函式 (參考)

hover(fn1, fn2)

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

toggle(fn1, fn2, [fn3,fn4,...])

綁定元素每當觸發「click 事件」時輪流切換執行函數。如點第 1 次執行fn1；點第 2 次執行 fn2····。

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。

四、動畫效果

1. 顯示出隱藏的元素 . show()

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}

Ex:

2. 隱藏顯示的元素 . hide()

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

相對於 show 函式，用法一樣。

3. 縮放效果 . slideDown() . slideUp()

展開：slideDown(speed,[callback])

縮起：slideUp(speed,[callback])

Ex:

4. 淡入淡出 .fadeIn()

淡入：fadeIn( (speed,[callback])

淡出：fadeOut (speed,[callback])

參數同 show。

Ex:

5. 調整元素透明度 . fadeTo()

/* HTML */　<p style="display: none">Hello</p>

/* jQuery */　$("p").fadeTo("slow", 0.33); // opacity(Number)：不透明度值0~1

6. 自己設定動畫 . animate()

animate 這個函式可以讓你自行定義動態效果

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

Ex:

<div id="block" style="background-color:#bca;width:100px;border:1px solid green">Hello!</div>

$("#go").click(function () {

$("#block").animate({

width: "70%",

opacity: 0.4,

marginLeft: "0.6in",

fontSize: "3em",

borderWidth: "10px"

}, 1500);

});

</script>
點擊改變 ->

可以在屬性值前面指定「+=」或「-=」來做相對運動。

$("#go").click(function(){

$(".block").animate({left: '+=100px'}, 2000);

});

五、JQuery ajax 基礎

教學影片網址：https://www.youtube.com/watch?v=0J_z5KBizGE

Ajax可以即時與用戶互動，例如用戶註冊帳戶時確認帳號是否重複，

並且可以用最少的需求去詢問server，不造成server負擔。

1. . load(url, [data], [callback])

此函式預設是以 GET 的方式來發送請求，但是如果有設參數 data 則會自動轉為 POST

參數說明：

url	要資料的來源
Data	送值：向server發送資料(存值)
callback	接值：資料回來後會做的function

(1). Ex1: 用load()導入txt

$("input[type=button]").click(function(){

$(".myID").load("test.txt");

});

</script>

補充：

IE緩存比較嚴重，防止txt修改後IE資料還是沒變，可改為以下語法

$(".myID").load('test.txt?date=' + Math.random());

(2). Ex2: 用load()導入別的html

$("input[type=button]").click(function(){

$(".myID").load('test.html #myID2'); //指定我要讀入此html檔裡的某selector

});

</script>

-> 結果

(3). Ex3: 用load()傳接值給php (較少使用,多用post&get)

ajax傳前端值給php後端檢測帳號是否可以註冊，php再回傳驗證結果

$('input[type=button]').click(function(){

//發送的參數格式必須是json格式

var send = {'username':$('username').val()}

$('div').load('process.php',send,function(data)){

//用send送值, function(data)接住此php(server)返回的值

alert(data);

}

})

</script>

結果：

2. $.get() & $.post()

$.get(url, [data], [callback], [type])

$.post(url, [data], [callback], [type])

POST和GET相同，只是傳送資料的實際方式不同，不過使用參數皆相同。

參數說明：

參數	型別	說明
url	String	指定要進行呼叫的位址
data	Map	送值：要傳給server的Key/value值對
callback	Callback	接值：Ajax 請求完成時(必需是success)呼叫的callback
type	String	返回的資料類型 "xml", "html", "script", "json", "jsonp", "text"

(1). Ex1: 取txt內容放入html

$('input[type=button]').click(function(){

$.get('test.txt?data='+Math.random(),function(data){ //?data~random是防止瀏覽器緩存

$('myID').html(data);

})

</script>

(2). Ex2: 傳接php值

傳送值必須為以下格式

$.get("test.php", { name: "John", time: "2pm" } );

$('input[type=button]').click(function(){

var url = 'process.php';

var send = {'username':$('#username').val()}; // send傳送username給php後端

$.get(url , send , function(data){

if(data=='true'){

$('div').html('帳號可以使用');

}

else{

$('div').html('帳號不能是admin');

}

})

</script>

結果

3. $.ajax() 可直接用此速度最快

其實以上post & get都只是$.ajax的縮寫，不過若想在出錯時 (error) 能執行一些函式，那你得使用 $.ajax。

(1). Ex: 同以上$.get() 加上 error事件

$('input[type=button]').click(function(){

var url = 'process,php';

var send = {'username':$('#username').val()};

$.ajax({

url: url,

type: 'get', //預設是get, 所以get可考慮不寫

data: send,

success: function(data){

if(data=='true'){

$('div').html('帳號可以使用');

}

else{

$('div').html('帳號不能是admin');

}

error: function(data, textStatus) {

alert("Error");

alert(data.statusText);

}

})

</script>

l ajax詳細參數選項 (Options)

參數名稱	型別	預設值	說明
async	Boolean	true	是否同部請求
beforeSend	Function	－	發送請求之前可在此修改XMLHttpRequest物件，如添加header等，你可以在此函式中return flase取消Ajax request。 function (XMLHttpRequest) { this; // the options for this ajax request }
cache	Boolean	true false (dataType "script")	1.2版加入的新功能，設定成flase就不會從瀏覽器中抓cache住的舊資料。
complete	Function	－	請求完成時執行的函式(不論結果是success或error)。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType	String	application/x-www-form-urlencoded	傳送資料至Server的編碼類型
data	Object, String	－	傳送至Server的資料，會自動轉為query string的型式，如果是GET請求還會幫你附加到URL。可用processData選項禁止此自動轉換。物件型式則為一Key/Value pairs。
dataFilter	Function	－	過濾Server回傳的資料。函式中第一個參數為資料，第二個則為dataType。 function (data, type) { ...... return data; }
dataType	String	自動判斷 (xml or html)	預期Server傳回的資料類型，如果沒指定，jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback。可選的資料類型有： xml：傳回可用jQuery處理的XML html：傳回HTML，包含jQuery會自動幫你處理的script tags。 script：傳回可執行的JavaScript。(script不會被自動cache，除非cache設為true) json：傳回JSON jsonp：在URL加上?callback=?參數，並在Server端配合送回此jsonp callback。(JSONP?) text：傳回純文字字串
error	Function	－	請求發生錯誤時執行函式。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常textStatus或errorThrown只有一個有值 this;// the options for this ajax request }
global	Boolean	true	設定是否觸發全域Ajax事件。
ifModified	Boolean	false	由Last-Modified header判斷，僅在Server更新文件時才下載。
processData	Boolean	true	設定是否自動將data轉為query string。
success	Function	－	請求成功時執行函式。 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }
url	String	目前URL	指定要進行呼叫的位址
type	String	GET	請求方式，POST/GET。