jQuery 复习

自由如风｀

于 2022-03-16 20:38:20 发布

阅读量429

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_55053682/article/details/123535259

版权

jQuery 鼠标坐标 mousemove事件 DOM操作 JavaScript

关键词由CSDN通过智能技术生成

jQuery 在js基础上进行开发

1》模板为： selector( ). operator( )

/*
* jQuery 公式 :       $selector().action()
*
* $: 代表jquery
* selector():选择器
* action():行为
* */

operator( ) 中可以嵌套function（）

2》以jQuery 为基础写出的鼠标移动求坐标值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>action</title>
    <script src="../lib/jquery-3.6.0.js"></script>
    <style>
        #MouseMove{
            width: 500px;
            height: 500px;
            border: 1px solid hotpink;
            background-color: #D9AFD9;
            background-image: linear-gradient(296deg, #D9AFD9 0%, #97D9E1 100%);
        }
    </style>
</head>
<body>
<p>
    mouse location: <span id="out"></span>
</p>
<div id="MouseMove">
鼠标在这里移动试试
</div>

<script>
    $(document).ready(
        function (){
            $('#MouseMove').mousemove(
                function (e){
                    $('#out').text('x坐标是:'+e.pageX+'y坐标是:'+e.pageY)
                }
            )
        }
    )
</script>
</body>
</html>