Jquery的事件和动画
Jquery的事件
加载DOM
window.onload 在网页中所有的元素(包括所有关联文件)完全加载到浏览器后才执行,多次使用会被后者覆盖
$(document).ready() 在DOM完全就绪时就可以被调用,多次使用不会覆盖会重复执行,简写$(function(){ })
事件绑定
bind(type, [data], fn)方法来对匹配元素进行特定事件的绑定
事件类型包括: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown,
mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,
change, select, submit, keydown, keypress, keyup, error等
合成事件
Jquery有两个合成事件hover()和toggle()方法
1. hover(enter, leave)方法
用于模拟光标悬停事件,当光标移动到元素上时,会触发指定的第1个函数(enter),移除时会触发指定的第2个函数(leave)
2. toggle(fn1, fn2, ...fnN)
用于模拟鼠标连续单击事件,第一次单击触发fn1, 第二次单击触发fn2,如果有更多函数则依次触发,直到最后循环往复
事件冒泡
元素嵌套的情况下,都被绑定了click事件,事件会按从里到外的顺序响应成为冒泡,会引起一些意料之外的效果
事件对象
在程序中使用事件对象非常简单,只需要为函数添加一个参数
$("element").click(function(event){ //event事件对象
//event.stopPropagation(); //停止事件冒泡
//event.preventDefault(); //阻止默认行为(表单提交,a标签跳转等) return false; 也可以实现此功能
//alert(event.type); //获取事件类型
//event.target; //获取触发事件的元素
})
移除事件
$('#btn').unbind("click"); 如果没传参数则删除所有绑定事件
对于只需要触发一次,就要立即解除绑定的情况,可以使用one()方法
Jquery1.7中新增了on(), off(), delegate(), undelegate()事件绑定
模拟操作
有时,需要通过模拟用户操作来达到单击效果,可以使用trigger()方法来完成模拟操作
$('#btn').trigger('click');
也可以简写成$('#btn').click();
触发自定义事件
其他用法
1. 绑定多个事件类型 可以简化代码
2. 添加事件命名空间,便于管理
3. 相同事件名称,不同命名空间执行方法
Jquery中的动画
show()方法和hide()方法
show()和hide()是jquery方法中最基本的动画方法,作用相当与把元素css的display设置成none等
同时还可以传递参数
$('#element').show('slow')
slow元素将在600毫秒内慢慢显示出来,normal为400毫秒,fast为200毫秒,也可以自己制定一个数字单位为毫秒
fadeIn()方法和fadeOut()方法
与show()方法不同的是,fadeIn()和fadeOut()方法值改变元素的不透明度
slideUp()方法和slideDown()方法
只会改变元素的高度
自定义动画方法animate()
animate(params, speed, callback);
1. params: 一个包含样式属性及值的映射{property1: "value1", property2: "value2"}
2. speed: 速度参数,可选
3. callback: 在动画完成时执行的函数,可选
实现复杂的动画效果可以自行百度
停止动画和判断动画是否处于动画状态
1. 停止元素的动画
stop([clearQueue], [gotoEnd])
clearQueue和gotoEnd都是可选参数,为Boolean值
clearQueue代表是否要清空未执行完的动画队列
gotoEnd代表是否直接将正在执行的动画跳转到末状态
2. 判断元素是否处于动画状态
if(!$(element).is(":animated")) { //判断元素是否处于动画状态
}
3. 延迟动画
可以使用delay()方法
4. 其他动画方法
toggle(speed, [callback])
slideToggle(speed, [easing], [callback])
fadeTo(speed, opacity, [callback])
fadeToggle(speed, [easing], [callback])