- 相關(guān)推薦
剖析JQuery中的事件與動(dòng)畫(huà)
首先，使用JQuery事件與動(dòng)畫(huà)的效果比使用原生js來(lái)的方便得多，當然，最重要的是考慮到了瀏覽器的兼容性。
事件：
基于原生js，常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等，不再贅述。
事件綁定:
在文檔加載完成后，使用bind(type,[data],func())方法綁定事件.
合成事件:
hover(enter-func,leave-func)相當于bind("mouseover")和bind("mouseleave").
toggle()模擬鼠標連點(diǎn)情況下的顯示與隱藏事件toggle(show-func,hide-func).
事件冒泡：
在學(xué)習js高程（三）時(shí)，曾提及到大部分瀏覽器的事件處理機制是事件冒泡，也就是事件是逐級向上發(fā)生的。如果給你個(gè)內嵌元素綁定了事件，給他的父元素也綁定了一個(gè)相同type的事件，那么當事件處理內嵌元素時(shí)，父元素的事件也會(huì )隨之觸發(fā)，JQuery用一個(gè)方法可以阻止事件冒泡，使用event(事件對象).stopPropagation().
既讓可以阻止事件冒泡，那么也可以阻止事件的默認行為，比如錨點(diǎn)元素a，當我們?yōu)閍綁定一個(gè)click事件時(shí)，他不僅會(huì )實(shí)現我們綁定的事件函數，也會(huì )跳轉到指定的href,那么要阻止這一跳轉行為，需要用到event.preventDefault()來(lái)實(shí)現。這個(gè)方法也經(jīng)常用在表單驗證的過(guò)程中，當驗證的字段不通過(guò)是，使用event.preventDefault()來(lái)阻止表單的submit。
當然，對于阻止事件冒泡和阻止默認行為，我們也可以使用return false，當我們要知道，return false同時(shí)阻止了冒泡與默認行為，所以要慎用。
事件對象：
寫(xiě)在回調函數中的參數event即為事件對象。
type屬性，獲取事件的類(lèi)型。
preventDefault()方法，阻止默認行為
stopPropagation()方法，阻止事件冒泡
target屬性，獲取事件觸發(fā)的元素
pageX,pageY屬性，獲取光標相對于頁(yè)面的坐標
mataKey屬性，獲取crtl按鍵
事件移除：
unbind(type,func-name)
第一個(gè)參數是移出事件的類(lèi)型，第二個(gè)為移除事件的變量名，如果沒(méi)有參數，刪除該元素的所有事件，如果提供了type，則刪除該元素所有類(lèi)型為type的事件，若制訂了第二個(gè)參數，則刪除指定事件。
事件模擬：
trigger()，利用該函數實(shí)現進(jìn)入頁(yè)面時(shí)就觸發(fā)指定事件（這個(gè)事件的類(lèi)型是可以自定義的），trigger()有連個(gè)參數，第一個(gè)為type，第二個(gè)為[data]，這個(gè)是可選的，用于傳遞數據。我認為trigger()實(shí)際是上調用事件的過(guò)程。
動(dòng)畫(huà)：
Jquery中的動(dòng)畫(huà)用起來(lái)十分的方便。jquer所有的動(dòng)畫(huà)效果都可以添加時(shí)間參數。
show()與hide()：
顯示與隱藏元素，hide()相當于display:none，而show()則把他還原（之前的display屬性是什么，還原后還是什么）�？梢酝ㄟ^(guò)設置參數來(lái)實(shí)現動(dòng)畫(huà)效果，show(),hide()接收關(guān)鍵字和時(shí)間值（ms）,關(guān)鍵字有slow(0.6s),fast(.2s),nomal(.4s)，他會(huì )同時(shí)改變元素的高度，寬度和不透明度。
fadeIn()與fadeOut():
改變元素的不透明度，fadeIn()提高不透明度，fadeOut()降低不透明度，直到display:none.
slideDown與SlideUp()
改變元素的高度，slideDown()元素自上到下延伸，slideUp()元素自下向上收縮。
animate()
當上面的方法實(shí)現的動(dòng)畫(huà)無(wú)法滿(mǎn)足我們時(shí)，可以使用animate()來(lái)自定義動(dòng)畫(huà)。
animate(params,speed,callback)
params:包含樣式的映射，如{left:"100px",heiget:"100px"}
speed:動(dòng)畫(huà)實(shí)現需要的事件(ms)
callback:動(dòng)畫(huà)完成時(shí)執行的函數。
像上面所寫(xiě)的params的栗子，實(shí)現的時(shí)left與height的同時(shí)改變，若不想同時(shí)改變，使用鏈式寫(xiě)法分開(kāi)寫(xiě)。需要注意一點(diǎn)，css()不算動(dòng)畫(huà)，要想在動(dòng)畫(huà)執行完成后改變樣式，需要把css()寫(xiě)入callback中.
判斷元素是否處于動(dòng)畫(huà)狀態(tài)is(":animated").
延遲操作:animate().delay(time).
其他動(dòng)畫(huà):
toggle()顯示與隱藏
slideToggle()改變高度的顯示與隱藏。
fadeTo(time,op)通過(guò)指定時(shí)間將元素的不透明度變?yōu)閛p
fadeToggle()改變不透明度的顯示與隱藏。
【剖析JQuery中的事件與動(dòng)畫(huà)】相關(guān)文章：
如何理解jquery事件冒泡09-15
jQuery中prev()方法用法07-16
jQuery中parent()和siblings()的問(wèn)題10-16
深度剖析平面設計中的引導設計08-28