【第三章】jQuery的事件与动画

书接上回：上一章我们讲了jQuery的筛选和文档处理，今天我们来了解了解jQuery中的事件与动画效果。

question：什么是事件呢？

answer：jQuery是为事件处理特别设计的。页面对不同访问者的响应叫事件。

事件处理程序：指的是当HTML中发生某些事件是所调用的方法。

一、事件
    1.1、加载Dom两种方式:
        window.onload方式
            执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
            编写个数：1个
        jQuery方式
            执行时间：网页结构绘制完成后，执行
            编写个数：多个
        两个都有的情况下执行顺序（版本区别）：         
    jQuery3.0：window.onload比jQuery先执行
            jQuery1.0和2.0：jQuery比window.onload先执行

---

代码区别：使用版本为jquery-1.7.2，故jQuery比window.onload先执行

效果图： 1-1

 

---

   1.2、 绑定事件两种方式
        元素.on("事件名",function(){})
        元素.事件名(function(){}) 代码展示：

$(document).ready(function() {//加载 优化		
	//鼠标点击		 click:点击
	$(".big").on("click",function(){//jQuery中的点击事件 
	    console.info("点击了");
	})
				
	//方式2
	$(".big").click(function(){
		console.info("又点击了");
	})
})

 

---

    1.3、合成事件/事件切换
        hover()：鼠标悬停合成事件（该方法触发mouseenter【移上去】和mouseleave【移除】事件）

正常页面效果图：1-2

 案例：鼠标悬停显示和隐藏（鼠标移上去第一个函数、鼠标移除第二个函数）

    好消息
	
		

		
今天是个好日子
	

隐藏后效果图： 1-3  （显示正常效果图为1-2）

 

        toggle()：鼠标点击合成事件（点击控制元素的显示和隐藏）

//toggle,鼠标点击 显示 和隐藏
	$("h2").toggle(function(){//组合函数
		$(".big").show();//显示
	},function(){
		$(".big").hide();//隐藏
	})

---

    事件传播（事件冒泡）
        传播：小-->中-->大
        阻止传播：事件后面加上  return false

// 事件传播
// 给p标签添加点击事件
$("p").click(function(){
	console.info("p被点了");
	return false;//阻止传播
})

---

    事件坐标
        offsetX：当前元素左上角
        clientX：窗口左上角
        pageX：网页左上角（效果图为如1-3）

$(".big").mousemove(function(event){
    //event:事件
	var x = event.pageX;
	var y = event.pageY;
	$("#xy").text(x+","+y);
})

---

  
    移除事件：
        元素.unbind("事件名")
        案例：按钮点击一次，不能再次点击
        注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
        案例：点击按钮偶数次可以，奇数次则失效

var i = 0;
$("#myBtn").click(function(){
	i++;
	if(i%2==0){
		console.info("试试就试试"+i);
	}else{
		//上面代码执行后 就移除按钮的点击事件
		//$("#myBtn").unbind("click");
	}
})

        注意2：如果某个元素只允许使用一次事件，则可以使用one()
        案例9：按钮只允许点击一次

$("#myBtn").one("click",function(){
	console.info("点了");
})

---

二、动画效果
    基本
        显示：show(Time)
        隐藏:hide(Time)
        切换：toggle（Time）
        案例1：点击按钮，控制div显示和隐藏（基本动画）
    滑动
        slideUp(Time)：动画收缩(向上滑动)-->隐藏
        slideDown(Time)：动画展开(向下滑动)-->显示
        slideToggle(Time)：动画切换
        案例2：点击按钮，控制div显示和隐藏（滑动）

语法：

$(selector).slideUp(speed,callback);//向上滑动

$(selector).slideDown(speed,callback);//向下滑动

speed参数规定隐藏/显示的速度

callback参数是显示或隐藏完成后所执行的函数名称

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

语法：

$(selector).fadeIn(speed,callback);//淡入

$(selector).fadeOut(speed,callback);//淡出

speed参数规定隐藏/显示的速度

callback参数是显示或隐藏完成后所执行的函数名称

        案例3：点击按钮，控制div显示和隐藏（透明度）
    自定义动画
        元素.animate({属性：属性值},Time)
        缩放
            width
            height
        案例4：点击按钮，控制div的宽度和高度变大
        移动
            top
            left
        案例5：点击按钮，控制div移动，距离网页左上角
        移动(本元素)，距离
            top=  "+="
            left= "-="
        案例6：点击按钮，控制div移动，距离本元素 代码展示：

                /* 基本动画 */
				$("#show").click(function(){
					$(".big").show(1000);
				})
				
				$("#hide").click(function(){
					$(".big").hide(1000);
				})
				
				$("#showAndHide").click(function(){
					$(".big").toggle(1000);
				})

				/* 滑动 */
				$("#slideDown").click(function(){
					$(".big").slideDown(1000);
				})
				$("#slideUp").click(function(){
					$(".big").slideUp(1000);
				})
				$("#slideToggle").click(function(){
					$(".big").slideToggle(1000);
				})

				/* 淡入淡出 */
				$("#fadeIn").click(function(){
					$(".big").fadeIn(1000);
				})
				$("#fadeOut").click(function(){
					$(".big").fadeOut(1000);
				})
				$("#fadeToggle").click(function(){
					$(".big").fadeToggle(1000);
				})

				/* 自定义动画 */
				//变大 点击按钮，控制div的宽度和高度变大
				$("#bigBtn").click(function(){
					$(".big").animate({
						width:300,
						height:300
					},1000)
				})
				//变小  
				$("#smallBtn").click(function(){
					$(".big").animate({
						width:200,
						height:200
					},1000)
				})
				
				//移动
                //点击按钮，控制div移动，距离网页左上角
				$("#runBtn").click(function(){
					$(".big").animate({
						left:10,
						top:10
					},1000)
				})
				//点击按钮，控制div移动，距离本元素
				$("#topBtn").click(function(){
					$(".big").animate({
						left:"-=50",
						top:"+=50"
					},1000)
				})

本章分享，到此结束！！！