jQuery_鼠标事件|学习笔记-阿里云开发者社区

jQuery_鼠标事件|学习笔记

2022-02-17 191

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 快速学习 jQuery_鼠标事件

开发者学堂课程【jQuery 开发教程：jQuery_鼠标事件】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/362/detail/4284

jQuery_鼠标事件

内容介绍：

一、概要

二、讲解事件

一、概要

1、 .click()：点击事件

2、 .dblclick()：双击事件

3、 .hover()：鼠标悬停和离开

4、 .mousedown()：鼠标按下

5、 .mouseenter()：鼠标进入元素

6、 .mouseleave()：鼠标离开元素

7、 .mousemove()：鼠标在元素内移动

8、 .mouseout()：鼠标离开元素（支持事件冒泡）

9、 .mouseover()：鼠标进入元素内（支持事件冒泡）

10、 .mouseup()：鼠标按键被释放

二、讲解事件

1、.click()

创建一个新的工程，创建一个新的 HTML 文件，命名为 click 。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
// 要使用 jQuery 需要先引用，需要将 jQuery 复制粘贴到工程中，然后将其引入。
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
  <p>haha 1</p>
  <p>haha 2</p>
  <p>haha 3</p>
  <p>haha 4</p>
// 现在要先采用原生的js来实现一个效果，就是点击p标签，让它弹出当前p标签里的内容。
<script>
// 先注释
// 声明一个变量p，此时返回的是一个数组
//  var p=document.getElementsByName("p");
// 然后给每个p标签都添加一个点击事件，这个时候就需要采用for循环
//  for(var i=0;i<p.length;i++){
// 因为p是一个数组，所以说我们这里给每一个数组里的元素都添加一个click事件，在js里是onclick。
//    p[i].onclick=function(){
//  alert弹出当前点击对象的this，用this指针，这时候它指向的是当前选中的对象元素。
//      alert(this.innerHTML);
//    }
//  }
// 那么如果此时我们想让jQuery来实现这个效果，应当如何来写呢？
// 书写 jQuery
  $(function(){
// 直接引用 click ，就不需要 for 循环了。
    $("p").click(function(){
// 此时 this 指向的是调用者 p ，html()相当于       innerHTML 。
      alert($(this).html());
    })
  })
</script>
</body>
</html>

使用 jQuery 比使用 css 实现的效果简单很多。

点击元素将会触发。

效果截图：

单击文字将弹出窗口。

图片30.png

2、dblclick()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
  <p>haha 1</p>
  <p>haha 2</p>
  <p>haha 3</p>
  <p>haha 4</p>
<script>
  $(function(){
    $("p").dblclick(function(){
      alert($(this).html());
    })
  })
</script>
</body>
</html>

单击不行，需要快速双击元素才能触发。

效果截图：

图片31.png

3、hover()

.hover() 相当于 css 中的 hover ，把鼠标悬停在一个元素上会出现一个效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-2.2.1.min.js"></script>
<style>
// 为了方便观察给 p 标签一个样式
p{
width:300px;
beckground-color:aquamarine;
}
</style>
</head>
<body>
  <p>haha 1</p>
  <p>haha 2</p>
  <p>haha 3</p>
  <p>haha 4</p>
<script>
  $(function(){
    $("p").hover(function(){
      alert($(this).html());
    })
  })
</script>
</body>
</html>

把鼠标悬停在元素上时，会自动触发。

效果截图：

鼠标悬停在 haha 1 上弹出窗口。

图片32.png

4、mousedown()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-2.2.1.min.js"></script>
<style>
p{
width:300px;
beckground-color:aquamarine;
}
</style>
</head>
<body>
  <p>haha 1</p>
  <p>haha 2</p>
  <p>haha 3</p>
  <p>haha 4</p>
<script>
  $(function(){
    $("p").mousedown(function(){
      alert($(this).html());
    })
  })
</script>
</body>
</html>

鼠标在元素上按下时会触发。

效果截图：

鼠标在 haha 3 上按下会触发弹出窗口。

图片33.png

5、mouseenter()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-2.2.1.min.js"></script>
<style>
p{
width:300px;
beckground-color:aquamarine;
}
</style>
</head>
<body>
  <p>haha 1</p>
  <p>haha 2</p>
  <p>haha 3</p>
  <p>haha 4</p>
<script>
  $(function(){
    $("p").mouseenter(function(){
      alert($(this).html());
    })
  })

当鼠标移动到元素上时就会被触发。

效果截图：

图片34.png

6、mouseleave()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-2.2.1.min.js"></script>
<style>
p{
width:300px;
beckground-color:aquamarine;
}
</style>
</head>
<body>
  <p>haha 1</p>
  <p>haha 2</p>
  <p>haha 3</p>
  <p>haha 4</p>
<script>
  $(function(){
    $("p").mouseleave(function(){
      alert($(this).html());
    })
  })

鼠标离开元素时才会被触发，与进入是一对。

效果截图：

图片35.png

7、mousemove()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-2.2.1.min.js"></script>
<style>
p{
width:300px;
beckground-color:aquamarine;
}
</style>
</head>
<body>
  <p>haha 1</p>
  <p>haha 2</p>
  <p>haha 3</p>
  <p>haha 4</p>
<script>
  $(function(){
var i=0;
    $("p").mousemove(function(){
      console.log(i++);
    })
  })

鼠标在元素内移动时会触发。

效果截图：

打开后台 console ，然后在4这里移动，可以看到这边它是不断的在增加的，就是说事件在触发，这就是.mousemove() 。

图片36.png

8、.mouseout() .mouseover()

*冒泡事件：事件按照从规定事件目标到最不特定的事件目标的顺序触发，从事件目标开始往上冒泡，直到页面的最上一级标签。

*捕获事件：与冒泡事件相反，从最上一级标签开始往下查找，直到捕获到目标事件。

9、mouseup()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-2.2.1.min.js"></script>
<style>
p{
width:300px;
beckground-color:aquamarine;
}
</style>
</head>
<body>
  <p>haha 1</p>
  <p>haha 2</p>
  <p>haha 3</p>
  <p>haha 4</p>
<script>
  $(function(){
    $("p").mouseup(function(){
      alert($(this).html());
    })
  })