jQuery动画和事件

最新推荐文章于 2024-06-14 15:02:13 发布

绥彼岸

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量79

点赞数 2

分类专栏：笔记文章标签： jquery javascript html

本文链接：https://blog.csdn.net/qq_62217605/article/details/123619027

版权

笔记专栏收录该内容

50 篇文章 0 订阅

订阅专栏

jQuery动画和事件

事件：
动画：

事件：

关于事件传播：

传播顺序：小–>中–>大

如何组织传播：在事件后面加上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轴位置）：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZrbEmJqC-1647774879460)(C:\Users\zjjt\AppData\Roaming\Typora\typora-user-images\image-20220320184502356.png)]$