目录
1.element.on/bind(event,function(){})事件委托
一，jQuery事件
毫不夸张的讲，jQuery就是为了处理事件特别设计的。
针对不同访问者的响应，通常被称之为事件。
tip：我们在设置事件的时候
-
常见的DOM事件有
| 鼠标事件 | 键盘事件 | 表单事件 | 文档//窗口处理事件 |
| click (点击事件) |
keypress (键盘按压事件) |
submit (表单提交事件) |
load (页面加载事件) |
| dblclick (双击事件) |
keydown (键盘按下事件) |
change (表单改变事件) |
resize () |
| mouseenter (鼠标移入事件) |
keyup (键盘事件) |
focus (得到焦点事件) |
scroll (滚动条事件) |
| mouseleave (鼠标移除事件） |
blur (失去焦点事件) |
unload (页面关闭事件) |
|
| hover (鼠标悬停事件) |
-
加载DOM的两种方式
1window.onload
当整个页面全部被加载之后执行，只会执行一次，如果页面写了两个Windows加载事件，有且只对第一个生效。
2.jquery
网页结果绘制完成后执行，会执行多次
tip：有且只有jQuery3.0版本的window.onload会比jQuery先执行,其余版本都是jQuery优先于window.onload
notice：在jQuery中加载事件可以简写为$(()=>{})，我们在编写js的时候箭头函数和简单函数中的this指的是不同的东西
//常规函数
element.onclick=function(){
this//指的是element
}
//箭头函数
element.onclick=()=>{
this//指的是window
}-
绑定事件的两种方式
1.element.on/bind(event,function(){})事件委托
//点击事件
$("good").on("click",functino(){
console.log("hello world");
})2element.event(function(){})
//点击事件
$("good").click(function(){
console.log("hello world");
})-
合成事件/事件切换
1.hover():鼠标悬停合成事件
hover()方法运行时还会运行的两个函数，即mouseenter()和mouseleave()，hover()函数具有两个参数
$("a").hover(function(){
$(".big").show();//展示
},function(){
$(".big").hide();//隐藏
})2.toggle():鼠标点击合成事件
toggle()方法在jQuery1.8版本中就已经被废弃了，在1.9中几经被废除，toggle()方法中加入的两个或者多个函数click事件切换做的响应，当点击时调用第一个函数，再次被点击时就调用第二个函数，以此类推。
$("a").toggle(function(){
console.log("点击一次");
}.function(){
console.log("点击两次");
},function(){
console.log("点击三次");
})
//点击一次就显示点击一次，以此类推目前我们使用的toggle是隐藏和显示
$("div").click(function(){
alter("隐藏");
})
//点击一次时隐藏点击两次就是显示-
事件传播（事件冒泡）
tip：事件冒泡是从子元素到父元素，而事件传播自我是相反的，从父元素到子元素
1传播方式：
从小到大
2.阻止传播：
在事件后面加上return false；
3.代码示例
$("p").click(function(){
console.log("p被教训了");
})
$("div").click(function(){
console.log("div被教训了");
return false;//阻止传播
})
$("body").click(function(){
console.log("body被教训了");
})
//控制台结果为：p被教训了 div被教训了-
移除事件
1.element.unbind/off(event)
$("button").unbind("click");//移除点击事件
$("button").off("click");//移除点击事件2.element.one(event,data,function)
$("button").one("click",function(){
console.log("只能被点击一次");
})二，jQuery动画
-
基本动画
1.控制元素的隐藏和显示
$(selector).hide/show(speed,callback)
speed指的是显示/隐藏的速度，可以取以下值：“show”、"fast"或毫秒
callback指的是执行了hide/show之后执行的函数
$("button").click(function(){
$(".a").show(1000,function(){
alert("显示完毕");
});
})
$("button").click(function(){
$("button").hide(2000);//将延迟设置为2s
})2.toggle
toggle刚好包括以上两个，点击一次就是隐藏，再点击一次就是显示
$("#a").click(function(){
$(".big").toggle(1000);//点击一次隐藏,再点击一次就是显示,延迟为1s
})-
滑动动画
1.控制元素的上下滑动效果
$(selector).slideDown(speed,callback)；//向下滑下
$(selector).slideUp(speed,callback);//向上滑下speed参数规定隐藏/显示的速度，可以取以下的值：“slow”,"fast"或毫秒
2.slideToggle()
$("button").click(function(){
$(".big").slideToggle(1000);
})
//点击一次就向上滑动，再点击一次就想下滑动，延迟为1s-
淡化动画
1.控制元素的淡入和淡化
fadeIn(speed,callback)淡入
fadeOut(speed,callback)淡出
$("#btn").click(function(){
$(".big").fadeIn(1000);//淡入
})
$("#btn").click(function(){
$(".big").fadeOut(1000);//淡出
})2.fadeToggle()
$("#btn").click(function(){
$("big").fadeToggle(1000);
})
//点击一次就淡出，再点击一次就淡入-
自定义动画
$(selector).animate({params},speed,callback)
params填写css样式
speed延迟
callback执行动画后的函数
//点击按钮，控制dic的大小
$("#btn").click(function(){
$(".big").animate({
height:"100px",
width:"100px"
},1000)
})
//点击按钮控制div的移动，距离网页左上角
$("#btn").click(function(){
$(".big").animate({
top:100,
let:100
},1000)
})
//点击按钮控制div的移动，距离此元素
$("#btn").click(function(){
$(".big").animate({
top:"+=10",
let:"+=20"
},1000)
})掌握jQuery的事件，可以在我们编写js的时候省很多事儿。