jQuery--鼠标事件

最新推荐文章于 2024-07-12 16:27:40 发布

Rubyhh

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量816

点赞数

分类专栏： Java基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Rubyhh/article/details/124080597

版权

Java基础学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.导入jQuery:

在线:

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

本地:

<script src = 'lib\jquery-3.4.1.js'></script>

2 使用

2.1 公式1:

$(selector).action();

例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--    <script src = 'lib\jquery-3.4.1.js'></script>  //本地-->
</head>
<body>

<a href="" id="test-jquery">点我</a>

<script>
    var id = document.getElementById("test-jquery");

    $('#test-jquery').click(function () {
        alert('hello jquery');
    })

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

2.2 事件

2.2.1 鼠标事件

鼠标事件鼠标移动:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #move{
            height: 500px;
            width: 500px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="move">
    点进我试试
</div>

<script>
    $(function () {
        $('#move').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y: '+ e.pageY);
        })
    })

</script>

</body>
</html>

Rubyhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery--鼠标事件

1.导入jQuery:在线: <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>本地:<script src = 'lib\jquery-3.4.1.js'></script> 2 使用2.1 公式1:$(selector).action();例1:<!DOCTYPE html><html lang="en">&lt
复制链接

扫一扫