WEB 9.jQuery

最新推荐文章于 2021-07-02 09:27:53 发布

六1

最新推荐文章于 2021-07-02 09:27:53 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/weixin_44228228/article/details/99999397

版权

jQuery

1. 事件
- 案例：元素的拖拽效果
2. 节点操作
- 案例：城市联动

1. 事件

基本绑定方法
格式：$(‘el’).事件类型()

On方法
常用的事件：
Click
Mouseover
Mouseout
Mousemove

Focus
Blur
Change
Submit 当表单提交时自动触发绑定给form标签

事件对象：
当触发某一个事件时调用回调函数的时候，系统会自动传入一个event对象
Event主要记录了键盘和鼠标的信息
鼠标相对于浏览器窗口的位置
clientX
clientY
鼠标相对于文档的位置
pageX
pageY

案例：元素的拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../day07jquery/jquery-1.8.3.min.js"></script>
	<style>
		*{margin:0;padding:0;}
		.box{
			width:200px;
			height:200px;
			background:pink;
			position: absolute;
		}
	</style>
</head>
<body>
	<button>on方法绑定</button>
	<div class="box"></div>
	<script>
		// 基本绑定
		$('button').click(function(){
			alert('ok');
		})
		// on方法绑定
		// $('button').on('click',function(){
		// 	alert('我是on');
		// })
		// $('button').on({mouseover:function(){console.log('我进来啦')},mouseout:function(){console.log('我出来啦')}})

		// 接除绑定
		$('button').off();

		// 鼠标拖拽效果
			// 当用户在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>

reday加载事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>加载事件</title>
</head>
<body>
	<script type="text/javascript">
		// 当文档加载完成后自动触发ready事件
		$(document).ready(function(){
			// 设置box的样式
			$('.box').css({width:'100px',height:'100px',background:'pink'})
		})
	</script>
	这样虽然在后面才创建的div，但是前面也可以用到，不用再乎位置了
	<div class="box"></div>	
</body>
</body>
</html>

事件冒泡
当父元素和子元素设置了相同的事件，在出发子元素的事件时会导致父元素的事件并发，因其页面效果混乱
解决办法：给事件最后添加return false
默认行为
例如a标签在没有绑定认任何事件时会跳转这个就是元素的默认行为
一般情况下元素会先执行自定义的事件然后执行默认的行为
我们可以在自定事件最后添加return false阻止默认行为的执行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>冒泡</title>
	<script src="../day07jquery/jquery-1.8.3.min.js"></script>
	<style>
		.box1{
			width:500px;
			height:500px;
			border:1px solid red;
			border-radius: 100%;
		}
		.box2{
			width:400px;
			height:400px;
			margin:50px auto;
			border:1px solid red;
			border-radius: 100%;
		}
		.box3{
			width:300px;
			height:300px;
			margin:50px auto;
			border:1px solid red;
			border-radius: 100%;
		}
		.box4{
			width:200px;
			height:200px;
			margin:50px auto;
			border:1px solid red;
			border-radius: 100%;
		}
	</style>
</head>
<body>
	<!-- 点击里面的，外面颜色就全变了冒泡 -->
	<div class="box1">
		<div class="box2">
			<div class="box3">
				<div class="box4"></div>
			</div>
		</div>
	</div>
	<a href="http://www.baidu.com">跳转到百度</a>
	<script>
		$('.box1').click(function(){
			$(this).css('background','blue');
		})
		$('.box2').click(function(){
			$(this).css('background','yellow');
			return false;
		})
		$('.box3').click(function(){
			$(this).css('background','#000');
			return false;
		})
		$('.box4').click(function(){
			$(this).css('background','red');

			return false;
		})

		$('a').click(function(){
			alert('ok');
			// 阻止默认行为
			return false;
		})
	</script>
</body>
</html>

2. 节点操作

创建元素节点
将新元素插入到页面中
Append()
Prepend()
After()
Befor()
删除元素
Empty()
Remove()
克隆(复制)
可以传参数默认是false 只克隆单纯的元素
如果传参为true 会将元素的事件一起复制
Clone()
注意：如果直接将页面中的元素插入指定位置，那么会讲原来的元素剪切掉

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../day07jquery/jquery-1.8.3.min.js"></script>
	<style>
		.wrap{
			width:500px;
			height:500px;
			border:1px solid red;
		}
		.box{
			width:100px;
			height:100px;
			background: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>
		// 将元素插入到指定元素内部的尾部
		$('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);
		})

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

		// 将第一个button复制 并插入到wrap内
		$('button').eq(6).click(function(){
			var newbtn = $('button:first').clone(true);
			$('.wrap').append(newbtn);
		})

		$('button').eq(7).click(function(){
			$('.wrap').append($('button').eq(0));
		})
		// 创建元素
		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;
		}
		
	</script>
</body>
</html>

案例：城市联动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市联动</title>
	<script src="../day07jquery/jquery-1.8.3.min.js"></script>
	<style>
		.shi,.xian{
			display:none;
		}
	</style>
</head>
<body>
	<select>
		<option value="0">--请选择省--</option>
	</select>
	<select class="shi">
		<option value="0">--请选择市--</option>
	</select>
	<select class="xian">
		<option value="0">--请选择县/区--</option>
	</select>
	<script>
		// 定义数据
		// 省
		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>'
		}
		console.log(str1);
		// 将拼接好的字符串写入到select
		$('select').eq(0).html(str1);

		// 给第一个select添加change事件 并获取当前用户选择的省
		$('select').eq(0).change(function(){
			// 获取用户先择的省
			var res = $(this).val();
			var resshi = shi[res];
			// console.log(resshi)//拿到市的数组
			// 遍历拿到的数组
			var str2 = '<option value="0">--请选择市--</option>'
			for(i in resshi){
				str2+='<option value="'+resshi[i]+'">'+resshi[i]+'</option>'
			}
			// 将拼接好的二级城市数据写入到第二个select
			$('select').eq(1).html(str2);
			$('select').eq(1).show();

			var str3= '<option value="0">--请选择县/区--</option>';
			$('select').eq(2).html(str3);
		})

		$('select').eq(1).change(function(){
			var res = $(this).val();
			var str2 = '<option value="0">--请选择县/区--</option>'
			for(i in xian[res]){
				str2+='<option value="'+xian[res][i]+'">'+xian[res][i]+'</option>'
			}
			$('select').eq(2).html(str2).show();
		})
	</script>
</body>
</html>

六1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB 9.jQuery

jQuery1. 事件案例：元素的拖拽效果2. 节点操作案例：城市联动1. 事件基本绑定方法格式：$(‘el’).事件类型()On方法常用的事件：ClickMouseoverMouseoutMousemoveFocusBlurChangeSubmit 当表单提交时自动触发绑定给form标签事件对象：当触发某一个事件时调用回调函数的时候，系统会自动传入一个event...
复制链接

扫一扫