事件

在jQuery中事件总体分为两大事件：基础事件和复合事件

基础事件

1. 载入事件

ready();

2. 鼠标事件

通过以上可以看出jQuery事件的方法和javaScript的事件方法名称差不多，几乎就是少了一个on，而mouseover和mouseenter，mouseout和mouseleave看起来功能差不多，那么有什么区别呢？
mouseover是如果鼠标指针在其被选元素的子元素上也会触发事件。而mouseenter只有当鼠标指针在其被选元素自身上才会触发。mouseout和mouseleave同理。

3. 键盘事件

从键盘事件方法中，可以获取到当前按键的键值（keyCode）：在所用的方法中定义一个参数，这个参数就表示当前的事件对象，然后通过这个对象.keyCode
例：

$('input').keydown(function (event) {
		alert(event.keyCode);
})

表示当焦点范围在input标签时按下键盘触发事件并获取按下了哪个键,其它两个事件同理。

4. 浏览器事件

resize(); 浏览器窗口事件,当调整页面窗口时触发，比如调整窗口大小时,这个事件要通过window对象触发

$(window).resize(function () {
		alert(1);
})

5. 焦点事件

focus();//当被选元素获得焦点触发事件
blur();//当被选元素失去焦点触发事件

绑定事件与移除事件

在实际开发当中，有些时候需要对一个元素进行多个不同的事件处理，比如将鼠标移入某一个元素时出现一种特效，而离开时又出现另外一种特效，这时就需要使用绑定事件方法bind(),有绑定事件同样有移除事件方法unbind()。

1. 绑定事件

语法：$("对象").bind(type,[data],fn)
bind()方法有三个参数，其中data参数不是必需的，详细说明可以看下表

例：
绑定单个事件：

$(function(){
	$("button").bind("click",function(){
		alert("为button按钮绑定一个鼠标单击事件");
	})
}

同时绑定多个事件：

$(function(){
	$('[type=text]').bind({'focus':function () {
		$(this).css('background','red');//当文本框获得焦点时把文本框背景颜色改为红色
	},'blur':function(){
		$(this).css('border','blue');//当文本框失去焦点时把文本框的边框去掉
	}
})

2. 移除事件

有些时候需要把一些绑定的事件通过一定的方法取消掉，这个时候就可以使用移除事件unbind()方法。
语法：$(“对象”).unbind([type],[fn])，这两个参数都不是必需的，如果不写参数就表示移除选定对象的所有事件。参数说明：

<input type="text" />
<input type="button" value="移除事件"/>
$(function () {
	$("[type=text]").click(bg1=function () {
		$(this).css("background","red");//表示当点击文本框时改变背景颜色
	})
	$("[type=button]").click(function () {
		$("[type=text]").unbind("click",bg1);//表示当点击按钮时移除掉文本框名为bg1的处理函数的点击事件
	})
})
//或者不写[fn]参数的写法
$(function () {
	$("[type=text]").click(function () {
		$(this).css("background","red");//表示当点击文本框时改变背景颜色
	})
	$("[type=button]").click(function () {
		$("[type=text]").unbind("click");//表示当点击按钮时移除掉文本框的点击事件
	})
})

3. 复合事件

在jQuery中有两个复合事件方法–hover()和toggle()方法，这两个方法与ready()方法类似，都是jQuery自定义的方法
1.hover()方法
在jQuery中，hover()方法用于模拟鼠标指针移入和移出事件。当鼠标指针移至元素上时，会触发指定的第一个函数（enter）；当鼠标指针移出这个元素时，会触发指定的第二个函数（leave），该方法相当于mouseenter和mouseleave事件的组合。
语法：hover(enter,leave)； enter在代码中表示第一个函数，也就是鼠标移入时触发的函数；leave在代码中表示第二个函数，也就是鼠标移除时触发的函数。
例:

		<ul>
			<li>11</li>
			<li>22</li>
		</ul>
		<script>
			$(function () {
				$("ul").hover(function () {
				//表示鼠标移入时li的背景颜色变为红色
					$("li").css("background","red");
				},
				function(){
				//表示鼠标移出时li的背景颜色变为黄色
					$("li").css("background","yellow");
				}
				)
			})
		</script>

2.toggle()方法
在jQuery中，toggle()方法分为带参数和不带参数；带参数的方法用于模拟鼠标连续点击click事件。第一次单击元素，触发指定的第一个函数(fn1);当再次点击同一个元素时，则触发指定的第二个函数(fn2)；如果有更多函数、则依次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
不过此方法在jQuery的1.8版本中被废弃，在版本 1.9版本中被移除。
语法：$(“对象”).toggle(fn1,fn2,…fnN);

<input type="button" value="点我可切换页面背景颜色"/>
//鼠标点击第一次的时候网页背景颜色变红色，第二次变黄色，第三次绿色，循环触发
		<script>
			$(function () {
				$("input").toggle(
					function(){
						$("body").css("background","red");
					},
					function(){
						$("body").css("background","yellow");
					},
					function(){
						$("body").css("background","blue");
					}
				);
			})

如果不带参数时，与show()和hide()方法的作用一样，切换元素的可见状态，如果元素是可见的，则切换为隐藏状态；如果元素是隐藏的，则切换为可见状态。

<input type="button" value="切换可见状态"/>
		<p>11</p>
		<script>
		//点击按钮就切换p标签的可见状态
			$(function () {
				$("[value='切换可见状态']").click(function () {
					$("p").toggle();
				})
			})
		</script>

除了这两个用法还要一个之前提到过的toggleClass()方法，对样式进行切换，实现事件触发时某元素在“添加某个类样式”和“移除某个类样式”之间切换,如果有这个类样式就移除掉，没有就添加。语法：
toggleClass(ClassName);//ClassName是一个已经写好的CSS类样式，放在此处不需要加“.”符号。

动画

jQuery中的动画

控制元素显示与隐藏

前面已经学习了怎样显示(show())和隐藏(hide())，只不过那是最基本的应用，这两个方法完整的语法是这样的
$(“对象”).show([speed],[callback]); speed表示元素从隐藏到完全可见的速度，不写的话默认是‘0’ 以毫秒为单位，或者slow , normal，fast。callback表示显示完毕之后执行的函数。两个参数都是可选的。

		<div>
			<ul>
				1
				<li>1</li>
				<li>2</li>
			</ul>
		</div>
		<script>
			$(function () {
				$("ul").hover(
//第一个方法鼠标移入ul时li标签在1秒内慢慢隐藏起来并把网页背景颜色换成红色
					function () {
						$("li").hide("1000",function () {
							$("body").css("background","red");
						});
					},
//第二个方法鼠标移出ul时li标签在1秒内慢慢显示出来并把网页背景颜色换成蓝色
					function  () {
						$("li").show("1000",function () {
							$("body").css("background","blue");
						});
					}
				)
			})
		</script>

控制元素透明度

控制元素淡入和淡出，这两个方法和显示隐藏方法特别相似，用法都是一样，语法：
淡入：$("对象").fadeIn([speed],[callback]);慢慢控制元素显示出来
淡出：$("对象").fadeOut([speed],[callback]);慢慢控制元素隐藏起来
只不过他们的区别是hide隐藏的效果是从下至上或从右下到左上的慢慢折叠缩小，而fadeOut的淡出效果是整体淡化透明直至消失。同理 show和fadeIn也是这样的区别

控制元素高度

控制元素高度，这两个方法和显示隐藏方法也特别相似，用法都是一样，语法：
从上向下延伸：$("对象").slideUp([speed],[callback]);慢慢控制元素显示出来
从下到上缩短：$("对象").slideDown([speed],[callback]);慢慢控制元素显示出来
只不过他们的区别是hide隐藏的效果是从下至上或从右下到左上的慢慢折叠缩小，而slideUp的实现隐藏效果是必定从下到上缩短的。同理 show和slideDown也是这样的区别

三种动画实现显示隐藏的区别

不难看出三种动画都是为了做到元素显示和隐藏的效果，虽然他们看起来特别相似，但是还是有区别的，在使用时不要搞混淆，show()方法和hide()方法是利用改变css属性display达到的效果；fadeIn()方法和fadeOut()方法是利用改变元素透明度达到的效果；而slideUp()方法和slideDown()方法是利用改变元素的高度达到的效果

自定义动画

在jQuery中，有一种自定义动画，能实现各种比较复杂的动画animate()
语法：
$(“对象”).animate({params},speed,callback);
其中参数说明如下：
params:这个是必须写的，作用是定义形成动画的CSS属性。
speed:可选的，形成效果的时长。
callback:可选的，效果完成后执行的函数。

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义动画</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: solid 1px;
			}
		</style>
	</head>
	<script src="jquery-1.12.4.js"></script>
	<body>
		<input type="button" value="点击盒子变大"/>
		<div></div>
		<script type="text/javascript">
			$("input").click(function(){
				//点击之后盒子高度在1秒之内慢慢变为了300px
  				$("div").animate({height:"300px"},1000);
			});
		</script>
	</body>
</html>

这个动画应用上能做很多有趣的东西，不过代码就比较复杂了，甚至可以做网页游戏。有兴趣的可以多练习研究一下！