下面小編就為大家?guī)硪黄钊肜斫釰Query中的事件與動(dòng)畫。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧

首先，使用JQuery事件與動(dòng)畫的效果比使用原生js來的方便得多，當(dāng)然，最重要的是考慮到了瀏覽器的兼容性。

事件：

基于原生js，常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等，不再贅述。

事件綁定:

在文檔加載完成后，使用bind(type,[data],func())方法綁定事件.

合成事件:

hover(enter-func,leave-func)相當(dāng)于bind("mouseover")和bind("mouseleave").

toggle()模擬鼠標(biāo)連點(diǎn)情況下的顯示與隱藏事件toggle(show-func,hide-func).

事件冒泡：

在學(xué)習(xí)js高程（三）時(shí)，曾提及到大部分瀏覽器的事件處理機(jī)制是事件冒泡，也就是事件是逐級(jí)向上發(fā)生的。如果給你個(gè)內(nèi)嵌元素綁定了事件，給他的父元素也綁定了一個(gè)相同type的事件，那么當(dāng)事件處理內(nèi)嵌元素時(shí)，父元素的事件也會(huì)隨之觸發(fā)，JQuery用一個(gè)方法可以阻止事件冒泡，使用event(事件對(duì)象).stopPropagation().

既讓可以阻止事件冒泡，那么也可以阻止事件的默認(rèn)行為，比如錨點(diǎn)元素a，當(dāng)我們?yōu)閍綁定一個(gè)click事件時(shí)，他不僅會(huì)實(shí)現(xiàn)我們綁定的事件函數(shù)，也會(huì)跳轉(zhuǎn)到指定的href,那么要阻止這一跳轉(zhuǎn)行為，需要用到event.preventDefault()來實(shí)現(xiàn)。這個(gè)方法也經(jīng)常用在表單驗(yàn)證的過程中，當(dāng)驗(yàn)證的字段不通過是，使用event.preventDefault()來阻止表單的submit。

當(dāng)然，對(duì)于阻止事件冒泡和阻止默認(rèn)行為，我們也可以使用return false，當(dāng)我們要知道，return  false同時(shí)阻止了冒泡與默認(rèn)行為，所以要慎用。

事件對(duì)象：

寫在回調(diào)函數(shù)中的參數(shù)event即為事件對(duì)象。

type屬性，獲取事件的類型。

preventDefault()方法，阻止默認(rèn)行為

stopPropagation()方法，阻止事件冒泡

target屬性，獲取事件觸發(fā)的元素

pageX,pageY屬性，獲取光標(biāo)相對(duì)于頁面的坐標(biāo)

mataKey屬性，獲取crtl按鍵

事件移除：

unbind(type,func-name)

第一個(gè)參數(shù)是移出事件的類型，第二個(gè)為移除事件的變量名，如果沒有參數(shù)，刪除該元素的所有事件，如果提供了type，則刪除該元素所有類型為type的事件，若制訂了第二個(gè)參數(shù)，則刪除指定事件。

事件模擬：

trigger()，利用該函數(shù)實(shí)現(xiàn)進(jìn)入頁面時(shí)就觸發(fā)指定事件（這個(gè)事件的類型是可以自定義的），trigger()有連個(gè)參數(shù)，第一個(gè)為type，第二個(gè)為[data]，這個(gè)是可選的，用于傳遞數(shù)據(jù)。我認(rèn)為trigger()實(shí)際是上調(diào)用事件的過程。

動(dòng)畫：

Jquery中的動(dòng)畫用起來十分的方便。jquer所有的動(dòng)畫效果都可以添加時(shí)間參數(shù)。

show()與hide()：

顯示與隱藏元素，hide()相當(dāng)于display:none，而show()則把他還原（之前的display屬性是什么，還原后還是什么）。可以通過設(shè)置參數(shù)來實(shí)現(xiàn)動(dòng)畫效果，show(),hide()接收關(guān)鍵字和時(shí)間值（ms）,關(guān)鍵字有slow(0.6s),fast(.2s),nomal(.4s)，他會(huì)同時(shí)改變?cè)氐母叨?，寬度和不透明度?/P>

fadeIn()與fadeOut():

改變?cè)氐牟煌该鞫?，fadeIn()提高不透明度，fadeOut()降低不透明度，直到display:none.

slideDown與SlideUp()

改變?cè)氐母叨龋瑂lideDown()元素自上到下延伸，slideUp()元素自下向上收縮。

animate()

當(dāng)上面的方法實(shí)現(xiàn)的動(dòng)畫無法滿足我們時(shí)，可以使用animate()來自定義動(dòng)畫。

animate(params,speed,callback)

params:包含樣式的映射，如{left:"100px",heiget:"100px"}

speed:動(dòng)畫實(shí)現(xiàn)需要的事件(ms)

callback:動(dòng)畫完成時(shí)執(zhí)行的函數(shù)。

像上面所寫的params的栗子，實(shí)現(xiàn)的時(shí)left與height的同時(shí)改變，若不想同時(shí)改變，使用鏈?zhǔn)綄懛ǚ珠_寫。需要注意一點(diǎn)，css()不算動(dòng)畫，要想在動(dòng)畫執(zhí)行完成后改變樣式，需要把css()寫入callback中.

判斷元素是否處于動(dòng)畫狀態(tài)is(":animated").

延遲操作:animate().delay(time).

其他動(dòng)畫:

toggle()顯示與隱藏

slideToggle()改變高度的顯示與隱藏。

fadeTo(time,op)通過指定時(shí)間將元素的不透明度變?yōu)閛p

fadeToggle()改變不透明度的顯示與隱藏。

以上這篇深入理解JQuery中的事件與動(dòng)畫就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考