jQuery基础03

最新推荐文章于 2024-10-04 06:11:34 发布

最爱琴女E

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量339

点赞数

文章标签： jquery js html

本文链接：https://blog.csdn.net/qwq_666/article/details/113726204

版权

事件绑定与解绑

事件绑定的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					jQuery中有两种绑定事件的方式
					1.eventName(fn);
					编码效率略高，部分事件jQuery没有实现，所以不能添加
					
					2.on(eventName,fn);
					编码效率略低，所有js事件都可以添加
					
					注意：
						可以添加多个相同或不同类型的事件，不会覆盖
				 */
				$("button").click(function(){
					alert("hello");
				});
				$("button").click(function(){
					alert("wuhu");
				});
				$("button").mouseleave(function(){
					alert("mouseleave");
				});
				$("button").mouseenter(function(){
					alert("mouseenter");
				});
			   
			  //  $("button").on("click",function(){
			     //   alert("hello 1");
			  //  });
			  //  $("button").on("click",function(){
				 //   alert("hello 2");
			  //  });
			  //  $("button").on("click",function(){
			  //  	   alert("hello 3");
			  //  });
			  //  $("button").on("click",function(){
			  //  	   alert("hello 4");
			  //  });
			  
			});
		</script>
	</head>
	<body>
		<button>我是一个按钮</button>
	</body>
</html>

事件解绑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件解绑</title>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				function test1(){
					alert("hello 1");
				}
				function test2(){
					alert("hello 2");
				}
				$("button").click(test1);
				$("button").click(test2);
				$("button").mouseleave(function(){
					alert("hello mouseleave");
				});
				$("button").mouseenter(function(){
					alert("hello mouseenter");
				});
				
				//off方法如果不传递参数，会移除所有的事件
				//$("button").off();
				
				//off方法如果传递一个参数，会移除所有指定类型的事件
				$("button").off("mouseenter");//这里移除了mouseenter事件
				
				//off方法如果传递两个参数，会移除所有指定类型的指定事件
				$("button").off("click",test1);
			});
		</script>
	</head>
	<body>
		<button>我是一个按钮</button>
	</body>
</html>

事件冒泡和默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件冒泡和默认行为</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background: green;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					1.什么是事件冒泡
					2.如何阻止事件冒泡
					3.什么是默认行为
					4.如何组织默认事件
				 */
				$(".son").click(function(event){
					alert("son");
					//return false;//阻止事件冒泡第一种方式
					event.stopPropagation();//阻止事件冒泡第二种方式
				});
				$(".father").click(function(){
					alert("father");
				});
				
				$("a").click(function(event2){
					alert("弹出注册框");
					//return false;//阻止默认行为第一种方式
					event2.preventDefault();
				});
			});
		</script>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
		<a href="http://www.baidu.com">注册</a>
		<form action="http://www.taobao.com">
			<input type="text"/>
			<input type="submit"/>
		</form>
	</body>
</html>

事件自动触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件自动触发	</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background: green;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				$(".son").click(function(){
					alert("son");
				});
				$(".father").click(function(){
					alert("father");
				});
				//$(".father").trigger("click");
				//$(".father").triggerHandler("click");
				
				/* 
					trigger:如果利用trigger自动触发事件，会触发事件冒泡
					triggerHandler：如果利用triggerHandler自动触发事件，不会触发事件冒泡
				 */
				//$(".son").trigger("click");
				//$(".son").triggerHandler("click");
				
				$("input[type='submit']").click(function(){
					alert("submit");
				});
				/* 
					trigger:如果利用trigger自动触发事件，会触发默认行为
					triggerHandler：如果利用triggerHandler自动触发事件，不会触发默认行为
				 */
				//$("input[type='submit']").trigger("click");
				//$("input[type='submit']").triggerHandler("click");
				
				$("a").click(function(){
					alert("a");
				});
				//$("a").triggerHandler("click");
				$("span").trigger("click");
			});
		</script>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
		<a href="http://www.baidu.com"><span>注册</span></a>
		<form action="http://www.taobao.com">
			<input type="text"/>
			<input type="submit"/>
		</form>
	</body>
</html>

自定义事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义事件</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background: green;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				// $(".son").myClick(function(){
				// 	alert("son");
				// });
				/* 
					想要自定义事件，必须满足两个条件
					1.事件必须是通过on绑定
					2.事件必须通过trigger来触发
				 */
				$(".son").on("myClick",function(){
					alert("son");
				});
				$(".son").trigger("myClick");
			});
		</script>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
		<a href="http://www.baidu.com"><span>注册</span></a>
		<form action="http://www.taobao.com">
			<input type="text"/>
			<input type="submit"/>
		</form>
	</body>
</html>

事件命名空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件命名空间</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background: green;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					想要事件的命名空间有效，必须满足两个条件
					1.事件是通过on来绑定的
					2.通过trigger触发事件
				 */
				$(".son").on("click.zs",function(){
					alert("click1");
				});
				$(".son").on("click.ls",function(){
					alert("click2");
				});
				$(".son").trigger("click.zs");//只触发click.zs
			});
		</script>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
		<a href="http://www.baidu.com"><span>注册</span></a>
		<form action="http://www.taobao.com">
			<input type="text"/>
			<input type="submit"/>
		</form>
	</body>
</html>

事件委托

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件委托</title>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					1.什么是事件委托
						请别人帮忙做事情，然后将做完的结果反馈给我们
					
				 */
				$("button").click(function(){
					$("ul").append("<li>我是新增的li</li>");
				})
				
				/*
					在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，
				jQuery会遍历所有找到的元素，给所有找到的元素添加事件
				 */
				/* $("ul>li").click(function(){
					console.log($(this).html());
				}); */
				
				$("ul").delegate("li","click",function(){
					console.log($(this).html());
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>我是第1个li</li>
			<li>我是第2个li</li>
			<li>我是第3个li</li>
		</ul>
		<button>新增一个li</button>
	</body>
</html>

事件委托登录框练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件委托</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html.body{
				width: 100%;
				height: 100%;
			}
			.mask{
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.5);
				position: fixed;
				top: 0;
				left: 0;
			}
			.login{
				width: 300px;
				height: 400px;
				margin: 100px auto;
				position: relative;
			}
			.login>span{
				width: 50px;
				height: 50px;
				/* background: red; */
				position: absolute;
				top: 0;
				right: 0;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				$("a").click(function(){
					var $mask = $("<div class=\"mask\">\n" +
						"	<div class=\"login\">\n" +
						"		<img src=\"../img/1.jpg\" width=\"300px\" height=\"400px\">\n" +
						"		<span></span>\n" +
						"	</div>\n" +
						"</div>");
					$("body").append($mask);
					$("body").delegate(".login>span","click",function(){
						$mask.remove();
					});
					return false;
				});
			});
		</script>
	</head>
	<body>		
		<a href="http://www.baidu.com">点击登录</a><br>
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
		我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
	</body>
</html>

移入移出事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移入移出事件</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background: blue;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					mouseover/mouseout事件，子元素被移入移出也会触发父元素的事件
				 */
				// $(".father").mouseover(function(){
				// 	console.log("father被移入了");
				// });
				// $(".father").mouseout(function(){
				// 	console.log("father被移出了");
				// });
				
				/* 
					mouseenter/mouseleave事件，子元素被移入移出不会触发父元素事件
					推荐大家使用
				 */
				// $(".father").mouseenter(function(){
				// 	console.log("father被移入了");
				// });
				// $(".father").mouseleave(function(){
				// 	console.log("father被移出了");
				// });
				
				// $(".father").hover(function(){
				// 	console.log("father被移入了");
				// },function(){
				// 	console.log("father被移出了");
				// });
				
				$(".father").hover(function(){
					console.log("father被移入移出了");
				});
			});
		</script>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>