jQuery事件切换

听海边涛声

于 2024-09-08 18:41:13 发布

阅读量334

点赞数 3

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/panghuangang/article/details/142030601

版权

事件切换，就是给一个元素绑定多个事件，执行不同的事件，来回切换。

方式一：直接给一个元素依次绑定多个事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <div class="myDiv" style="width: 300px;height: 300px;border: 1px solid black;">鼠标移入变绿色,移出变红色</div>

  <script>
    $('.myDiv').mouseover(() => {
      $('.myDiv').css('background-color', 'green')
    })

    $('.myDiv').mouseleave(() => {
      $('.myDiv').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

鼠标移入：
在这里插入图片描述

鼠标移出：
在这里插入图片描述

方式二：使用链式编程

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <div class="myDiv" style="width: 300px;height: 300px;border: 1px solid black;">鼠标移入变绿色,移出变红色</div>

  <script>
    $('.myDiv').mouseover(() => {
      $('.myDiv').css('background-color', 'green')
    }).mouseleave(() => {
      $('.myDiv').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

鼠标移入：
在这里插入图片描述

鼠标移出：
在这里插入图片描述

方式三：使用切换函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <div class="myDiv" style="width: 300px;height: 300px;border: 1px solid black;">鼠标移入变绿色,移出变红色</div>

  <script>
    $('.myDiv').hover(() => {
      $('.myDiv').css('background-color', 'green')
    }, () => {
      $('.myDiv').css('background-color', 'red')
    })
  </script>
</body>

</html>