jQuery中的事件与动画

1.jQuery中的事件

基础事件

在JavaScript中，常用的基础事件有鼠标事件、键盘事件、window事件、表单事件。事件绑定和处理函数的语法格式如下

事件名=函数名() 或 DOM对象.事件名=函数；

1. 载入事件
   载入事件就是window事件的一种，window事件表示当用户执行某些会影响浏览器的操作时，而触发的事件。载入时间的方法为ready()。
2. 鼠标事件
   鼠标事件就是当用户在文档上移动或单击时而产生的事件。
   常用的鼠标事件

方法	执行时机
click()	鼠标单击时
mouseover()	鼠标指针移过时
mouseout()	鼠标指针移除时
mouseenter()	鼠标指针进入时
mouseleave()	鼠标指针离开时

3. 键盘事件
   键盘事件就是当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键时都会产生的事件。
   常用的键盘事件

方法	执行时机
keydown()	按下按键时
keyup()	释放按键时
keypress()	产生可打印的字符时

绑定事件和移除事件

1. 绑定事件

bind(type,[data],fn);

bind()方法的参数说明

参数类型	描述
type	事件类型，主要包括基础事件，还可以是自定义事件
[data]	作为even.data属性值传递给事件对象的额外数据对象，该参数不是必须的
fn	用来绑定处理函数

//绑定单个事件
$("p").bind(
	"mouseover" : function(){
		$("p").css("color","red");
	}
);
//绑定多个事件
$("p").bind({
	"mouseover" : function(){
		$("p").css("color","red");
	},
	"mouseout" : function(){
		$("p").css("color","black");
	} 
});

2. 移除事件

unbind([type],fn);

unbind()方法的参数说明

参数类型	描述
[type]	事件类型，主要包括基础事件，还可以是自定义事件
fn	用来解除绑定的处理函数

复合事件

1. hover()
   在jQuery中hover()用于模拟鼠标指针移入和移出事件。

$("a").hover(
	//鼠标移入触发
	function(){
		$("a").css("color","red");
	},
	//鼠标移出触发
	function(){
		$("a").css("color","black");
	}
);

2. toggle()
   在jQuery中toggle分为带参数和不带参数的方法；带参表示鼠标连续click事件。不带参时与show()和hide()方法的作用一样，切换元素的可见状态。

//toggle带参
$("a").toggle(
	//第一次点击触发
	function(){
		$("a").show();
	},
	//第二次点击触发
	function(){
		$("a").css("color","red");
	},
	//第三次点击触发
	function(){
		$("a").hide();
	}
);
//toggle不带参
$("a").toggle();

2.jQuery中的动画

控制元素显示与隐藏

1. 控制元素显示

$(selector).show([speed],[callback]);

show()的参数说明

参数	描述
speed	可选，绑定元素从隐藏到完全可见的速度，默认为0.
callback	可选，show函数执行完后，要执行的函数

2. 控制元素隐藏

$(selector).hide([speed],[callback]);

hide()参数设置方式与show()相同，大多数情况下，hide()和show()方法在一起使用。

改变元素透明度

1. 控制元素淡入

$(selector).fadeIn([speed],[callback]);

fadeIn()的参数说明

参数	描述
speed	可选，绑定元素从隐藏到完全可见的速度，默认为0.
callback	可选，fadeIn函数执行完后，要执行的函数。除非设置了speed参数，否则不能设置该参数

2. 控制元素淡出

$(selector).fadeOut([speed],[callback]);

参数设置方法与fadeIn相同。

改变元素高度

$(selector).slideUp([speed],[callback]);  //元素从下到上缩短直至隐藏
$(selector).slideDown([speed],[callback]);  //元素从上到下延伸显示

与fadeIn和fadeOut方法中的参数一样。

自定义动画

$(selector).animate({params},speed,callback);

与show()和hide()中的参数用法一样。
params:：必须，定义形成动画的CSS属性。
speed：可选，规定效果时常，取值：毫秒，fast，slow。
callback：可选，滑动完成后执行的函数名称。