jQuery中的事件与动画

jQuery中的事件与动画

基础事件

常用的基础事件有：

• 鼠标事件
• 键盘事件
• window事件
• 表单事件

//语法
	事件名="函数名()";
//或者
	DOM 对象.事件名=函数;

​ 事件绑定函数处理函数后，可以通过DOM对象.事件名()的方式显示调用处理函数

​ jQuery中的基础事件和JavaScript中是事件一致，提供了特有的事件方法将事件和处理函数绑定

载入事件

​ 载入事件也是window事件的一种，window事件表示当用户执行某些会影响浏览器的操作时，触发的事件

鼠标事件

​ 鼠标事件就是当用户在文档上移动或者单击鼠标时而产生的事件

常用鼠标事件的方法

click（）	触发或将函数绑定到指定元素的click事件	鼠标单击时
mouseover（）	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout（）	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter（）	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave（）	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

mouseenter（）和mouseover（）用法一样，都是鼠标指针移至页面元素上时触发事件

这两个方法的区别：

mouseover（）	mouseenter（）
鼠标指针进入被选元素时会触发mouseover事件，如果鼠标指针在其被选元素的子元素上来回进入时也会触发mouseover事件	鼠标指正进入被选元素时会触发mouseenter事件，如果鼠标指针在其被选元素的子元素上来回进入则不会触发mouseenter事件

mouseout（）和mouseleave（）用法基本一样，都是鼠标指针离开页面元素上时触发的事件

这两个方法的区别：

mouseout（）	mouseleave（）
鼠标指针离开被选元素时会触发mouseout事件，如果鼠标指针在其被选元素的子元素上来回离开也会触发mouseout事件	鼠标指针离开被选元素时会触发mouseleave事件，如果鼠标指针在其被选元素的子元素上来回离开则不会触发mouseleave事件

键盘事件

keydown()	触发或将函数绑定到指定元素的keydown事件	按下按键时
keyup()	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress()	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

浏览器事件

浏览网页时，经常会调整浏览器窗口的大小，在调整窗口大小时，页面会有一些变化，这些就是通过jQuery中的resize()方法触发resize事件，进行处理相关函数，来完成页面的一些特效

//语法
	$(selector).resize();

绑定事件与移除事件

绑定事件

jQuery中，如果需要为匹配的元素同时绑定一个或多个事件，则可以使用bind（）方法

//语法
	bind(type,[data],fn);

bind()方法的三个参数

type	事件类型	主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
[data]	可选参数	作为event.data属性值传递给事件对象的额外数据对象，该参数不是必需的
fn	处理函数	用来绑定处理函数

1.绑定单个事件

$(document).ready(function(){
	$(".on").bind("mouseover",function(){
		$(".topDown").show();
	})
})

2.同时绑定多个事件

$(document).ready(function(){
    //bind两个事件
    $(".top-m .on").bind({
        mouseover:function(){
            $(".topDown").show();
        },
        mouseout:function(){
            $(".topDown").hide();
        }
    });
});

移除事件

有时候事件执行完了，需要把绑定的事件通过一定办法取消，在jQuery中，提供了移除事件的方法，在绑定事件时，可以为匹配元素绑定一个或多个事件，那么同样可以为匹配的元素移除单个或多个事件，可以使用unbind（）方法

//语法
	unbind([type],[fn])

unbind（）方法有两个参数，这两个参数不是必需的，当unbind（）不带参数时，表示移除索绑定的全部事件

[type]	事件类型	主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
[fn]	处理函数	用来解除绑定的处理函数

符合事件

jQuery中有两个复合事件方法——hover（）和toggle（）方法，这两个方法与ready（）类似，都是jQuery自定义方法

1.hover（）方法

在jQuery中，hover（）方法用于模拟鼠标指针移入和移出事件。当鼠标指针移至元素上时，会触发指定的第一个函数（enter）;当鼠标指针移出这个元时，会触发指定的第二个函数（leave），该方法相当于mouseenter和mouseleave事件的组合

//语法
	hover(enter,leave);
//假如一个当当图书网页中的导航栏的“我的当当”二级菜单的显示和隐藏
	$(document).ready(function(){
        $(".top-m .on").hover(function(){
            $(".topDown").show();
        },
            function(){
            	$(".topDown").hide();
        	}                 
        )
    })

2.toggle（）方法

jQuery中，toggle（）分为带参数的方法和不带参数的方法，带参数的方法用于模拟鼠标连续click事件，第一次单击元素，触发指定的第一个函数（fn1）当再次单击同一个元素时，则触发指定的第二个函数（fn2）；如果有更多的函数，则依次触发，直到最后一个，随后的每次单击都重复对这几个函数轮番调用

带参数的toggle（）方法：

//语法
	toggle(fn1,fn2,...,fnN);
//假如点击页面内容，页面背景按红、绿、蓝循环切换的功能
	$(document).ready(function(){
        $("input").toggle(
        	function(){$("body").css("background","#ff0000")},
            function(){$("body").css("background","#00ff00")},
        	function(){$("body").css("background","#0000ff")}
        )
    })

不带参数的toggle（）方法

toggle（）不带参数时，与show（）和hide（）方法作用一样，切换元素的可见状态，如果元素是可见的，则切换为隐藏状态，反过来也一样

//语法
	toggle();
//假如单击按钮，<p>元素在显示和隐藏之间切换
	$("input").click(function(){
        $("p").toggle();
    })
//toggleClass（）方法
//与jQuery中toggle()方法一样，toggleClass()可以对样式进行切换，实现时间触发时某元素在"加载某个样式"和"移除某个样式"中切换
//语法
	toggleClass(className);
//假如单击按钮，<p>标签中的字体在加载类样式和移除类样式red之间切换
	$("input").click(function(){
        $("p".toggleClass("red");
    })
	

• toggle（fn1，fn2…）实现单击时间的切换，无须额外绑定click事件
• toggle()实现事件触发对象在显示和隐藏状态之间轮换
• toggleClass()实现事件触发对象在加载某个样式和移除某个样式之间转换

jQuery中的动画

控制元素显示与隐藏

1控制元素显示

jQuery中，可以使用show（）方法控制元素的显示，show（）等同于$(selector).css(“display”,“block”)，除了可以控制元素的显示外，它还能定义显示元素时的效果，如显示速度

//语法
	$(selector).show([speed],[callback])

show（）的参数

speed	可选。规定元素从隐藏到完全可见的速度。默认为0，可能值：毫秒(如1000)、slow、normal、fast。在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐改变高度、宽度、外边距、内边距和透明度
callback	可选。show函数执行完之后，要执行的函数

2.控制元素隐藏

jQuery中，与show（）方法对应的是hide（）方法，该方法可以控制元素隐藏。hide（）方法等同于（selector）.css（“display”,“none”），除了可以控制元素的隐藏外，它还能定义隐藏元素时的效果，如隐藏速度

//语法
	$(selector).hide([speed],[callback])

其参数的设置方式与show（）方法相同，绝大多数情况下，hide（）方法与show（）方法总是在一起使用，如选项卡、下拉菜单、提示信息等

改变元素透明度

1.控制元素淡入

jQuery中如果元素是隐藏的，则可以使用fadeIn（）方法控制元素淡入，它与show（）方法相同，可以定义元素淡入时的效果，如显示速度

//语法
	$(selector).fadeIn([speed],[callback])

fadeIn的参数

speed	可选。规定元素从隐藏到完全可见的速度。默认为0，可能值：毫秒(如1000)、slow、normal、fast。在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐改变其透明度，给视觉以淡入的效果
callback	可选。fadeIn函数执行完之后，要执行的函数。除非设置了speed参数，否则不能设置该参数

2.控制元素淡出

jQuery中，与fadeIn（）方法对应的是fadeOut方法，该方法可以控制元素淡出，除了控制元素淡出外，还能定义显示元素时的效果，如淡出速度

//语法
	$(selector).fadeOut([speed],[callback])

改变元素高度

jQuery中，用于改变元素高度的方法是slideUp（）和slideDown（）

//语法
	$(selector).slideUp([speed],[callback])
	$(selector).slideDown([speed],[callback])

和淡入淡出方法中的参数一样。speed为可选参数，callback也是一样

自定义动画

//语法
	$(selector).animate({params},speed,callback)

和show（）、hide（）中的参数用法一样

自定义动画方面animate()参数：

• params：必须，定义形成动画的CSS属性
• speed：可选，规定效果时长，取值：毫秒、fast、slow
• callback：可选，滑动完成后执行的函数名称

//键值对格式：
	$("键","值").css({"color":"red","属性":"值"});