【滑稽】每日一记 jquery事件

事件绑定快捷方式

$("button:first").click(function(){
alert("1");
});

使用on绑定事件
1、使用on进行单事件绑定

$("button").on("click",function(){
//this 取到当前调用事件函数的对象
console.log($(this).html());
});

2、使用on同时为多个事件绑定同一函数

$("button").on("mouseover click",function(){
　　console.log($(this).html());
});

3、调用函数时传入自定义参数

$("button").on("click",{name:"hahaha"},function(event){
　　//使用event.data.属性名找到传入的参数
　　console.log(event.data.name);
});

4、使用on进行多事件多函数绑定

$("button").on({
　　click:function(){
　　console.log("click");
},
　　mouseover:function () {
　　console.log("mouseover");
}
});

5、使用on进行事件委派
/*事件委派:将原本需要绑定在某元素上的事件改为绑定在父元素乃至根节点上,然后委派给当前元素生效
eg:$("p").click(function(){}); → $(document).on("click","p",function(){});
作用:默认的绑定方式只能绑定到页面初始时已有的p元素,当页面新增p元素时,无法绑定到新元素上;
使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件*/

$(document).on("click","span",function(){
　　alert(1);
});

$("button").on("click",function(){
var p =$("<p>111111</p>");
$("p").after(p);
});

off() 取消事件绑定

1、取消所有事件：$("p").off()
2、取消点击事件：$("p").off("click")
3、取消多个事件：$("p").off("click mouseover")
4、取消事件委派：$(document).off("click","p")


使用.one()绑定事件,只能执行一次

$("button").one("click",function(){
　　alert(1);
});

trigger("event")自动触发某元素的事件

$("p").trigger("click",["haha","hehe"]); 触发事件时，传递参数
$("p").click(function(event,arg1,arg2){
　　alert("触发p的click事件"+arg1+arg2);
})
$("button").click(function(){
　　$("p").trigger("click",["haha","hehe"]);
})

动画：
.show()：让隐藏元素显示，同时修改当前元素的宽高透明度属性
1、不传参:让隐藏的元素直接显示,不进行动画
2、传入时间：毫秒之内完成动画，还有三个值("slow","normal", or "fast")
3、传入时间、函数：完成动画之后执行回调函数
.hide()：让显示元素隐藏，效果与show()相反
.slideDown():让隐藏元素显示，效果为从上往下增加高度
.slideUp():让显示元素隐藏，效果为从下往上减少高度
.slideToggle():让隐藏的显示，让显示的隐藏
.fadeOut():显示元素隐藏，淡出
.fadeIn():隐藏元素显示，淡入
.fadeToggle():让隐藏的显示，让显示的隐藏，淡入淡出
.fadeTo(时间，透明度，函数):同fadeToggle，但多了必选透明度参数，可以指定显示的最终透明度
.animate({最终样式属性键值对}，动画时间，动画效果（"linear","swing"），回调函数):自定义动画

$("p").animate({
　　width:"5px",
　　backgroundColor:"red",
　　opacity:"0.5",
},5000,"linear",function(){
　　alert(1)
});