事件绑定快捷方式
$("button:first").click(function(){
alert(1);
})
使用on绑定事件
①使用on进行单事件绑定
$("button").on("click",function(){
//$(this) 取到当亲调用时间函数的对象
console.log($(this).html());
})
②使用on同时为多个事件，绑定同一函数。
$("button").on("mouseover click",function(){
console.log($(this).html());
})
③调用函数时，传入自定义参数。
/*$("button").on("click",{name:"shuaige"},function(event){
//使用event.data.属性名 找到传入参数
console.log(event.data.name)
});
④使用on进行多是事件多函数绑定
$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseover")
}
})
⑤使用on进行事件委派
>>>将原本需要绑定到某元素上的事件，改为绑定在福元素乃至根节点上，然后委派给当前元素生效
eg： $("p").click(function(){})；
↓
$(document).on("click","button",function(){
alert(1)；
>>>作用：
默认的绑定方式，只能绑定到页面初始时已有的P元素，当页面新增P元素时，无法绑定到新元素上；
使用事件委派方式，当页面新增元素师，可以为所有新元素绑定事件
$("button").on("click",function(){
var p = $("<p>987654321</p>");
$("p").after(p)
})
$(document).on("click","p",function(){
alert(1);
})
off()取消事件绑定
1.$("p").off():取消所有事件
2.$("p").off("click"):取消点击事件
3.$("p").off("click mouseover"):取消多个事件
4.$(document).off("click"，"p"):取消事件委派
使用one() 绑定事件，只能执行一次；之后删除自身
.trigger("event"):自动触发某元素的事件
$("p").click(function(event,art1,art2){
alert("触发了p的click事件"+art1+art2)
console.log("触发了p的click事件"+art1+art2)
});
$("button").click(function(){
$("p").trigger("click",["哈哈","呵呵"])
})
/*******************动画*******************************
-- .show()动画执行效果：修改元素的宽度、高度、opacity属性
① 不参与：让隐藏的元素之间显示，不进行动画
② 传入时间，多少毫秒之内完成动画
③ 传入(时间,函数)： 完成动画之后，执行回调函数
eg： $("p").show(5000,function(){
alert("donghua")
})
--.hide() 与show() 相同，效果相反
- .slideDown(): 让隐藏的元素显示，效果从上到下显示，增加高度。
- .slideup(): 让显示的元素隐藏，效果从上到下显示，减小高度。
- .slideToggle():让显示的隐藏，让隐藏的显示。
- .fadeOut(): 让显示的元素隐藏，淡出
- .fadeIn(): 让隐藏的元素显示，淡入
- .fadeToggle(): 让显示的隐藏，让隐藏的显示；效果，淡入淡出
- .fadeTo(时间，透明度，函数)：同fadeToggle,但多了透明度参数，可以指定显示最终的透明度。
- .animate(){最终的样式属性键值对},动画事件，动画效果("linear"|"swing")，回调函数)：自定动画