jQuery学习(四)
jQuery中的事件和动画
JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。
1.jQuery中的事件
1.1 加载DOM
在常规js代码中,通常使用window.onload
在jQuery中,使用$(document).ready()
两者区别:window.onload是在网页中所有元素完全加载到浏览器后才执行;而
$(document).ready()注册的事件处理程序,在DOM完全就绪时可以被调用。显然把网页
解析为DOM树的速度比把页面中所有关联文件加载完的速度快很多。
jQuery代码:
$(window).load(function(){
})
等价于
window.onload=function(){
}
JavaScript的onload事件一次只能保存对一个函数的引用,它会自动用后面的函数覆盖
前面的函数;而jQuery的$(document).ready()在每次调用时都会在现有行为上追加新
的行为,这些行为函数会根据注册的顺序执行。
1.2 事件绑定
bind(type,data,fn),参数1是事件类型,参数2是可选参数,参数3是用来绑定的处理函
数。
1.3 合成事件
hover(enter,leave)
toggle(fn1,fn2,...,fnN)用于模拟鼠标连续单击事件
1.4 事件冒泡
页面上可以有多个事件,也可以多个元素响应同一个事件。
2.动画
2.1 show()和hide()
2.2 fadeIn()和fadeOut()
2.3 slideUp()和slideDown()
2.4 animate(params,speed,callback)
fadeIn()和fadeOut(),slideUp()和slideDown()这些方法无法满足用户的各种需求,
用animate()能解决些问题。
+=累加动画;-=累减动画
多重动画:同时执行多个动画,顺序执行多个动画。
综合动画:就是把几种动画组合起来;
动画回调函数:比如最后一步改变元素样式,直接用css就不行,得放到函数里面调用
停止和判断元素是否处于动画: