​第四章(jQuery中的事件與動(dòng)畫)

               第四章(jQuery中的事件與動(dòng)畫)

1.事件的綁定:bind(type[,data],fn)

            type:事件類型,包括blur,focus,load,resize,

 scroll,unload,click,dbclick,mousedown

 ,mouseup,mouseover,mouseout,

                 mouseenter,mouseleave,change,select,

 submit,keydown,keypress,keyup和error

                 等.

    data:可選參數(shù),作為event,data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象.

    fn:用來綁定的處理函數(shù).

2.合成事件:(1)hover(enter,leave);模擬鼠標(biāo)懸停事件,當(dāng)光標(biāo)移上時(shí),即觸發(fā)(enter),相當(dāng)于mouseover;移除鼠標(biāo)時(shí)就觸發(fā)(leave),相當(dāng)于mouseout.觸發(fā)第二個(gè)函數(shù)需要用tigger("mouseleave")來觸發(fā).

  (2)toggle()方法

             toggle(fn1,fn2....fnN);模擬鼠標(biāo)連續(xù)單擊事件,一次觸發(fā),直到最后一個(gè).

3.事件冒泡:事件會(huì)按照DOM的層次結(jié)果由里層向外層元素,直到           DOM頂端被觸發(fā).

4.停止事件冒泡:(1)return false;

      (2)stopPropagation();

5.阻止默認(rèn)行為:(1)preventDefault()方法;

(2)return false;

6.事件捕獲:與事件冒泡相反,事件捕獲由最頂端往下開始觸發(fā).

7.事件對(duì)象的屬性:

(1)event.type():取事件的類型

(2)event.preventDefault():阻止默認(rèn)事件行為

(3)event.stopPropagation():阻止事件冒泡

(4)event.target():取觸發(fā)事件的元素,避免W3C,IE,safari瀏覽器不同標(biāo)準(zhǔn)的差異

(5)event.relatedTarget()

(6)event.pageX()和event.pageY():取光標(biāo)相對(duì)于頁面的坐標(biāo)

(7)event.which():獲取鼠標(biāo)或者鍵盤的按鍵

(8)event.metakey():對(duì)鍵盤的<ctrl>按鍵解釋的不同

(9)event.originaIEvent():指向原來的事件對(duì)象

8.移除事件:unbind(type[,data]);

9.one(type[,data],fn);

 注意:one與bind用法一樣;只是one只能觸發(fā)一次,bind可以多次

10.trigger();不僅能觸發(fā)瀏覽器支持的具有相同名稱的事件,也可以觸發(fā)自定義的事件

(1).傳遞數(shù)據(jù):trigger(type[,data]);以數(shù)組傳遞

(2)執(zhí)行默認(rèn)操作:

例如:$("input").trigger("focus");

11.show()和hide():同時(shí)修改元素的多個(gè)樣式屬性(高度,寬度,不透明度)

(1)調(diào)用hide()時(shí),要設(shè)置元素的屬性display:none,調(diào)用show()時(shí),元素屬性設(shè)置為:display:block或(inline)

(2)當(dāng)show()和hide()不帶任何參數(shù)時(shí),作用時(shí)立即隱藏或者顯示匹配元素

12.fadein()和fadeOut():只改變?cè)氐牟煌该鞫?不改變其高度和寬度

(1)fadeout()在指定的一段時(shí)間內(nèi)降低元素的不透明度,知道元素完全消失(display:none),fadein()則相反

13.slideUp()和slideDown():只改變?cè)氐母叨?/p>

(1)如果display:none;則slideUp()由上至下顯示延伸,slideDown()則由下到上縮短隱藏.

14.自定義動(dòng)畫方法animate()

(1)語法結(jié)構(gòu):animate(params,speed,callback);

params:一個(gè)包含樣式屬性及值的映射

speed:元素的參數(shù),可選

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

(2) 自定義簡(jiǎn)單動(dòng)畫:設(shè)置屬性position:relative或(absolute)才能影響元素的"top","left","bottom","right"樣式屬性.

(3)累加,累減動(dòng)畫:(+=)或(-=)表示在當(dāng)前位置累加或累減

15.停止動(dòng)畫和動(dòng)畫狀態(tài)的判斷

(1)停止元素的動(dòng)畫:

stop([clearQueue][,gotoEnd]);

(2)切換元素的可見狀態(tài):toggle()與hide()和show()用法相同,可以互換.

toggle(speed,[callback])

(3)通過高度變化來切換匹配元素的可見性:slideToggle()與slideUp(),slideDown()用法相同,可以互相替換.

slideToggle(speed,[callback])

(4)把元素的不透明度以漸進(jìn)方式調(diào)整到指定的值:

fadeTo(speed,opacity,[callback])