jQuery学习（4）—— 事件

最新推荐文章于 2022-10-03 13:22:44 发布

Yacht13

最新推荐文章于 2022-10-03 13:22:44 发布

阅读量228

点赞数

分类专栏： HTML、CSS、JavaScript、jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/Archer__13/article/details/124850222

版权

HTML、CSS、JavaScript、jQuery 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

一. click

绑定和触发单击事件

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$("h1").click(function(){
				alert("绑定单击事件");      //绑定单击事件
			}); 
			
			$("button").click(function(){
				$("h1").click();        //触发单击事件
			});
		});
  </script>
</head>
<body>
	<h1>标题</h1> </br>
	<button>按钮</button>
</body>
</html>

二. mouseover()和mouseout()

mouseover()是鼠标移入事件，mouseout()鼠标移出事件

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$("p").mouseover(function(){
				alert("鼠标移入");     
			}); 
			
			$("p").mouseout(function(){
				alert("鼠标移出");     
			});
		});
  </script>
</head>
<body>
	<p>标题</p>
</body>
</html>

三. bind()

可以给元素一次性绑定一个或多个事件

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$("p").bind("click mouseover mouseout",function(){
				alert("事件");     
			}); 
		});
  </script>
</head>
<body>
	<p>标题</p>
</body>
</html>

四. one()

和bind()一样可以给元素一次性绑定一个或多个事件，但是只执行一次

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$("p").one("click mouseover mouseout",function(){
				alert("事件");     
			}); 
		});
  </script>
</head>
<body>
	<p>标题</p>
</body>
</html>

五. unbind()

解除绑定

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$("p").bind("click mouseover mouseout",function(){
				alert("事件");     
			}); 
			
			$("p").unbind("mouseover")   //mouseover事件被解除; 
		});
  </script>
</head>
<body>
	<p>标题</p>
</body>
</html>

Yacht13

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习（4）—— 事件

一. click绑定和触发单击事件<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!--引入jquery
复制链接

扫一扫