jquery随笔--常用事件

最新推荐文章于 2022-04-07 18:54:01 发布

原创最新推荐文章于 2022-04-07 18:54:01 发布 · 501 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #事件

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文演示了如何使用jQuery库绑定并响应HTML元素的多种事件类型，包括点击、双击、聚焦、失去焦点、鼠标悬停等，并通过示例代码进行详细说明。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//将函数绑定到文档的就绪事件（当文档完成加载时）
$(document).ready(function(){
   //触发或将函数绑定到被选元素的点击事件
   $("#p1").click(function(){
       $(this).text("被选元素的点击事件");
   });
   //触发或将函数绑定到被选元素的双击事件
   $("#p2").dblclick(function(){
       $(this).text("被选元素的双击事件");
   });
   //触发或将函数绑定到被选元素的获得焦点事件
   $("input").focus(function(){
        $("input").css("background-color","#FFFFCC");
      });
   //触发或将函数绑定到被选元素的失去焦点事件
      $("input").blur(function(){
        $("input").css("background-color","#D6D6FF");
      });

   //触发或将函数绑定到被选元素的鼠标悬停事件
   $("#p3").mouseover(function(){
       $(this).text("被选元素的鼠标悬停事件");
   });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<form action="">
<p id="p1">click.</p>
<p id="p2">dblclick.</p>
<input type="text" >
<p id="p3">mouseover.</p>
</form>
</body>
</html>