3.事件和動畫 A. 事件 Aa. DOM載入 1.為什麼使用jQuery載入DOM方法？ 以javascript的window.onload（）方法載入DOM的先決條件是：必須等待被請求頁面的資源全部載入完成，才會為DOM元素添加事件行為;而jquery只要DOM元素載入完成，就立刻綁定事件 2. ...
3.事件和動畫
A. 事件
Aa. DOM載入
1.為什麼使用jQuery載入DOM方法？
以javascript的window.onload（）方法載入DOM的先決條件是：必須等待被請求頁面的資源全部載入完成，才會為DOM元素添加事件行為;而jquery只要DOM元素載入完成，就立刻綁定事件
2.表現形式：
$(function() {
//你的實現邏輯
});
Ab. 事件綁定
事件綁定方法bind（eventType [， data], function() {...}）
表現形式：
$(function() {
$(“#id”).bind(“click”, function() {
$(this).next().show();
});
});
Ac. 事件合成
Jquery有兩個合成事件：hover（）和toggle（）
1.hover（enter， leave）模擬游標懸停
表現形式：
$(function() {
$(“.class”).hover(function() {
//游標懸停,在引用class層疊樣式,做出響應
$(this).next().show();
}, function() {
//游標離開引用class層疊樣式,做出響應
$(this).next().hide();
});
});
上面的案例解釋：當游標懸停在引用了class層疊樣式時，顯示其後面的一個同輩元素；反之隱藏他
2.toggle（fn1， fn2， ...）模擬滑鼠點擊事件
表現形式：
$(function() {
$(“button”).toggle(function() {
alert(“滑鼠第一次點擊！”);
}, function() {
alert(“滑鼠第二次點擊！”);
}, function() {
alert(“滑鼠第三次點擊！”);
});
});
當滑鼠點擊完成3次之後，再次點擊，則該事件會進入下一輪事件；即：第四次點擊會調用第一個函數...
Ad. 事件對象的屬性
1.獲取事件類型event.type
$(“input”).click(function(event) {
alert(event.type);//因為這是一個click事件，所以代碼會輸出click
});
2.event.preventDefault()//阻止預設事件
$(function() {
$(“#sumbit”).click(function(event) {
event.preventDefault();//阻止表單元素提交
});
});
...
Ae. 事件移除
Unbind(eventType [,data])
$(function() {
$(“#button”).bind(“click”, fn1 = function() {
alert(“把fn1點擊事件綁定到id為button的DOM元素上”);
}).bind(“click”, fn2 = function() {
alert(“把fn2點擊事件綁定到id值為button的DOM元素上”);
});
$(“#button”).unbind(“click”, fn1);//把id值為buttonde的fn1點擊事件移除
});
Af. 操作模擬（trigger（））
1.常用模擬
如：
情景描述：現在要求頁面載入完畢後，立刻觸發點擊事件
$(function() {
$(“#button”).trigger(“click”);//當頁面DOM載入立即觸發id值為button的 元素上面的點擊事件
});
2.出發自定義事件
$(function() {
//1.自定義事件
$(“#button”).bind(“iClick”, function() {
});
//2.觸發自定義事件
$(“#button”).trigger(“iClick”);
});
3.傳遞參數(tigger(type[, data[))
Ag. 其他用法
綁定多個事件類型
$(function() {
$(“div”).bind(“mouseover mouseout”, function() {
$(this).toggleClass(“over”);
alert(“滑鼠移入或離開該div標簽，其樣式會切換變化”);
});
});
...
B. 動畫
通過jquery的動畫方法，提供的多樣的視覺效果，給用戶提供豐富的視覺體驗；
為了實現良好的動畫效果，要求html在標準模式下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ba. Show（）和hide（）
1.show（）//顯示動畫
$(“tag”).show();
$(“tag”).show(speed);//指定顯示的速度：slow、normal、fast或則指明一個速度
2.hide（）//隱藏動畫
參考show（）使用形式
Bb. FadeIn（）和fadeOut（）、slideUp（）和slideDown（）
- FadeIn（）和fadeOut（）改變元素的不透明度
$(function() {
$(“tag”).fadeIn();//tag元素的透明度會越來越高（淡入）
$(“tag”).fadeOut();//tag元素的透明度會越來越低（淡出）
});
2.slideUp（）和slideDown（）改變元素的高度
$(function() {
$(“tag”).fadeIn();//tag元素的高度會越來越高
$(“tag”).fadeOut();//tag元素的高度會越來越低
});
Bc. 自定義動畫方法animate（）
animate(params, speed, callbackFunction)
1.自定義簡單動畫
$(function() {
$(“#id”).click(function() {
$(this).animate({left : “500px”}, 1000);//每點擊一次，該元素向右移動500個像素單位
});
});
$(function() {
$(“#id”).click(function() {
$(this).animate({left : “+=500px”}, 1000);//每點擊一次，該元素在當前位置累加500個像素單位
});
2.多重動畫
2.1、同時執行多個動畫
$(function() {
$(“#id”).click(function() {
$(this).animate({left : “500px”, height : “200px”}, 1000);
});
2.2、按順序執行多個動畫
$(function() {
$(“#id”).click(function() {
$(this).animate({left : “500px”, height : “200px”}, 1000)
.animate({height : “200px”}, 1000);
});
Be. 動畫狀態操作
1.停止元素的動畫
stop（[clearQueue][, gotoEnd]）
$(“#id”).stop();
$(“#id”).stop(true);//清空所有動畫隊列
$(“#id”).stop(true, true);//停止當前的動畫併到達其末狀態，並清空隊列
2.判斷元素是否處於動畫狀態
$(“#id”).is（“:animate”）
3.延遲動畫
delay([speed])
Bf 其他動畫方法
1.toggle（）
2.slideToggle（）
3.fadeTo（）
以漸進的方式調整元素不透明度到一個指定值
$(“#id”).fadeTo(600, 0.2);
4.fadeToggle（）
Bh. 概括
(未完...)
