JQuery事件與動畫

1、綁定事件的方式

---

一、事件綁定的快捷方式

缺點：綁定的事件，沒法取消

$("button").eq(0).click(function(){ alert(1); })

二、使用on()綁定事件

① 使用on進行單事件綁定 

                $("button:eq(0)").on("click",function(){ alert(1); });

② 使用on：一次性給同一節點添加多個事件，執行同一函數，多個事件之間空格分隔

                $("button:eq(0)").on("click mouseover dblclick",function(){
                    console.log("觸發了事件");
                });

③ 使用on：一次性給同一節點添加多個事件，分別執行不一樣函數*/

                $("button:eq(0)").on({
                    "click":function(){
                        console.log("執行了click事件");
                    },
                    "mouseover":function(){
                        console.log("執行了mouseover事件");
                    }
                });

④ 調用函數時，同時給函數傳入指定參數

                $("button:eq(0)").on("click",{name:"jredu",age:14},function(evn){
                    console.log(evn);
                    console.log(evn.data.name);
                    console.log(evn.data.age);
                });

⑤ 使用on：進行事件委派：

>>> 將本來須要綁定在本元素上的事件，改成綁定到祖先節點乃至根節點上， 而後委派給當前節點生效

     eg：$("p").on("click",function(){});

                  ↓ (事件委派)

              $(document).on("click","p",function(){});

 

>>> 做用：

不使用事件委派的綁定方式，只能綁定到頁面初始化時的標籤上，當頁面新增同類 型標籤，這些新增標籤，不可以綁定上事件；

但若是使用事件委派，當頁面新增同類型標籤時，這些新增標籤也可以綁定上已有 的事件。

                $("button:eq(0)").on("click",function(){
                    $(this).after("<p>這是新增的p標籤</p>");
                });
                
                $("p").on("click",function(){
                    alert("沒有事件委派");
                });
                
                $(document).on("click","p",function(){
                    alert("這是事件委派");
                });

off()取消on事件綁定

$("p").off("click");  取消單事件綁定

$("p").off("click mouseover dblclick");  取消多事件綁定

$(document).off("click","p");  取消事件委派綁定

$("p").off();  取消全部的事件綁定

 

  使用.one()綁定的事件，只能執行一次；

                $("button").one("click",function(){
                    alert("我只能與你們見一面");
                });

 

三、.trigger()：自動觸發某元素的事件。

第一個參數：須要觸發的事件類型；

第二個參數：(可選)數組格式，表示傳遞給對應事件函數的參數。

>>> 傳遞進來的參數，能夠在事件函數中，定義形參獲取(形參第一個必須是 event事件，從第二個開始爲傳遞的參數。)

>>> 也能夠直接在函數中，使用arguments對象數組，讀取參數。

.triggerHandler()：功能同上，區別以下：

  ① triggerHandler 不可以觸發瀏覽器默認的HTML事件，如submit等；

      trigger 能夠觸發任何的事件；

  ② trigger 能夠觸發頁面中全部匹配元素的事件；

      triggerHandler 只能觸發第一個匹配元素的事件；

  ③ trigger的返回值，返回的是調用當前函數的對象，符合JQuery的可鏈式語法；

     triggerHandler返回的是事件函數的返回值，若是事件函數沒有返回值，則範圍  Undefined；

                $("p").on("click",function(evn,n1,n2){ for (var i=1;i<arguments.length;i++) { console.log(arguments[i]); } //alert("這是p標籤的click事件,你傳遞了參數"+n1+"和"+n2);  }); $("p").trigger("click",["jredu",12]); setTimeout(function(){ alert("時間截止，自動交卷"); $("form").trigger("submit"); },5000);

2、JQuery動畫

---

一、.show() 讓隱藏的元素顯示。效果爲：同時修改寬度、高度、opacity屬 性。

① 不傳參：直接顯示，不進行動畫；

② 參數時間毫秒數，表示多少毫秒內完成函數；

③ 傳入(時間,函數)表示動畫完成以後，執行回調函數；

.hide() 讓顯示的元素隱藏，與show相反

 

.slideDown() 讓隱藏的元素顯示，效果爲從上往下，增長高度；

.slideUp() 讓顯示的元素隱藏，效果爲從下往上，減少高度；

.slideToggle() 讓顯示的元素隱藏，讓隱藏的元素顯示；

 

.fadeOut() 讓顯示的元素淡出隱藏，修改透明度；

.fadeIn() 讓隱藏的元素淡入顯示；

.fadeToggle() 讓顯示的元素隱藏，讓隱藏的元素顯示；

.fadeTo(時間,最終透明度,函數) 同fadeToggle，接收第二個參數，表示最終到達的透明度。

                $("#p").show(2000,function(){
                    $("#p").hide(2000);
                });
                setInterval(function(){
                    $("#p").show(2000,function(){
                        $("#p").hide(2000);
                    });
                },4000);
                
                $("#p").slideDown(2000,function(){
                    $("#p").slideUp(2000);
                });
                setInterval(function(){
                    $("#p").slideToggle(1000);
                },2000);
                
                $("#p").fadeIn(2000,function(){
                    $("#p").fadeOut(2000);
                });
                $("#p").fadeTo(2000,0.5,function(){});

二、自定義動畫

.animate({最終的樣式屬性，鍵值對對象},

動畫時間,

動畫效果("linear","swing"),

動畫執行完成後的回調函數)

自定義動畫注意事項：

① 參數一的對象中，鍵必須使用駝峯命名法。{fontSize : "18px"}

② 只有數值類型的屬性可以使用動畫，非數值類型屬性不能應用動畫。

                $("#p").animate({
                    width:"300px",
                    opacity:"0.5"
                },2000,"linear",function(){
                    alert("動畫完成了");
                });