第三章jQuery中的事件与动画
一. jQuery中的事件
jQuery事件是对javaScript事件的封装。
1.基础事件
在javaScript中，常用的基础事件有鼠标事件、键盘事件、window事件、表单事件。事件的绑定和处理函数的语法格式如下：
语法：时间名=”函数名()”;
或： DOM 对象.事件名=函数
1.载入事件
在jQuery中，常用的window事件有文档载入事件，它对应的方法是ready()。
2.鼠标事件
当用户在文档上移动或单击鼠标而产生的事件。
|
方法 |
描述 |
执行时机 |
|
click() |
触发或将函数绑定到指定元素的click事件 |
鼠标单击时 |
|
mouseover() |
触发或将函数绑定到指定元素的mouseove事件 |
鼠标移到时 |
|
mouseout() |
触发或将函数绑定到指定元素的mouseout事件 |
鼠标移出时 |
|
mouseenter() |
触发或将函数绑定到指定元素的mouseenter事件 |
鼠标进入时 |
|
mouseleave() |
触发或将函数绑定到指定元素的mouseleave事件 |
鼠标离开时 |
3.键盘事件
键盘事件是指当键盘聚焦到Web浏览器时，用户每次按下或释放键盘上的按键时都会产生事件。常用的键盘事件有keydown、keyup、keypress。
|
方法 |
描述 |
执行时机 |
|
Keydown() |
触发或将函数绑定到指定元素的keydown事件 |
按下键盘时 |
|
Keyup() |
触发或将函数绑定到指定元素的keyup事件 |
释放键盘时 |
|
Keypress() |
触发或将函数绑定到指定元素的keypress事件 |
产生可打印的字符时 |
标准：产生可打印的字符时（相当于用户输入字符）
4.浏览器事件
在浏览网页时，大家经常会调整浏览器窗口的大小。这些都是通过jQuery中的resize()方法触发resize事件，进而处理相关的函数，来完成页面的一些特效。
语法： $(selector).resize();
2.绑定与移除事件
1.绑定事件
在jQuery中，如果需要为匹配的元素同时绑定一个或多个事件，则可以使用bind()方法。
语法： bind(type,[data],fn);//这种已经过时，建议使用on
On(type,[data],fn);
|
参数类型 |
参数含义 |
描述 |
|
type |
事件类型 |
主要包扩click、mouseover等基础事件，还可以自定义事件 |
|
[data] |
可选参数 |
作为even.data属性值传递给事件对象的额外数据对象，可选项 |
|
fn |
处理函数 |
用来绑定处理函数 |
2.移除事件
当事件执行完了，需要把绑定的事件通过一定的方法取消。在jQuery中提供了移除事件的方法，同样可以移除单个或多个事件，可以使用unbind()方法。
语法：undind([type],[fn]);
Undind()方法有两个参数，这两个参数不时必须的。当unbind()不带参数时，表示移除所绑定的全部事件。
3.复合事件
在jQuery中有两个复合事件方法-hover()和toggle(),这两个方法与ready()类似，都是jQuery自定义的方法。
1.hover()方法
在jQuery中，hover()方法用于模拟鼠标移入和移出事件。当鼠标移入时，会触发指定的第一个函数（enter）;当鼠标移除这个函数时，会触发指定的第二个函数（leave）,该方法相当于mouseenter和mouseleave事件的组合。
语法：hover(enter,leave);
2.toggle()方法
在jQuery中，toggle()方法分为带参数和不带参数。
- 带参数的方法用于模拟鼠标连续click事件。第一次单击元素，触发指定的第一个函数，再次单击则触发指定的第二个函数，如果有更多函数，则依次触发，直到最后
一个。随后的单击都重复对几个函数的轮番调用。
语法：toggle(fn1,fn2…..fnN);
- toggle()不带参数时，与show()和hide()方法的作用一样，切换元素的可见状态。如果是可见的，则切换为隐藏状态；如果是隐藏的，则切换为可见状态。
语法： toggle();
与jQuery中的toggle()方法一样，toggleClass()可以对样式进行切换，实现事件触发时某元素在“加载某个事件”和“移除某个事件”之间切换。
语法：toggleClass(className);
3.事件冒泡
当一个父元素的子元素有与父元素相同的事件时，那么父元素的事件执行时，子元素的事件也会执行，那么父元素的一次click事件相当于执行了2次。
1.阻止冒泡事件
下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。
那么，click事件会按照DOM的层次结构，像水泡一样不断向上直到顶端，所以称之为事件冒泡。
<body><div><span>我是****</span></div></body>
$("span").bind("click", function(){ alert('span click'); });
$("div").bind("click", function(){ alert('div click'); });
$("body").bind("click", function(){ alert('body click'); });
解决这个问题的办法是：在SPAN执行完click事件后，停止事件冒泡。
$("span").bind("click", function(event){
alert('span click');
event.stopPropagation(); //停止冒泡
});
二. jQuery中的动画
1.控制元素显示与隐藏
1.控制元素的显示
在jQuery中，可以使用show()方法控制元素的显示，除此之外，它还能定义显示时的效果，如显示速度。
语法：$(selector).show([speed],[callback]);
|
参数 |
描述 |
|
speed |
可选项，用于设置显示的速度，取值范围：如1000(毫秒)，slow,normal,fast |
|
Callback |
可选项，show()函数执行完后，要执行的函数 |
2控制元素的隐藏
用法与show()方法类似。
语法：$(selector).hide([speed],[callback]);
2.改变元素透明度
1.控制元素淡入
在jQuery中，如果元素是隐藏的，则可以使用fadeIn()方法控制元素淡入，它与show()方法相同，可以定义淡入时的效果，如显示速度
语法：$(selector).fadeIn([speed],[callback]);
其中callback表示fadeIn()执行完后要执行的函数。
2.控制元素淡出
语法：$(selector).fadeOut([speed],[callback]);
3.改变元素的高度
在jQuery中，用于改变元素高度的方法是slideUp()和slideDown()。若元素中的display属性值为none,当调用slideDown()方法时，这个元素会从上向下延伸显示，而slideUp()方法正好相反，元素下到上缩短直至隐藏。
语法：$(selector).slideUp([speed],[callback]);
$(selector).slideDown([speed],[callback]);
4.自定义动画
在jQuery中，可以创建自定义动画，实现各种比较复杂的动画。
语法：$(selector).animate({params},[speed],[callback]);
params:必选项目，定义形成动画的CSS属性。
speed和callback时可选项。