jQuery鼠标事件总结

jQuery提供了一系列的鼠标事件，包括click、dbclick、mouseover、mouseout、mousedown、mouseup、mousemove等等。下面对这些鼠标事件进行总结。

click事件

click事件在用户单击页面元素时触发。可以通过以下代码绑定click事件：

$(selector).click(function(){
  //code...
});

例如，以下代码将使id为“btn”的按钮单击弹出一个消息框：

$("#btn").click(function(){
  alert("Hello, world!");
});

mouseover事件

mouseover事件在鼠标移到页面元素时触发。可以通过以下代码绑定mouseover事件：

$(selector).mouseover(function(){
  //code...
});

例如，以下代码将使id为“btn”的按钮鼠标移过来时背景色变为红色：

$("#btn").mouseover(function(){
  $(this).css("background-color", "red");
});

示例1

以下是一个完整的HTML代码文件，演示了如何在鼠标单击按钮时，弹出一个模态框：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery click事件示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js">
  </script>
  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#myModal").modal();
      });
    });
  </script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>jQuery click事件示例</h2>
  <button type="button" class="btn btn-primary" id="btn">点击打开模态框</button>

  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框标题</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框文本部分
        </div>

        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
        </div>

      </div>
    </div>
  </div>

</div>

</body>
</html>

示例2

以下是一个完整的HTML代码文件，演示了如何在鼠标移过来时，让图像逐渐变亮：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery鼠标事件示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
    img{
        transition: filter 0.2s ease;
        filter: brightness(1);
    }
    img:hover{
        filter: brightness(1.2);
    }
    </style>
</head>
<body>
    <h2>jQuery鼠标事件示例</h2>
    <img src="https://picsum.photos/200" alt="图片">
</body>
</html>

上述示例中，我们在图片的hover事件中设置了filter属性，使图像的亮度变为1.2倍，从而达到逐渐变亮的效果。

通过绑定不同的鼠标事件，我们可以实现更加丰富的交互效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery鼠标事件总结 - Python技术站

jQuery鼠标事件总结

jQuery鼠标事件总结

click事件

mouseover事件

示例1

示例2

相关文章