jQuery學習筆記（三）
jQuery中的事件和動畫
jquery中的事件
- 加載DOM
兩者等價但有細微區別
$(document).ready(function(){//編寫代碼}) 在DOM完全就緒時就可以被調用。可重復使用
簡寫 $(function(){//...｝) 或者 $().ready(function(){//...})
$(window).load(function(){//編寫代碼}) 是在網頁中所有的元素(包括元素的關聯文件)完全加載到瀏覽器後才執行，即JavaScript此時才可以訪問網頁中的任何元素。會自動覆蓋。
- 事件綁定
bind(type[.data].fn); 調用格式
type事件類型參數
data:可選參數 ：作為event.data屬性值傳遞給事件對象的額外數據對象
fn參數：用來綁定的處理函數
- 合成事件
1.hover()方法 用於模擬光標懸停事件，代替bind("mouseenter")和bind("mouseleave")
$("selector").hover(enter,leave)
2..toggle()方法 用於模擬鼠標連續點擊事件，特殊用法：切換元素可見狀態
$("selector").toggle(fn1,fn2,...,fnN)
3.高亮樣式
.highlight{background:#ff3300;}
- 事件冒泡
事件對象 ： $("element").bind("click",function(event){//event:事件對象...})
當單擊element元素時，事件對象被創建，這個對象只有事件處理函數才能訪問到。事件處理函數執行完畢後，事件對象就被銷毀了。
停止事件冒泡：
阻止默認行為：event.preventDefault()
同時對事件對象停止冒泡和默認行為：return false；
- 事件對象的屬性
even.type 獲取事件類型
event.stopPropagation() 停止事件冒泡
event.preventDefault() 阻止默認行為
even.target 獲取到觸發事件的元素
event.relatedTarget 訪問事件相關元素
event.pageX / event.pageY 獲取光標相對於頁面的x坐標和y坐標
event.which 在鼠標單擊事件中獲取鼠標的左、中、右鍵；在鍵盤事件中獲取鍵盤的按鍵（返回值1=鼠標左鍵；2=鼠標中鍵；3=鼠標右鍵）
event.metaKey 鍵盤事件中獲取<ctrl>按鍵
- 移除事件
1.unbind()方法 $("selector").unbind(type.[data])
type 事件類型
data 要移除的函數
a）如果沒有參數，則刪除所有綁定的事件
b）如果提供了事件類型參數，則只刪除該類型的綁定事件
c）如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除
2.one()方法 $("selector").one(type,[data].fn)
當處理函數觸發一次後，立即被刪除。
- 模擬操作
1. 常用模擬 $("#btn").trigger("click"); 當頁面裝載完畢後，就會立刻輸出想要的效果
2.觸發自定義事件 $("#btn").trigger(“myClick”)
3.傳遞數據 $("#btn").trigger(type，[data])
- 其他用法
1.綁定多個事件類型 ("selector").bind("type1 type2",function(){//...})
2.添加事件命名空間 $("selector").bind("type.命名空間",function(){//...})
3.匹配所有不包含在命名空間內的click方法 $("selector").trigger("type!")
jQuery中的動畫
- show()方法和hide()方法
$("selector").show() $("selector").hide()
1.沒有參數時等同於通過設置display的樣式
2.傳入參數後，.show()和.hide()方法同時動畫改變元素的width,height和透明屬性
3.傳入參數控制顯隱速度，單位毫秒，如.show(600)，也可傳入fast,normal,slow，fast為200毫秒，normal為400毫秒，slow為600毫秒）
- fadeIn()方法和fadeOut()方法
$("selector").fadeIn() $("selector").fadeOut()
只改變元素的不透明度
- slideUp()方法和sliDown()方法
$("selector").slideUp() $("selector").slideDown()
只改變元素高度
- 自定義動畫方法animate()
$("selector").animate(params,speed,callback);
a）params:一個包含樣式屬性及值的映射，比如{property1:"value1",property2:"value2",...}
b）speed:速度參數，可選
c）callback:在動畫完成時執行的參數（即回調函數），可選
- 動畫回調函數
因css()方法不會加入動畫隊列中，則會馬上執行。如若要在動畫最後改變selector的css，需要利用回調函數，回調函數適用於jQuery所有的動畫效果方法。
- 停止動畫和判斷是否處於動畫狀態
1.停止元素的動畫 結束當前動畫，如隊列中存在下一個動畫則立即執行下一個動畫
$("selector").stop([clearQueue][,gotoEnd])
clearQueue參數為Boolean值（true or false），是否清空當前元素接下來尚未執行完的動畫隊列
gotoEnd參數為Boolean值（true or false），是否將正在執行的動畫直接到達末狀態
2.判斷元素是否處於動畫狀態
if(!$("element").is(":animated")){ //判斷元素是否正處於動畫狀態
//如果當前沒有進行動畫，則添加新動畫
}
- 其他動畫方法
toggle(speed,[callback]); 切換元素的可見狀態，如元素隱藏則切換為可見，反之亦然
slideToggle(speed,[callback]); 通過高度變化來切換元素的可見性
fadeTo(speed,opacity,[callback]) 把元素的不透明度以漸進方式調整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度將內容調整到20%透明度
- 動畫方法概括
toggle() 用來代替hide()和show()
slideToggle() 用來代替slideUp()和slideDown()
animate() 可代替所有動畫方法
jQuery學習筆記（三）