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
