JQuery事件與動畫
阿新 • • 發佈：2017-09-09
linear undefined use interval fine 屬性 不同 tex 之間 一、綁定事件的方式
1、事件綁定的快捷方式 缺點：綁定的事件，無法取消
1、.show() 讓隱藏的元素顯示。效果為：同時修改寬度、高度、opacity屬性。 ① 不傳參：直接顯示，不進行動畫； ② 參數時間毫秒數，表示多少毫秒內完成函數； ③ 傳入(時間,函數)表示動畫完成之後，執行回調函數； .hide() 讓顯示的元素隱藏，與show相反 .slideDown() 讓隱藏的元素顯示，效果為從上往下，增加高度； .slideUp() 讓顯示的元素隱藏，效果為從下往上，減小高度； .slideToggle() 讓顯示的元素隱藏，讓隱藏的元素顯示； .fadeOut() 讓顯示的元素淡出隱藏，修改透明度； .fadeIn() 讓隱藏的元素淡入顯示； .fadeToggle() 讓顯示的元素隱藏，讓隱藏的元素顯示； .fadeTo(時間,最終透明度,函數) 同fadeToggle，接收第二個參數，表示最終到達的透明度。
1、事件綁定的快捷方式 缺點：綁定的事件，無法取消
$("button").eq(0).click(function(){
alert(1);
})
2、使用on()綁定事件
① 使用on進行單事件綁定
$("button:eq(0)").on("click",function(){
alert(1);
});
② 使用on：一次性給同一節點添加多個事件，執行同一函數，多個事件之間空格分隔
$("button:eq(0)"③ 使用on：一次性給同一節點添加多個事件，分別執行不同函數*/).on("click mouseover dblclick",function(){ console.log("觸發了事件"); });
$("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("我只能與大家見一面"); });3、.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);
二、JQuery動畫1、.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(){});2、自定義動畫 .animate({最終的樣式屬性，鍵值對對象}, 動畫時間, 動畫效果("linear","swing"), 動畫執行完成後的回調函數) 自定義動畫註意事項： ① 參數一的對象中，鍵必須使用駝峰命名法。{fontSize : "18px"} ② 只有數值類型的屬性能夠使用動畫，非數值類型屬性不能應用動畫。
$("#p").animate({ width:"300px", opacity:"0.5" },2000,"linear",function(){ alert("動畫完成了"); });
JQuery事件與動畫