事件:
关于事件传播:
传播顺序:小–>中–>大
如何组织传播:在事件后面加上return false
加载DOM的两种方法:
window.onload方法
- 执行时间:整个网页中所有内容(包括图片)加载完成后,才会执行
- 编写个数:1个
jQuery中的"ready(fn)"方法
- 执行时间:网页结构绘制完成后,执行
- 编写个数:多个
在jQuery3.0中:window.onload比ready先执行
在jQuery1.0和2.0中:ready比window.onload先执行
window.onload(function () {})
$(document).ready(function (){})
绑定事件的两种方法:
元素.on(“事件名”,function(){})
元素.事件名(function(){})
合成事件:
hover():鼠标悬停的合成事件
- 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
- 会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件
toggle():鼠标点击的合成事件
- 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
- 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
事件坐标:
offsetX:当前元素左上角
clientX:窗口左上角
pageX:页面左上角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
$("html").mousemove(e=>{
//获得鼠标所在的X轴位置
console.log(e.offsetX,e.clientX,e.pageX)
})
</script>
</body>
</html>
效果如下(获得鼠标所在的X轴位置):
移除事件:
元素.unbind(“事件名”)
- 一般情况下,不会使用unbind,推荐使用变量控制事件
- 如果某个元素只允许使用一次事件,则可以是用one()
动画:
基本:
show(Time):显示
hide(Time):隐藏
toggle(Time):切换
- 切换包括了显示和隐藏,比如第一次点击是隐藏,那么第二次点击就是显示
- 动画效果是长度和宽度都在动
- Time是动画时间(毫秒)
滑动:
slideUp(Time):动画收缩(向上收缩)–>隐藏
slideDown(Time):动画展开(向下滑动)–> 显示
slideToggle(Time):动画切换
- 切换的效果和基本的切换效果是一致的
- 动画效果是只有长度在动,宽度不变
- Time是动画时间(毫秒)
淡入淡出:
fadeIn(Time):淡入(透明度减少)
fadeOut(Time):淡出(透明度增加)
fadeToggle:切换
- 切换的效果和基本的切换效果是一致的
- 动画效果是慢慢消失,长度和宽度都不发生变化
- Time是动画时间(毫秒)
自定义动画:
元素.animate({属性:属性值},Time)
- 缩放:
- width:宽度
- height:长度
- 移动:只针对于使用了绝对布局的元素
- top:向上
- left:向左
- 而且是距离页面左上角的移动
本文到此为止,接下来小编还会写一些关于jQuery内容的博客,如果有喜欢的话,希望可以给予小编三连(点赞、收藏+关注)