jQuery_04 设置事件与动画

1.事件

1.1 加载Dom两种方式

1. window.onload方式
   执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
   编写个数：1个
2. jQuery方式
   执行时间：网页结构绘制完成后，执行
   编写个数：多个
3. 两个都有的情况下执行顺序【面试题】
   jQuery3.0：window.onload比jQuery先执行
   jQuery1.0和2.0：jQuery比window.onload先执行

1.2 绑定事件

1. 元素.on(“事件名”,function(){})
2. 元素.事件名(function(){})
3. 元素.bind(“事件名”,function(){})

案例：演示事件(鼠标悬停和点击)的三种方式

	//			1.通过三种方式给div添加鼠标点击事件.
		$("#da").click(function(){
			alert("div被点击了！")
		})
	    $("#da").on("click",function(){alert("div被点击了！")})
		$("#da").bind("click",function(){alert("div被点击了！")})

1.3合成事件/事件切换

1. hover()：鼠标悬停合成事件
   鼠标移上去第一个函数
   鼠标移除第二个函数

案例：升级案例2鼠标悬停显示和隐藏

//				1.2给div添加鼠标悬停合成事件:显示和隐藏图片(图片一开始处于隐藏状态).
$("#da").hover(function(){$("#ia").hide()},function(){$("#ia").show()});

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

案例：升级案例2鼠标点击显示和隐藏

//				2.1给div添加鼠标点击合成事件：显示和隐藏图片(图片一开始处于隐藏状态).
$("#da").toggle(function(){$("#ia").hide()},function(){$("#ia").show()});

1.4 事件传播（事件冒泡）

1. 传播：小–>中–>大
2. 阻止传播：事件后面加上 return false

案例：给body div span(在div中) 分别添加点击事件，测试事件传播

		$(function(){
//			1.给span添加鼠标点击事件.
$("#sa").click(function(){
	console.info("span被点击了");
	//			4.点击span，事件传播截止到span.
	return false;
})
//			2.给div添加鼠标点击事件.
$("#da").click(function(){
	console.info("div被点击了");
	//			5.点击span，事件传播截止到div.
	return false;
})
//			3.给body添加鼠标点击事件.
$("body").click(function(){
	console.info("body被点击了");
})

		})

1.5 移除事件：

1. 元素.unbind(“事件名”)

案例：按钮点击一次，不能再次点击

//			1.给按钮添加鼠标点击事件，且只能点击一次。
 $("#sb").click(function(){
	 console.info("鼠标点击！")
//	 $("#sb").unbind("click")
	 $("#sb").off("click")
 })

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

案例：点击按钮偶数次可以，奇数次则失效

方式一：
var i = 1;
$("#sb").click(function(){
	if(i%2==0){
		console.info("鼠标点击！")
	}
	i++;
})
.方式二
$("#sb").toggle(function(){ $("#sb").unbind("click")},function(){console.info("鼠标点击！")})
	

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

案例：按钮只允许点击一次

// 3.给按钮添加鼠标点击事件，且只能点击一次,通过函数one来完成.	
$("#sb").one("click",function(){
	console.info("鼠标点击！")
  })

2. 动画

2.1 基本

1.显示：show(Time)
2. 隐藏:hide(Time)
3. 切换：toggle（Time）

案例：点击按钮，控制div显示和隐藏（基本动画）

//1.给隐藏按钮添加事件：使div在规定的时间内消失。
$("#hide").click(function(){
	$("#da").hide(1000);
})
//2.给显示按钮添加事件：使div在规定的时间内显示。
$("#hide").click(function(){
	$("#da").show(1000);
})
//3.给显示/隐藏按钮添加事件：使div在规定的时间内显示和隐藏。
$("#toggle").toggle(function(){$("#da").hide(1000)},function(){$("#da").show(1000)})
//4.给隐藏按钮添加事件：使div在规定的时间内隐藏，并且显示图片ia。
$("#hide").click(function(){$("#da").hide(1000),$("#ia").show(1000)})

2.2 滑动

1. slideUp(Time)：动画收缩(向上滑动)–>隐藏
2. slideDown(Time)：动画展开(向下滑动)–>显示
3. slideToggle(Time)：动画切换

案例：点击按钮，控制div显示和隐藏（滑动）

//1.给显示按钮添加鼠标点击事件：使div在指定时间内向下显示.
$("#show").click(function(){
	$("#da").slideDown(5000);
})
//2.给隐藏按钮添加鼠标点击事件：使div在指定时间内向下隐藏.
$("#hide").click(function(){
	$("#da").slideUp(5000);
})
//3.给显示/隐藏按钮添加鼠标点击事件：使div在指定时间内向下显示和向下隐藏.	
$("#toggle").toggle(function({$("#da").slideUp(3000)},function({$("#da").slideDown(3000)})

2.3淡入淡出(透明度)

1. fadeIn(Time)：淡入(透明度减少)
2. fadeOut(Time)：淡出(透明度增大)
3. fadeToggle(Time)：切换

案例：点击按钮，控制div显示和隐藏（透明度）

$(function(){
			// 显示(淡入)
			$("#show").click(function(){
				$("#da").fadeIn(1000);
			})
			// 隐藏(淡出)
			$("#hide").click(function(){
				$("#da").fadeOut(1000);
			})
			// 显示/隐藏
$("#toggle").toggle(function(){$("#da").fadeOut(1000)},function(){$("#da").fadeIn(1000)})
		})

2.4 自定义动画

1. 元素.animate({属性：属性值},Time)
   缩放
   width
   height

2. 移动
   top
   left

3. 移动(本元素)，距离
   top= “+=”
   left= “-=”

	$(function(){
				// 放大
				$("#big").click(function(){
					$("#da").animate({
						width:500 +"px",
						height:500 +"px"
					},1000)
				})
				// 缩小
				$("#small").click(function(){
					$("#da").animate({
						width:300+"px",
						height:300+"px"
					},2000)
				})
				// 往右移动
				$("#right").click(function(){
					$("#da").animate({
						left:500+"px",
					},2000)
				})
				// 往左移动
				$("#left").click(function(){
					$("#da").animate({
						left:300+"px",
					},2000)
				})
				// 往下移动
				$("#down").click(function(){
					$("#da").animate({
						top:'+=10',
					},2000)
				})
				// 往上移动
				var i =0;
				$("#up").click(function(){
					$("#da").animate({
						top:'-=20'
					},2000)
				})
				// 斜下右移动
				$("#xxy").click(function(){
					$("#da").animate({
						top:300+"px",
						right:300+"px"
					},2000)
				})
				// 斜上左移动
				$("#xsz").click(function(){
					$("#da").animate({
						top:100+"px",
						left:100+"px"
					},2000)
				})
			});