jQuery中的事件和动画
1 jQuery中的事件
1.1 加载DOM
window.onload = function() 必须等到网页所有内容加载完毕才能执行 不能同时编写多个
等价于$(window).load(function())
$(document).ready(function()) 网页的DOM结构绘制完成之后就可以执行 可以同时编写多个
可以缩写为$(function(){})
1.2 事件绑定
bind(type[, data] , fn )
1.3 合成事件
hover(enter , leave)
toggle(fn1 , fn2 , fn3 …fnN) 模拟鼠标连续单击事件 依次触发,直到最后 ,再轮番调用
toggle() 还可以切换元素的可见状态
1.4 事件冒泡
嵌套的多个元素,如果都绑定了相同的事件,则触发内部的事件也有可能触发嵌外部元素的事
件——这是我理解的事件冒泡。解决方法是先在程序中使用事件对象,很简单只用为函数添加一个
参数event。然后再用调用event.stopPropagation()来停止事件冒泡。(event.preventDefault()用于
阻止元素的默认行为,也可以 return false)
注:事件捕获和事件冒泡是两个相反的过程,jQuery不支持事件捕获,若要使用事件捕获,必
须使用原生JS。
1.5 事件对象的属性
event.type event.preventDefault() event.stopPropagation()
event.pageX/eventPageY event.target evnet.metaKey
(光标相对于页面的x坐标和y坐标) (获取到触发事件的元素)
event.which (获取鼠标单机事件中鼠标的左中右键,键盘事件获取键盘的按键)
1.6 移除事件
unbind([type],fn)
1.7 模拟操作
trgger() — 模拟用户操作,达到效果(例如用户单击按钮,才能触发click事件,trggle( “click” )
用户进入页面之后不用主动单击,就能触发click事件)
trgger()还可以触发自定义事件,还可以传递数据
2 jQuery中的动画
2.1 show()和hide()方法
2.2 fadeIn() fadeOut()方法
淡入 淡出 display
2.3 slideUp() slideDown()
改变元素的高度
2.4 animate()
animate(params, speed, callback)
params: 包含样式属性及值的映射 比如{property1: “value1”, property2: “value2”}
callback: 动画完成时执行的函数 可选~
animate() 还可以用于判断元素是否处于运动状态 if ( !$(element).is(“animated”)){}
2.5 delay()
延迟动画~~~~
2.6 其他的动画
toggle( speed , [ callback ] )
slideToggle( speed, [ easing ], [ callback ] ) 通过高度变化来切换匹配元素的可见性
fadeTo( speed, opacity, [ callback ] ) 把元素的不透明度已渐变的方式调整到制定的值
fadeToggle( speed, [ easing ], [ callback ] ) 通过不透明度变化来切换匹配元素的可见性