The Write Less,Do More——jQuery中
目录
The Write Less,Do More——jQuery中 1
一、事件编程
jQuery对象.click(事件的处理程序);
jQuery对象.blur(事件的处理程序);
1、事件监听
l bind(type,[data],fn) ：为对象绑定事件监听程序
参数说明：
type：事件类型，不带’on’前缀，如click，mouseover
[data]：可选参数，事件发生时所传递的数据（了解）
fn：事件处理程序
l bind({type:fn,type:fn}) ：为对象绑定多个事件监听程序，要求参数为json对象
参数说明:
{
事件类型:事件的处理程序,事件类型:事件的处理程序
}
l one(type,[data],fn) ：为对象绑定事件且该事件只触发一次
l unbind([type]) ：事件移除
参数说明：
[type]：可选参数，要移除的事件类型，如果为空，则移除当前对象的所有事件
IE:attchEvent 触发顺序：先定义后触发
W3C:addEventListener 触发顺序：先定义先触发
demo01_bind.html
通过运行以上程序可知，在jQuery中，事件监听程序bind方法是对以前我们学习过的监听方式进行了封装并解决了兼容性问题，并更改事件的触发顺序为正序触发（先定义先触发）
说明：我们可以通过bind方法为对象绑定多个事件处理程序，要求参数是一个json对象且在jQuery的事件监听中，jQuery调整了所有内部的this指向，使其内部this指向当前要操作的dom对象。
one绑定只能触发一次
unbind方法主要用于移除事件，其不需要指定事件处理程序的名称，只需要指定事件类型即可，不写默认移除所有事件。
2、事件冒泡
什么是事件冒泡
之所以称之为冒泡，是因为事件会按照dom层次结构向水泡一样上升至最顶端
原生解决方案：
IE:
window.event.cancelBubble = true;
W3C:
function(event) {
event.stopPropagation();
}
demo02_bubble.html
3、默认行为
所谓的默认行为，就是元素在生产过程中，默认拥有的行为，如超级链接具有跳转功能，submit按钮具有表单提交功能等等。
IE：
window.event.returnValue = false;
W3C：
event.preventDefault();
demo03_default.html
说明：在jQuery中，无论是事件冒泡还是默认行为，我们的jQuery都帮我们解决了兼容性的问题，实际上是对W3C的方法进行了再次封装，我们所使用stopPropagation()以及preventDefault()已经不再是我们以前所使用的方法了。
二、jQuery中的动画
l 基本
l 滑动
l 淡入淡出
1、基本效果
l show() ：显示
l show(speed,[callback]) ：以动画的效果显示
参数：
speed：动画持续的时间（默认的单位：毫秒）
[callback] ：可选参数，动画完成时所触发的回调函数
l hide() ：隐藏
l hide(speed,[callback]) ：以动画的效果隐藏
参数：
speed：动画持续的时间（默认的单位：毫秒）
[callback] ：可选参数，动画完成时所触发的回调函数
l toggle() ：切换显示与隐藏，如显示则隐藏，反之则显示
l toggle(switch) ：显示或隐藏 switch：true显示 switch：false隐藏
l toggle(speed,[callback]) ：以动画效果显示与隐藏
参数：
speed：动画持续的时间（默认的单位：毫秒）
[callback] ：可选参数，动画完成时所触发的回调函数
l speed:"slow", "normal", "fast" ： slow：缓慢 normal：正常 fast：快速
demo04_sh.html
2、滑动效果
l slideDown(speed,[callback]) ：以动画效果下拉显示
l slideUp(speed,[callback]) ：以动画效果上拉显示
l slideToggle(speed,[callback]) ：切换向上与向下效果
参数说明：
speed：动画持续事件
[callback]：可选参数，动画完成时所触发的回调函数
demo05_slide.html
案例1：下拉菜单
效果如下：
3、淡入淡出效果
l fadeIn(speed,[callback]) ：以动画效果淡入
l fadeOut(speed,[callback]) ：以动画效果淡出
参数说明：
speed：动画持续时间
[callback]：动画完成时所触发的回调函数
l fadeTo(speed,opacity,[callback]) ：以动画效果设置元素透明度
参数说明：
speed：动画持续事件
opacity：从0（全透明）到1（不透明），（PS软件0-100%）
[callback]：动画完成时所触发的回调函数
demo06_inout.html
4、自定义动画效果
animate(params,[speed],[easing],[fn])
参数说明
params：要求是一个json对象
speed：动画的持续时间
easing：动画效果
fn：动画完成时所触发的回调函数
anli02.html
运行效果：
案例3：一组图片的淡入淡出效果
运行效果：
案例4：折叠菜单
anli04.html
运行效果：
