jQuery学习

Posted 2020-08-09 鎃鎃

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就不行，得放到函数里面调用
停止和判断元素是否处于动画：