Web前端开发（八）--事件，节点

最新推荐文章于 2024-03-13 08:15:00 发布

一个非常正经的人

最新推荐文章于 2024-03-13 08:15:00 发布

阅读量492

点赞数

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/qq_34244910/article/details/99988923

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JQuery

一、事件

事件绑定

1.基本绑定事件

格式:$('el').事件类型(function(){});

2.on方法绑定

常用的事件：

click

mouseover

mouseout

mousemove

focus

blur

change

submit 当表单提交时自动触发，绑定给form标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件</title>
	<script type="text/javascript" src="../day07/jquery-1.8.3.min.js">
	</script>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: pink;

			position: absolute;
		}
	</style>
</head>
<body>
	<button>事件绑定</button>
	<div class="box"></div>
	<script type="text/javascript">
		//基本绑定
		$('button').click(function(){
			alert('基本事件绑定');
		})
		
		//on方法绑定
		$('button').on('click',function(){
			alert('on方法绑定');
		})
		
		$('button').on({mouseover:function(){console.log('移入');},mouseout:function(){console.log('移出');}
		});
		
		//解除绑定
		$('button').off();
	</script>
</body>
</html>

应用--鼠标拖动div

事件对象：

当触发某一事件时，调用回调函数的时候，系统会自动传入一个event对象。

event主要记录了键盘和鼠标的信息。

鼠标相对于浏览器窗口的位置：

clientX

clientY

鼠标相对于文档的位置：

pageX

pageY

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件</title>
	<script type="text/javascript" src="../day07/jquery-1.8.3.min.js">
	</script>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: pink;

			position: absolute;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<script type="text/javascript">
	//鼠标拖拽效果--当用户在div中按下，移动，让div跟着鼠标移动
		//思路：
		//1.给div绑定一个鼠标按下事件
		//2.给div绑定一个鼠标移动事件
		//3.获取鼠标的位置
		//4.设置div的位置
		
		$('.box').on('mousedown',function(){
			//鼠标按下后绑定移动事件
			$(window).on('mousemove',function(e){
				//获取鼠标相对于浏览器窗口的位置
				var Sx=e.clientX;
				var Sy=e.clientY;
				//让鼠标在div中间，鼠标当前位置为div宽高的一半
				var newsx=Sx-$('.box').width()/2;
				var newsy=Sy-$('.box').height()/2;
				//设置div的位置
				$('.box').css({left:newsx+'px',top:newsy+'px'});
			})
		})

		$('.box').on('mouseup',function(){
			$(window).off('mousemove');
		})
	</script>
</body>
</html>

加载事件

ready

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>加载事件</title>
	<script type="text/javascript" src="../day07/jquery-1.8.3.min.js">
	</script>
</head>
<body>
	<script type="text/javascript">
		//文档加载完成后自动触发ready事件
		$(document).ready(function(){
			//设置box样式
			$('.box').css({width:'100px',height:'100px',backgroundColor:'pink'});
		})
	</script>
	<div class="box"></div>
</body>
</html>

事件冒泡

当父元素和子元素设置了相同的事件，在触发子元素的事件时，会导致父元素的事件的并发，引起页面的效果混乱。

解决办法：在每一个事件最后，加一个return false;语句

造成这种的情况的原因是默认行为。

例如a标签在没有绑定任何事件时，会跳转，这个就是元素的默认行为。

一般情况下，元素会先执行自定义的事件然后执行默认的行为。

我们在自定义事件的最后添加return false;语句，阻止默认行为的执行。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡</title>
	<script type="text/javascript" src="../day07/jquery-1.8.3.min.js">
	</script>
	<style type="text/css">
		.box1{
			width: 400px;
			height: 400px;
			border: 1px solid blue;
			border-radius: 50%;
		}
		.box2{
			width: 300px;
			height: 300px;
			margin: 50px auto;
			border: 1px solid green;
			border-radius: 50%;
		}
		.box3{
			width: 200px;
			height: 200px;
			margin: 50px auto;
			border: 1px solid yellow;
			border-radius: 50%;
		}
		.box4{
			width: 100px;
			height: 100px;
			margin: 50px auto;
			border: 1px solid red;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2">
			<div class="box3">
				<div class="box4"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$('.box1').click(function(){
			$(this).css('backgroundColor','blue');
			$(this).children().css('backgroundColor','#fff');
			return false;
		})
		$('.box2').click(function(){
			$(this).css('backgroundColor','green');
			$(this).children().css('backgroundColor','#fff');
			$(this).parents().css('backgroundColor','#fff');
			return false;
		})
		$('.box3').click(function(){
			$(this).css('backgroundColor','yellow');
			$(this).children().css('backgroundColor','#fff');
			$(this).parents().css('backgroundColor','#fff');
			return false;
		})
		$('.box4').click(function(){
			$(this).css('backgroundColor','red');
			$(this).parents().css('backgroundColor','#fff');
			return false;
		})
	</script>
</body>
</html>

二、节点操作

创建元素节点

将新元素插入页面中

append()

prepend()

after()

before()

删除元素

empty()

remove()

克隆（复制）

clone()

可以传参数，默认会死false，只克隆单纯的元素；如果参数是true，会将元素的事件一起复制。

注意：如果直接将页面中的元素，插入指定位置，那么会将原来的元素剪切掉。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>节点操作</title>
	<script type="text/javascript" src="../day07/jquery-1.8.3.min.js">
	</script>
	<style type="text/css">
	.wrap{
		width: 500px;
		height: 500px;
		border:1px solid red;
	}
	.box{
		width: 100px;
		height: 100px;
		background-color: red;
		border-radius: 50%;
		float: left;
	}
	</style>
</head>
<body>
	<button>append()</button>
	<button>prepend()</button>
	<button>after()</button>
	<button>before()</button>
	<button>empty()</button>
	<button>remove()</button>
	<button>clone()</button>
	<button>获取页面元素直接插</button>
	<div class="wrap"></div>
	<script type="text/javascript">
		// 创建元素
		function createEl(){
			// 创建一个元素
			var el = $('<div class="box"></div>');
			el.css('background','rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')');
			return el;
		}

		// 随机数
		function rand(m,n){
			return Math.floor(Math.random()*(n-m+1))+m;
		}

		//将元素插入到指定元素内部的尾部
		$('button').eq(0).click(function(){
			var el=createEl();
			$('.wrap').append(el);
		});

		//将元素插入到指定元素内部的前面
		$('button').eq(1).click(function(){
			var el=createEl();
			$('.wrap').prepend(el);
		});

		//将元素插入到指定元素外部的后面
		$('button').eq(2).click(function(){
			var el=createEl();
			$('.wrap').after(el);
		});

		//将元素插入到指定元素外部的前面
		$('button').eq(3).click(function(){
			var el=createEl();
			$('.wrap').before(el);
		});	

		//清空指定元素内部的所有子元素
		$('button').eq(4).click(function(){
			$('.wrap').empty();
		});

		//删除指定元素
		$('button').eq(5).click(function(){
			$('.wrap').remove();
		});

		//克隆（复制）
		$('button').eq(6).click(function(){
			var newBtn=$('button:first').clone(true);
			$('.wrap').append(newBtn);
		});

		//获取页面元素直接插（剪切）
		$('button').eq(7).click(function(){
			$('.wrap').append($('button:first'));
		});
	</script>
</body>
</html>

应用--城市联动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市联动</title>
	<script type="text/javascript" src="../day07/jquery-1.8.3.min.js">
	</script>
	<style type="text/css">
		.shi,.xian{
			display: none;
		}
	</style>
</head>
<body>
	<select>
		<option value="0">--请选择省--</option>
	</select><br>
	<select class="shi">
		<option value="0">--请选择市--</option>
	</select><br>
	<select class="xian">
		<option value="0">--请选择县/区--</option>
	</select>
	<script type="text/javascript">
		//定义数据
		//省
		var sheng=['北京市','河南省','黑龙江省'];
		//市
		var shi={
			'北京市':['北京市'],
			'河南省':['郑州市','洛阳市'],
			'黑龙江省':['哈尔滨市']
		}
		//县区
		var xian={
			'北京市':['东城','西城','朝阳'],
			'郑州市':['二七','管城','金水'],
			'洛阳市':['洛龙','老城'],
			'哈尔滨市':['新城']
		}

		//将所有的省写入第一个select
		var str1='<option value="0">--请选择省--</option>'
		for(i in sheng){
			str1+='<option value="'+sheng[i]+'">'+sheng[i]+'</option>';
		}
		$('select').eq(0).html(str1);

		//给第一个select添加change事件,获取当前用户选择的省
		$('select').eq(0).change(function(){
			var res=$(this).val();
			//数组
			var resshi=shi[res];
			var str2='<option value="0">--请选择市--</option>';
			for(i in resshi){
				str2+='<option value="'+resshi[i]+'">'+resshi[i]+'</option>';
			}
			$('select').eq(1).html(str2).show();
			$('select').eq(2).html('<option     ="0">--请选择县/区--</option>');
		})
		//给第二个select添加change事件,获取当前用户选择的市
		$('select').eq(1).change(function(){
			var res=$(this).val();
			//数组
			var resxian=xian[res];
			var str2='<option value="0">--请选择县/区--</option>';
			for(i in resxian){
				str2+='<option value="'+resxian[i]+'">'+resxian[i]+'</option>';
			}
			$('select').eq(2).html(str2).show();
		})
	</script>
</body>
</html>

一个非常正经的人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发（八）--事件，节点

JQuery一、事件事件绑定1.基本绑定事件格式:$('el').事件类型(function(){});2.on方法绑定常用的事件：clickmouseovermouseoutmousemovefocusblurchangesubmit 当表单提交时自动触发，绑定给form标签<!DOCTYPE html><html...
复制链接

扫一扫

专栏目录