事件

        加载Dom两种方式

window.onload方式：执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行，编写个数：1个

jQuery方式：执行时间：网页结构绘制完成后，执行，编写个数：多个

两个都有的情况下执行顺序【面试题】：jQuery3.0：window.onload比jQuery先执行    jQuery1.0和2.0：jQuery比window.onload先执行

// 加载Dom两种方式
			// window.onload方式
			window.onload = function(){
				
			}
			
			// jQuery方式
			$(document).ready(function(){
				
			})
			
			$(function(){
				
			})

        绑定事件两种方式

元素.on("事件名",function(){})

元素.事件名(function(){})

// 绑定事件两种方式
			// 元素.on("事件名",function(){})
			// 元素.事件名(function(){})
			// 案例2：演示事件(鼠标悬停和点击)的两种方式
			$("button").eq(0).on("click",function(){
				$("div").eq(0).show();
			})
			
			$("button").eq(1).click(function(){
				$("div").eq(0).hide();
			})

        合成事件/事件切换

hover()：鼠标悬停合成事件：

鼠标移上去第一个函数

鼠标移除第二个函数

// hover()：鼠标悬停合成事件
			// 鼠标移上去第一个函数
			// 鼠标移除第二个函数
			// 案例3：升级案例2鼠标悬停显示和隐藏
			$("button").eq(2).hover(function(){
				$("div").eq(0).show();
			},function(){
				$("div").eq(0).hide();
			})

toggle()：鼠标点击合成事件

// toggle()：鼠标点击合成事件
			// 案例4：升级案例2鼠标点击显示和隐藏
			$("button").eq(2).click(function(){
					$("div").eq(0).toggle(1000);
			})

        事件传播（事件冒泡）

传播：小-->中-->大

阻止传播：事件后面加上  return false

// 传播：小-->中-->大
			// 阻止传播：事件后面加上  return false
			// 案例5：给body div span(在div中) 分别添加点击事件，测试事件传播
			
			$("div").eq(0).click(function(){
				alert("div");
				return false;
			})
			
			$("body").click(function(){
				alert("body");
			})

        事件坐标

offsetX：当前元素左上角

clientX：窗口左上角

pageX：网页左上角

// offsetX：当前元素左上角
			// clientX：窗口左上角
			// pageX：网页左上角
			// 案例6：pageX实现 鼠标悬浮，获取鼠标坐标
			$("body").click(function(){
				console.log(event.offsetX+"   "+event.offsetY);
				 console.log(event.clientX+"    "+event.clientY)
				console.log(event.pageX+"   "+event.pageY);
			})

        移除事件：

元素.unbind("事件名")

注意1：一般情况下，不会使用unbind，推荐使用变量控制事件

注意2：如果某个元素只允许使用一次事件，则可以使用one()


// 元素.unbind("事件名")
			// 案例7：按钮点击一次，不能再次点击
			$("button").eq(2).click(function(){
				alert(123);
			$(this).attr("disabled","disabled");
				$(this).unbind("click");
			})

动画效果

        基本

显示：show(Time)

隐藏:hide(Time)

切换：toggle（Time）

// 动画效果
			// 基本
			// 显示：show(Time)
			// 隐藏:hide(Time)
			// 切换：toggle（Time）
			// 案例1：点击按钮，控制div显示和隐藏（基本动画）
			$("button").eq(2).click(function(){
				$("div").eq(0).toggle(1000);
			})

        滑动

slideUp(Time)：动画收缩(向上滑动)-->隐藏

slideDown(Time)：动画展开(向下滑动)-->显示

slideToggle(Time)：动画切换

// 滑动
			// slideUp(Time)：动画收缩(向上滑动)-->隐藏
			// slideDown(Time)：动画展开(向下滑动)-->显示
			// slideToggle(Time)：动画切换
			// 案例2：点击按钮，控制div显示和隐藏（滑动）
			$("button").eq(0).click(function(){
				$("div").eq(0).slideDown(1000);
			})
			$("button").eq(1).click(function(){
				$("div").eq(0).slideUp(1000);
			})
			$("button").eq(2).click(function(){
				$("div").eq(0).slideToggle(1000);
			})

        淡入淡出(透明度)

fadeIn(Time)：淡入(透明度减少)

fadeOut(Time)：淡出(透明度增大)

fadeToggle(Time)：切换

// 淡入淡出(透明度)
			// fadeIn(Time)：淡入(透明度减少)
			// fadeOut(Time)：淡出(透明度增大)
			// fadeToggle(Time)：切换
			// 案例3：点击按钮，控制div显示和隐藏（透明度）
			$("button").eq(0).click(function(){
				$("div").eq(0).fadeIn(1000);
			})
			$("button").eq(1).click(function(){
				$("div").eq(0).fadeOut(1000);
			})
			$("button").eq(2).click(function(){
				$("div").eq(0).fadeToggle(1000);
			})

        自定义动画

元素.animate({属性：属性值},Time)

缩放

        width

        height


移动

        top

        left


移动(本元素)，距离

        top=  "+="

        left= "-="

// 自定义动画
			// 元素.animate({属性：属性值},Time)
			// 案例4：点击按钮，控制div的宽度和高度变大
			$("button").eq(2).click(function(){
				$("div").eq(0).animate({
					width:'800px',
					height:'800px'
				},2000)
			})
			
			// 案例5：点击按钮，控制div移动，距离网页左上角
			$("button").eq(2).click(function(){
				$("div").eq(0).animate({
					top:'380px',
					left:'380px'
				},2000)
			})
			
			
			// 案例6：点击按钮，控制div移动，距离本元素
			$("button").eq(2).click(function(){
				$("div").eq(0).animate({
					left:'+=380px'
				},2000)
			})