jQuery04(事件&动画)

一、事件

1、加载Dom两种方式

①window.onload方式:整个网页中所有内容(包括图片)加载完成后，才会执行，且只能编写1个
②jQuery方式：在网页结构绘制完成后执行，可编写多个
③两个都有的情况下：jQuery3.0:window.onload比jQuery先执行;jQuery1.0和2.0：jQuery比window.onload先执行

2、绑定事件两种方式

①元素.on("事件名",function(){})
②元素.事件名(function(){})
代码展示：

$("#btn").on("click",function(){
	//做一系列事情					
    console.info(44944);
	//将点击事件进行移除				
    $("#btn").off("click");//unbind()
	//将按钮禁用
	$("#btn").attr("disabled",true);
})

效果展示：

 3、合成事件/事件切换

①hover():鼠标悬停合成事件
②toggle():鼠标点击合成事件

4、事件传播(事件冒泡)

①:传播:小-->中-->大
②:阻止传播:事件后面加上 return false
代码展示：

$("p").click(function(){
	console.info("p被打了");
})
$("div").click(function(){
	console.info("div被打了");				
    return false;//阻止传播
})				
$("body").click(function(){					
    console.info("body被打了");
})

效果展示：

5、事件坐标

①offsetX:当前元素左上角
②clientX:窗口左上角
③pageX:网页左上角
代码展示：

$("#aa").click(function(e){					
    console.info(e.pageX,e.pageY);//x,y坐标
})

 效果展示：

 6、移除事件

元素.unbind("事件名")
注意：①一般情况下，不会使用unbind,推荐使用变量控制事件
②如果某个元素只允许使用一次事件，则可以使用one()
例如：点击按钮偶数次可以，奇数次则失效
代码展示：

var i=1;
$("#btn").click(function(){
	if(i%2==0){						
        console.info(44944,i);//做一系列事情
	}
    i++;
})

效果展示:

二、动画效果

1、基本

①show(Time):显示
②hide(Time):隐藏
③toggle(Time):切换

2、滑动

①slideUp(Time):动画收缩(向上滑动)-->隐藏
②slideDown(Time):动画展开(向下滑动)-->显示
③slideToggle(Time):动画切换

3、淡入淡出（透明度）

①fadeIn(Time):淡入(透明度减少)
②fadeOut(Time):淡出(透明度增大)
③fadeToggle(Time):切换

4、自定义动画

①元素.animate({属性:属性值},Time)
②缩放:width  height
③移动:top left
④移动(本元素),距离:top="+="
left="-="