jQuery事件与动画

一 事件

1 加载DOM事件

$(document).ready():执行时机:DOM元素准备就绪
　　　　　　　　　　  执行次数:多次
　　　　　　　　　　  简单写法:原:$(document).ready(function(){})
                                    简1:$().ready(function(){})
                                    简2:$(function(){})
window.onload(): 执行时机:页面所有元素准备就绪
　　　　　　　　　执行次数:1次
　　　　　　　　　　　简写:无

2 事件绑定与移除事件

　　事件绑定:

　　　　　　bind(type,[data],fn):type:事件类型, data:可选择参数,自定义餐宿,fn:绑定的处理函数
　　　　　　one(type,[data],fn):同bind()方法

　　　　　　bind()方法与one()方法区别:bind():无限触发
　　　　　　　　　　　　　　　　one():只触发一次

　　　　　　绑定多个事件类型:
　　　　　　　　　　　　　　bind("type1 type2 ....typeN",function(){})

　　　　　　js事件绑定与jquery事件绑定区别:jQuery事件绑定类型少了on

　　　　　　　　例如:js中鼠标单击事件为:onclick(),jquery中为click()

　　事件移除:

　　　　　　移除按钮上以前注册的事件:unbind([type],[data])
　　　　　　同时移除多个事件:unblind(type1).unbind(type2)......unbind(typeN)

3 合成事件

　　hover(enter,leave):模拟鼠标悬停事件,光标移上出发enter,移开出发leave   用于替代bind("mouseenter")和bind("mouseleave")　　

　　toggle(fn1,fn2,......,fnN):模拟鼠标连续单击事件,切换元素显示状态

4 事件冒泡

　　　　定义:子元素和父元素绑定同样的事件,子元素该事件被触发了,父元素也相应的触发,事件按照特定顺序由里往外响应

　　　　引发的问题及解决方案: 问题:引起预料之外的结果 解决方案:1 事件注册之后return false; 2 event.stopPropagation(); 注:event是由函数中传下来的

　　　　阻止默认行为:preventDefault()

5 事件对象属性

　　　　event.type():获取事件类型
　　　　event.preventDefault():阻止默认事件行为
　　　　event.stopPropagation():阻止事件冒泡
　　　　event.target():获取到触发事件的元素
　　　　event.relatedTarget()
　　　　event.pageX()和event.pageY():获取到光标相对于页面x坐标和y左标
　　　　event.which():鼠标单击事件中,获取到鼠标的左,中,右键
　　　　event.metaKey():键盘事件中获取<ctrl>按键
　　　　event.originaIEvent():指向原始的事件对象

6 事件捕获:从最顶端往下触发
　　　缺陷:并非所有浏览器都支持事件捕获 解决方案:使用原生js

二 动画

1 show()和hide():显示与隐藏
　　　　　1) 无参:<<==>>css("display","none/block/inline")
　　　　　2) 有一个参数(speed):动画速度

2 jQuery Fading():实现元素的淡入淡出效果
　　　　　1)fadeIn():提高元素不透明度,直至隐藏元素显示
　　　　　　　　语法：$(selector).fadeIn([speed],[callback]);
　　　　　　　　　　speed:规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
　　　　　　　　　　callback:函数执行完后的回调函数名称。
　　　　　2)fadeOut():降低元素不透明度,直至可见元素消失
   　　　　　　   语法：$(selector).fadeOut([speed],[callback]);
　　　　　　　　　　speed:规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
　　　　　　　　　　callback:函数执行完后的回调函数名称。

　　　　　3)jQuery fadeToggle():在 fadeIn() 与 fadeOut() 方法之间进行切换
　　　　　　　　　　如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
　　　　　　　　　　如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

　　　　　4)jQuery fadeTo():允许渐变为给定的不透明度（值介于 0 与 1 之间）。
　　　　　　　　语法：$(selector).fadeTo(speed,opacity,[callback]);
　　　　　　　　　　speed:规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
　　　　　　　　　　opacity:数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
　　　　　　　　　　callback: 函数执行完后的回调函数名称。

3 jQuery 滑动方法

　　　　　1)slideUp():向上滑动元素。
　　　　　　　　语法：$(selector).slideUp([speed],[callback]);
　　　　　　　　　　speed:规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
　　　　　　　　　　callback:函数执行完后的回调函数名称。

　　　　　2)slideDown():向下滑动元素
　　　　　　　　语法：$(selector).slideDown([speed],[callback]);
　　　　　　　　　　speed:规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
　　　　　　　　　　callback:函数执行完后的回调函数名称。

　　　　　3)slideToggle():在 slideDown() 与 slideUp() 方法之间进行切换
　　　　　　　　语法：$(selector).slideToggle([speed],[callback]);
　　　　　　　　　　speed:规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
　　　　　　　　　　callback:函数执行完后的回调函数名称。

4 自定义的动画

　　　　animate():创建自定义动画。
　　　　　　　　语法：$(selector).animate(params,[speed],[callback]);
　　　　　　　　　　params:定义形成动画的 CSS 属性。
　　　　　　　　　　speed:规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
　　　　　　　　　　callback:动画完成后所执行的函数名称

　　　　animate()操作多个属性(多重动画)
例

$("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px';});}); 

　　　　animate() - 使用相对值(累加动画,累减动画)
例

$("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'-150px'});});

　　　　animate() - 使用队列功能
例

$("button").click(function(){var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");});

5 动画回调(callback):动画执行完毕后所执行的操作

6 停止动画和动画状态判断

　　　　停止动画:stop():动画或效果完成前进行强制性停止。

　　　　　　　　适用范围:用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

　　　　　　　　语法:$(selector).stop([stopAll],[goToEnd]);
　　　　　　　　　　　　stopAll:是否清除动画队列。默认:false
　　　　　　　　　　　　goToEnd:是否立即完成当前动画。默认: false。

无参例:

$("#stop").click(function(){$("#panel").stop();});

有参数:

$("#stop").click(function(){$("#panel").stop(true);});

　　　　状态判断:is(":animated")

7 动画队列
　　　　1)以链式方式添加动画时,动画阿布顺序执行
　　　　2)默认情况:动画同时发生,当以回调形式应用动画时,动画按回调顺序发生

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　====完

web技术教程:http://www.w3school.com.cn/index.html