Jquery学习笔记(事件和动画)

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])