一、绑定事件的方式
1、事件绑定的快捷方式
缺点：绑定的事件，无法取消
$("button").eq(0).click(function(){
alert(1);
})
2、使用on()绑定事件
① 使用on进行单事件绑定
② 使用on：一次性给同一节点添加多个事件，执行同一函数，多个事件之间空格分隔
$("button:eq(0)").on("click",function(){
alert(1);
});
$("button:eq(0)").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); });
>>> 将原本需要绑定在本元素上的事件，改为绑定到祖先节点乃至根节点上，然后委派给当前节点生效
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(){});
.animate({最终的样式属性，键值对对象},
动画时间,
动画效果("linear","swing"),
动画执行完成后的回调函数)
自定义动画注意事项：
① 参数一的对象中，键必须使用驼峰命名法。{fontSize : "18px"}
② 只有数值类型的属性能够使用动画，非数值类型属性不能应用动画。
$("#p").animate({ width:"300px", opacity:"0.5" },2000,"linear",function(){ alert("动画完成了"); });
