jQuery的事件处理 动画
事件处理
事件绑定的快捷方式
缺点：绑定的事件无法取消
$("button:eq(0)").dblclick(function(){ alert(123) });
使用on进行事件绑定
①使用on进行单事件绑定
$("button:eq(0)").on("click",function(){ alert(123) })
②使用on同时给多个事件绑定同一函数
$("button:eq(0)").on("click dblclick mouseover",function(){ console.log(123) })
③使用on同时给多个事件分别绑定不同的函数
$("button:eq(0)").on({
"click":function(){ console.log(click) }
"mouseover":function(){ console.log(mouseover) } });
④使用on给回调函数传参，要求是对象格式，传递的函数可以用e.data取到
$("button:eq(0)").on("click", {"name":"kk","age":14},function(e){
console.log(e)
console.log(e.data)
console.log(e.data.name)
})
使用on进行事件委派
事件委派 将原本绑定在DOM节点上的事件，改为绑定在其父节点甚至根节点上，然后委派给当前节点执行
$("p").on("click", function(){})
↓
$(document).on("click", "p",function(){ })
事件委派的作用
1.将事件直接绑定在根节点上，可以减少事件绑定次数，更加节省资源
2.使用事件委派绑定的事件，当页面新增同类型标签时，新的标签页可以获得绑定的已有事件
使用off进行事件解绑
$(document).off("click", function(){alert(123) });
function func(){alert(12) }
$("button:eq(0)").on("click",func);
$("button:eq(0)").off("click",func);//只清除了绑定func函数的click事件
$("button:eq(0)").off("click");//清除所有的click事件
$("button:eq(0)").off("click dblclick");//同时清除多个事件
$(document).off("click","p");//清除事件委派
$("p").off( );//清除绑定的所有事件
one 绑定的事件只能出现一次
$("button:eq(0)").one("click", function(){ alert("一次") });
自动触发事件
trigger 自动触发某个节点绑定的事件
接收两个参数
①需要触发的事件类型
②数组格式 传递给事件回调函数的参数
注意 事件回调函数的第一个参数，必须是事件对象，因此我们传递的参数从第二个开始接收
传递的参数 可以使用arguments进行读取
triggerHandler用法与trigger相同
triggerHandler 与 trigger的区别
①triggerHandler 不能触发HTML事件 例如from表单中的submit事件 trigger 可以触发所有事件
②triggerHandler只能触发所有匹配元素中的第一个元素的事件 trigger 将触发所有匹配元素的事件
③triggerHandler的返回值是事件回调函数的返回值如果事件回调函数没有返回值，则返回undefined
trigger 的返回值永远是调用事件的DOM对象，符合JQuery的可链式语法
$("button:eq(0)").trigger("click",function(e,a,b,c){
console.log(e)
console.log(a)
console.log(b)
console.log(c)
console.log(arguments[2])
})
setTimeout(function(){
$("button:eq(0)").trigger("click",[1,2,3]).text("1")
$("button:eq(0)").triggerHandler("click",[1,2,3])
$("form:eq(0)").trigger("submit")
$("form:eq(0)").triggerHandler("submit")
},3000)
hover 接受两个函数 分别表示mouseover（）mouseout（）两个事件
如果只写一个函数 表示mouseover（）
$("p:eq(0)").hover(function(){
$(this).css("background-color","beige")
},function(){
$(this).css("background-color","red")
});
toggle
①不传参数表示 当前元素为显示状态 则隐藏 当前元素为隐藏状态 则 显示
②传入一个动画执行效果 "fast " "slow" "ease"
③传入一个函数 表示 隐藏或显示动画 完成后执行的回调函数
④接受一个Boolean类型的参数 如果传入的是true则显示当前元素 如果传入的是false则隐藏当前元素
$("button:eq(0)").on("click",function(){
$("p:eq(0)").toggle()
$("p:eq(0)").toggle("fast")
$("p:eq(0)").toggle("fast",function(){
alert(123)
})
动画
show 让隐藏的元素显示 同时修改 宽度高度透明度
不传参,将会直接显示而不进行动画 参数传入时间毫秒,或者表示速度的字符串("slow","normal", or "fast")则将在指定时间内完成动画
参数也可以传入回调函数,表示动画完成后执行的回调
hide 让显示的元素隐藏 效果与show相反
$("#div1").show(3000,function(){
alert(123)
});
$("#div1").hide(3000,function(){
alert(123)
});
slideDown 让隐藏的元素显示 修改height属性
slideUp 让显示的元素隐藏 修改height属性
slideToggle 让隐藏的元素显示 让显示的元素隐藏
$("#div1").slideDown(3000,function( ) { alert(123) });
$("#div1").slideToggle(3000,function(){ alert(123) });
.fadeIn 让隐藏的元素显示 修改透明度opacity属性
.fadeOut 让显示的元素隐藏 修改透明度opacity属性
.fadeTo 让隐藏的元素显示 让显示的元素隐藏 第二个参数表示动画最终的透明度
$("#div1").fadeIn(3000,function(){ alert(123) });
$("#div1").fadeOut(3000,function(){ alert(123) });
$("#div1").fadeToggle(3000,function(){
$("#div1").fadeToggle(3000,function(){
alert(123)
});
$("#div1").fadeTo(3000,function(){ alert(123) });
animate 自定义动画 接收四个参数
①动画完成后最终状态的css键值对集合 注意 css的样式要求使用驼峰式命名法
②动画完成的时间 传入时间毫秒,或者表示速度的字符串("slow","normal", or "fast")
③动画完成的效果 可选值有"linear" 和 "swing"
④动画完成时的回调函数
$("#div1").animate({width:"0px",opacity:0},3000,"linear",function(){ alert(123) });
stop 停止当前节点的所有动画,后续动画将不再执行,动画回调将不再调用
finish 直接结束当前节点的所有动画,动画直接进入最后状态,直接调用动画回调
delay 动画延时 表示延时多少毫秒后再执行动画
$("button:eq(0)").on("click",function(){
$("#div1").stop();
$("#div1").finish(); })
$("#div1").animate({
width:"0px",
opacity:0
},3000,"linear").delay(3000).animate({
fontSize:"48px"
},3000,"linear"))
