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

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

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:可選參數,作為event,data屬性值傳遞給事件對象的額外數據對象.

    fn:用來綁定的處理函數.

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

  (2)toggle()方法

             toggle(fn1,fn2....fnN);模擬鼠標連續單擊事件,一次觸發,直到最后一個.

3.事件冒泡:事件會按照DOM的層次結果由里層向外層元素,直到           DOM頂端被觸發.

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

      (2)stopPropagation();

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

(2)return false;

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

7.事件對象的屬性:

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

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

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

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

(5)event.relatedTarget()

(6)event.pageX()和event.pageY():取光標相對于頁面的坐標

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

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

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

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

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

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

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

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

(2)執行默認操作:

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

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

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

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

12.fadein()和fadeOut():只改變元素的不透明度,不改變其高度和寬度

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

13.slideUp()和slideDown():只改變元素的高度

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

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

(1)語法結構:animate(params,speed,callback);

params:一個包含樣式屬性及值的映射

speed:元素的參數,可選

callback:在動畫完成時執行的函數,可選

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

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

15.停止動畫和動畫狀態的判斷

(1)停止元素的動畫:

stop([clearQueue][,gotoEnd]);

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

toggle(speed,[callback])

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

slideToggle(speed,[callback])

(4)把元素的不透明度以漸進方式調整到指定的值:

fadeTo(speed,opacity,[callback])