文章目录
一、事件
（1）加载Dom两种方式
window.onload
个人理解概述：
执行完其他代码，最后执行该括号内的代码。（只能写一个）
代码如下（示例）：
// window.οnlοad=function(){
// alert(123);
// };
jQuery方法
个人理解概述：
执行完其他代码，最后执行该括号内的代码。(可以写多个)
代码如下（示例）：
$(function(){
alert(123)
});
（2）绑定事件两种方式
元素.on("事件名"，function（）{})
代码如下（示例）：
$("#oBtn1").on('click', function() {
alert(123);
});
元素.事件名(function（）{})
代码如下（示例）：
$("#oBtn1").click(function() {
alert('呵呵')
});
（3）合成事件/事件切换
hover
概述：
鼠标悬停合成事件
代码如下（示例）：
$("#oDiv").hover(function() {
$(this).addClass("over")
}, function() {
$(this).removeClass('over')
});
toggle
概述：
鼠标点击合成事件
代码如下（示例）：
$("#oBtn2").click(function() {
//没有传递参数 调用后立刻隐藏与显示
//有参数（毫秒 调用后 有延时效果）
//$("#oDiv").toggle(1000);
$("#oDiv").toggle(function() {
alert("隐藏了！我出现了");
}, function() {
alert('我出现了')
});
});
（4）事件传播（事件冒泡）
传播
概述：
小-->中-->大
代码如下（示例）：
$("body").click(function(){
alert(123);
});
组织传播
概述：
事件后面加上 return false
代码如下（示例）：
$("#oBtn2").click(function(){
alert(456);
return false;//组织事件传播
});
（5）事件坐标
offsetX
概述：
当前元素左上角
代码如下（示例）：
$("body").click(function(){
//pagex横坐标
//鼠标
console.log(event.pageX,event.pageY);
//left和top
console.log(event.offsetX,event.offsetY);
//窗口
console.log(event.clientX,event.clientY);
});
clientX
概述：
窗口左上角
代码如下（示例）：
$("body").click(function(){
//pagex横坐标
//鼠标
console.log(event.pageX,event.pageY);
//left和top
console.log(event.offsetX,event.offsetY);
//窗口
console.log(event.clientX,event.clientY);
});
pageX
概述：
网页左上角
代码如下（示例）：
$("body").click(function(){
//pagex横坐标
//鼠标
console.log(event.pageX,event.pageY);
//left和top
console.log(event.offsetX,event.offsetY);
//窗口
console.log(event.clientX,event.clientY);
});
（6）移出事件
代码如下（示例）：
//--按钮只能点击一次[2]
var flag=true;
$("#oBtn3").click(function(){
if(flag==true){
alert(123);
flag=false;
}
//一次性作用 通过调用解绑事件即可
$("#oBtn3").one('click'function(){
alert(123);
});
});
//--按钮点击偶数次可行 奇数次不行
var num=1;
$("#oBtn3").click(function(){
if(num%2 ==0){
console.log('点击了'+num);
}
num++;
alert(123);
});
二、动画效果
（1）基本
显示、隐藏、切换
代码如下（示例）：
//隐藏
$("#b2").click(function(){
//$("mydiv").hide(); 没有参数 立刻隐藏
$("#mydiv").hide(3000);
});
//显示
$("#b1").click(function(){
$("#mydiv").show(3000);
});
//显示|隐藏
$("#b3").click(function(){
$("#mydiv").toggle(3000);
});
（2）滑动
slideUp(Time)——动画收缩、SlideDown(Time)——动画展开、slidetoggle（Time）——动画切换
代码如下（示例）：
//向上滑
$("#b4").click(function(){
$("#mydiv").slideUp(3000);
});
//向下滑
$("#b5").click(function(){
$("#mydiv").slideDown(3000);
});
//滑动上下
$("#b6").click(function(){
$("#mydiv").slideToggle(3000);
});
（3）淡入淡出（透明度）
fadeIn(Time)——淡入（透明度减少）
fadeOut(Time)——淡出（透明度增大）
fadeToggle(Time)——切换
代码如下（示例）：
$("#b7").click(function(){
$("#mydiv").fadeout(3000);
});
$("#b8").click(function(){
$("#mydiv").fadeIn(3000);
});
$("#b9").click(function(){
$("#mydiv").fadeToggle(3000);
});
（4）自定义动画
代码如下（示例）：
//--缩放
$("#b10").click(function(){
$("#mydiv").animate(){
width:"500px",
height:"500px"
},3000);
});
//--移动[2]
$("#b11").click(function(){
$("#mydiv").animate(){
left:"+=50px",
top:"+=50px"
})
});
总结
