Jquery第二篇
2021-04-19 09:46:19 0 举报AI智能生成
Juqery事件、动画
作者其他创作
大纲/内容
加载DOM区别
传统JS加载DOM
把网页的所有元素都加载到浏览器后才执行
如果使用了多次window.onload()，那么会覆盖前面的。以最后一个为标准
Jquery加载DOM
网页启动的时候就加载【速度比传统的快】
可以多次调用执行
简写成$()
onload()方法补充
由于Jquery在没有把网页全部加载到浏览器中
因此，可能有些图片的高度和宽度在获取时是无效的
提供onload()只有加载完才执行。
合成事件
hover()
简化的是mouseenter和mouseleave()方法
一般地，鼠标移动触发的事件。我们就可以用这个方法。
toggle()
隐藏显示【数据、属性、动画】
鼠标连续点击事件
模拟操作
trigger()
trigger("onclick")
不需要用户点击，就能够直接触发事件
也可以简写成.onclick()
与传统的区别就是没有带函数
也可以模拟操作自定义的事件，把自定义事件的名字给进去就行了。
triggerHandler()
该方法不会执行浏览器默认的行为
Jquery动画
show、hide
通过show()和hide()我们就能够实现显示隐藏
给出参数就可以控制动画的速度
在hide()之前，Jquery内部会把display的属性值记录下来
在调用show()的时候，就会把记录下来的值显示
fadeIn、fadeOut
设置属性的不透明度
slideUp、slideDown
设置属性的高度来实现隐藏显示
以上三种动画都可以使用toggle进行切换
animate
animate()能够一次修改多个属性【实现动的效果】
css()不会加入队列中，而是立即执行【想要加入动画队列，使用animate的回调函数】
停止动画stop()
会停止当前执行的动画，立即执行下一个队列的动画
如果设置参数为true，那么后面的动画队列全部会被清空
判断是否处于动画状态isAnimate()
经常用于判断用户是否处于动画状态
如果不处于动画状态才添加新的动画
延迟动画delay()
事件绑定、移除
bind()
接收事件类型，事件对象【可选】，处理函数
由于Jquery经常会用到事件绑定，我们还可以直接使用事件的方法。省略bind()
unbind()
给出名称就移除单个的
不给出名称就移除匹配所有的
在bind()中可以一次绑定多个事件
添加事件的名称也能够便于我们的管理
事件冒泡
如果元素之间有嵌套关系，并且绑定了相同的事件。那么触发内部元素时，外部元素的事件也会一起触发
如果一个表单有有多个td，那么匹配的td都会绑定事件
停止事件冒泡
通过事件对象.stopPropagation()就可以停止事件冒泡
阻止默认行为
但提交按钮被触发的时候，我们可以使用事件对象.preventDefault()来阻止默认的行为【提交】
return false就能够同时阻止事件冒泡和默认行为
事件对象的属性
事件冒泡
默认行为
事件类型
获取触发事件的元素
鼠标的XY坐标
鼠标左中右键
键盘<crtl>键
0 条评论
下一页
