jQuery第二天笔记01——jq事件对象

最新推荐文章于 2022-07-27 23:17:23 发布

·青红造了个白·

最新推荐文章于 2022-07-27 23:17:23 发布

阅读量66

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119730447

版权

这篇博客详细介绍了jQuery中的事件对象，包括如何获取和使用它来增强事件处理功能。内容涵盖了事件对象的基本概念，以及如何通过事件对象获取事件信息，如目标元素、事件类型等。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            img{
                position: fixed;
            }
            img:nth-of-type(1){
                transition: all 0.8s;
            }
        </style>
    </head>
    <body>
        <img src="01.jpg" class="ran" width="100px" alt="">
        <img src="02.jpg" class="move" width="100px" alt="">
        <script src="js/jquery.min.js"></script>
        <script>
            // document是一个原生的对象
            // $(document).mousemove(function(e){
            //     // 窗口的宽度
            //     console.log($(window).width());
            //     // 窗口的高度
            //     console.log($(window).height());
            //     // e是一个事件对象

            //     // client距离窗口原点的坐标
            //     console.log('client'+e.clientY);
            //     // screen距离显示屏的坐标
            //     // console.log('screen'+e.screenX);
            //     // pageX距离页面的坐标
            //     console.log('page'+e.pageY);
            // })

            setInterval(function(){
                // 获取标签的宽度  获取标签.width()
                var x=Math.random()*($(window).width()-$('.ran').width());
                var y=Math.random()*($(window).height()-$('.ran').height());
                $('.ran').animate({left:x+'px',top:y+'px'})
            },1000)

            $(document).mousemove(function(e){
                // e是一个形参，事件对象，在事件中内置的
                var x=e.clientX - $('img').eq(0).width()/2;
                var y=e.clientY - $('img').eq(0).height()/2;
                $('.move').css('left',x+'px');
                $('.move').css('top',y+'px');

            })

        </script>
    </body>
</html>

$(window).width()	窗口的宽度
$(window).height()	窗口的高度
clientX	client距离窗口原点的X坐标
clientY	client距离窗口原点的Y坐标
pageX	距离页面的X坐标
pageY	距离页面的Y坐标