python全栈开发第六天（jQuery简介，选择器，元素操作，相关尺寸，事件，节点操作）

本文链接：https://blog.csdn.net/weixin_45410462/article/details/99881138

第六天

jQuery简介

jquery是原生js的封装库将原生js方法进行封装简化了原生js的操作
1.x版本
2.x版本
3.x版本
2.x 和3.x 不兼容低版本浏览器

Jquery的使用：
导入库文件在header标签内导入库文件
在代码中打印$ 如果没有报错代表导入成功

选择器

1、基础选择器
Id选择器器
标签选择器
类选择器
并列选贼器
后代选择器器
属性选择器
在这里插入图片描述
2、过滤选择器
获取第一个元素：first
获取最后一个元素：last
获取指定索引的元素 eq

3、关系选择器
获取所有的子元素 children()
获取上一个同级元素 prev()
获取下一个同级元素 next()
获取所有的同级元素 siblings()
获取父元素 parent()
获取先辈元素 parents()
在父元素中查找指定的子元素 find()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>第一个完整的静态页面</title>
	<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;list-style: none}
		.header{
			min-width:960px;
			overflow: hidden;
			border:1px solid #c4c4c4;
		}
		.center{
			
			width:960px;
			height:90px;
			margin:0 auto;
		}
		.header .logo{
			margin-top:10px;
			float:left;
		}
		.nav_top{
			width:685px;
			float:right;
			/*background:red;*/
			margin-top:10px;
			margin-left:10px;
		}
		.nav_top li{
			float:left;
			width:90px;
			border:1px solid green;
			line-height:65px;
			margin-left:-1px;
			text-align: center;

		}
		.content{
			width:960px;
			min-height:500px;
			margin:10px auto;
			overflow: hidden;
			border:#c4c4c4 solid 1px;
		}
		.content ul{
			margin-top:10px;
			margin-bottom:10px;
		}
		.content li{
			width:225px;
			height:200px;
			border:1px solid #c4c4c4;
			float:left;
			margin-left:10px;
			margin-top:10px;
			margin-bottom:10px;
		}
		.footer{
			width:960px;
			min-height:50px;
			margin:0 auto;

			border:#c4c3c4 solid 1px;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="center">
			<div class="logo">
				<img src="./image/logo.png">
			</div>
			<ul class="nav_top">
				<li id="item1">英语</li>
				<li>高数</li>
				<li id="item3">线性</li>
				<li>物理</li>
				<li>java</li>
				<li>数据库</li>
				<li>人工智能</li>
			</ul>
		</div>	
	</div>
	<div class="content">
		<ul style="overflow:hidden">
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li >
			<li class='item5'>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
		</ul>
	</div>
	<div class="footer">
		 COPYRIGHT©U就业
	</div>
	<script type="text/javascript">
		//基本选择器 id class 标签
		// $('#item1').css('background','red');
		// $('.logo').css('background','red');
		// $('li').css('background','pink');
			// 后代选择器
			// $('.nav_top li').css('background','blue');
			// 子选择器
			// $('.logo>img').css('background','blue');
			// 并列选择器
			// $('#item1,#item3').css('background','#000')
			// 属性选择器
			// $('ul[class=nav_top]').css('background','green');

		//获取第一个元素
			 //:first
			 // $('li:first').css('background','red'); 
		//获取最后一个元素
			 // :last
			 // $('li:last').css('background','red');
		//获取指定索引的元素
			 //eq通过索引获取元素 0开始
			 // $('li:eq(1)').css('background','red'); 
			 // $('li').eq(7).css('background','red');
			 // 获取第五张图片
			// $('.content li').eq(4).css('background','gold');
		//获取所有的子元素
			//children()获取所有子元素
			// 获取body的子元素
			// $('body').children().css('border','1px solid gold');
		//获取上一个同级元素
			//prev()
			// $('.item5').prev().css('background','#411');

		// 获取下一个同级元素
			// next()
			// $('.item5').next().css('background','#511');

		// 获取所有的同级元素
			// siblings() 查找除了自己以外的所有同级元素
			// $('.item5').siblings().css('background','gold');
		// 获取父元素
			//parent()
			$('.item5').parent().css('background','pink');
		// 获取先辈元素
			// Parents() 如果不传参数 获取所有的先辈元素 通过传参获取指定的先辈元素
			// $('.item5').parents('.content').css('border','1px solid red');
		// 在父元素中查找指定的子元素
			// Find() 必须传参数 如果不传参数没有效果
			// $('html').find('.item5').css('border','1px solid red');
	
	</script>
</body>
</html>

元素操作

1、css设置
使用是css()方法来操作样式
一次设置一个样式
$(el).css(‘样式的key’,’设置的值’)
一次设置多个样式
$(el).css({})
在这里插入图片描述
2、文本操作
innerHTML ==== html()
innerText ==== text()

3、表单值的操作
Value属性====val()

4、属性操作
查询设置属性 attr()
删除属性 removeAttr()

5、类class属性操作
addClass()
removeClass()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Doucument</title>
	<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>

	<style>
		.item1{
			border:3px solid red;
		}
		.item2{
			font-size:30px;
		}
	</style>

</head>
<body>
	<div class="box">够淫荡</div>
	<input type="text" value="来呀,快活呀">
	<br>
	<img src="./image/1.jpg" alt="">

	<script type="text/javascript">
		//设置css样式
			// 一次设置一个样式
			// $('.box').css('width','200px');
			// $('.box').css('height','200px');
			// $('.box').css('background-color','red');
			// 一次设置多个样式
			$('.box').css({width:'200px',height:'200px',backgroundColor:'gold'});

		// 文本内容的操作  结果和原生的innerHTML innerText 一样
			//html()
			$('.box').html('<em>I love you</em>');
			//text()
			$('.box').text('<em>I love you</em>');

		// 表单值的操作
			// 获取
			console.log($('input').val());
			//设置
			$('input').val('我快活不动了');

		// 属性操作	
			// 获取属性的值 传一个参数
			console.log($('img').attr('src'));
			// 设置属性的值 一次设置一个
			$('img').attr('alt','这是波多老师');
			// 一次设置多个属性的值
			$('img').attr({alt:'这个老师真漂亮',title:'你认识这个老师'});
			// 删除属性
			$('img').removeAttr('src');

		//class属性的操作
			// 给.box追加类名 在原来的基础是追加 不会删除原来的类名
			$('.box').addClass('item1 item2');
			// 删除类名 如果不传参数会将所有的类名都删除掉
			$('.box').removeClass('item1');


	</script>

</body>
</html>

相关尺寸

获取元素相对文档的偏移位置
offset()
获取文档的滚动距离
scrollTop()
scrollLeft()
获取元素的宽度和高度
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>相关尺寸</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style>
		*{margin:0;padding:0;}
		body{
			height:2000px;
			width:2500px;
		}
		.box1{
			width:200px;
			height:200px;
			background: #0f0;


			padding:20px;
			border:3px solid red;
		}
		.box2{
			width:300px;
		}
	</style>

</head>
<body>
	<div class="box1">1</div>
	<div class="box1 box2">2</div>
	<script type="text/javascript">
		//获取元素相对文档的偏移位置
		 	// offset()返回一个包含top和left属性的对象
			// 获取box1相对于文档的位置
			console.log($('.box1').offset());
			console.log($('.box2').offset());

		//获取文档的滚动距离
			//scrollTop()获取文档的垂直方向的滚动距离 返回的是一个数字
			console.log($(document).scrollTop()); 
			// scrollLeft() 文档的水平方向的滚动距离
			console.log($(document).scrollLeft());

		// 获取元素的宽度和高度
			//width() height() 如果是多个元素对象获取的是第一个元素的宽高
			// 只获取元素的内容大小（即css中设置的宽高）
			// 	innerWidth() innerHeight()  获取包含内间距 不包含边框
			// 	outerWidth() outerHeight()  包含内间距包含边框
			console.log($('.box1').width());
			console.log($('.box1').height());
			console.log($('.box1').innerHeight(),'innerheight');
			console.log($('.box1').outerHeight(),'outerheight');

			// 获取浏览器窗口的大小
			console.log($(window).width())
			// 获取文档的宽高
			console.log($(document).width())
			console.log($(document).height())

	</script>
</body>
</html>

练习：
1、选项卡练习

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选项卡</title>
	<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
	<style type="text/css">
		*{margin:0px;padding:0px;list-style:none;}
		.wrap{
			width:300px;
			height:300px;
			border:1px solid #c4c4c4;
		}
		.title{
			overflow:hidden;
		}
		.title li{
			float:left;
			width:100px;
			height:50px;
			background: #c4c4c4;

			text-align:center;
			line-height:50px;
		}
		.title .active1{
			background:pink;
		}
		.content li{
			height:250px;
			border:1px solid red;

			/*默认给所用的内容隐藏*/
			display:none;
		}
		.content .active2{
			display:block;
		}
	</style>
</head>
<body>

	<div class="wrap">
		<ul class="title">
			<li class="active1" onclick="func('0')">话费</li>
			<li class="active1" onclick="func('1')">机票</li>
			<li class="active1" onclick="func('2')">酒店</li>
		</ul>
		<ul class="content">
			<li class="active2" >话费的内容</li>
			<li class="active2" >机票的内容</li>
			<li class="active2" >酒店的内容</li>
		</ul>
	</div>

	<script type="text/javascript">
		//给每个标题添加移入事件
		$('.title li').mouseover(function(){
			// 移入谁给谁添加类名
			// 给当前移入li添加类名 获取所有同级的li   移除类名
			$(this).addClass('active1').siblings().removeClass('active1');
			// $(this).index() 获取当前元素的索引值
			// console.log($(this).index());
			$('.content li').eq($(this).index()).addClass('active2').siblings().removeClass('active2');

		});
	</script>


</body>
</html>

2、楼层导航练习

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>楼层导航练习</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;list-style:none;}
		.f1{
			height:800px;
			background: red;
		}
		.f2{
			height:900px;
			background: green;
		}
		.f3{
			height:900px;
			background: blue;
		}
		.f4{
			height:750px;
			background: yellow;
		}
		.f5{
			height:850px;
			background: pink;
		}
		.f6{
			height:850px;
			background: purple;
		}
		.nav{
			position: fixed;
			right:20px;
			top:150px;
			width:80px;
			background: #c4c4c4;
		}
		.nav li,.top{
			height:50px;
			border:1px solid red;
			text-align:center;
			line-height: 50px;
		}
		.nav li:hover{
			background:#408;
		}
		.nav .top:hover{
			background:#408;
		}

	</style>
</head>
<body>
	<div class="wrap">
		<div class="f1">1</div>
		<div class="f2">2</div>
		<div class="f3">3</div>
		<div class="f4">4</div>
		<div class="f5">5</div>
		<div class="f6">6</div>
	</div>
	<div class="nav">
		<ul >
			<li>一楼</li>
			<li>二楼</li>
			<li>三楼</li>
			<li>四楼</li>
			<li>五楼</li>
			<li>六楼</li>
		</ul>
		<div class="top">返回顶部</div>
	</div>
	<script type="text/javascript">
		//返回顶部
			//给.top 添加单击事件
			$('.top').click(function(){
				// $(document).scrollTop(0);
				// 获取当前文档的滚动距离
				var Dof=$(document).scrollTop();
				// 让滚动条的距离递减
				var flag=setInterval(function(){
					Dof-=50;
					//设置文档的位置
					$(document).scrollTop(Dof);
					if(Dof<=0){
						clearInterval(flag);
					}
				},30);
			});
		//楼层
			 //单击楼层导航
			 	 //点的是几楼
			 	 //当前导航对应的元素在文档中的位置
			
			 	$('.nav li').click(function(){
				// 获取当前楼层导航对应的元素
				var navlist = $(this).index()+1;
				// 通过导航的索引值获取对应元素 相对于文档的位置
				var fp = $('.f'+navlist).offset().top;
				// 让文档滚动到元素对应的位置
				$(document).scrollTop(fp);
			})

			// $('.nav li').click(function(){
			//  		var navlist=$(this).index();
			//  		var fp=$('.wrap div').eq(navlist).offset().top;
			//  		$(document).scrollTop(fp);
			//  	})
	</script>
</body>
</html>

事件

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

2、on方法

3、常用的事件：
click
mouseover
mouseout
mousemove

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

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

5、事件冒泡
当父元素和子元素设置了相同的事件，在触发子元素的事件时会导致父元素的事件并发，因其页面效果混乱
解决办法：给事件最后添加return false

6、默认行为
例如a标签在没有绑定认任何事件时会跳转这个就是元素的默认行为
一般情况下元素会先执行自定义的事件然后执行默认的行为
我们可以在自定事件最后添加return false阻止默认行为的执行

<!DOCTYPE html>
<html>
<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>方法绑定</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(); 


			// 鼠标拖拽效果
			// 当用户在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').mouseup(function(){
			// 	$(window).off('mousemove');
			// })
			$('.box').on('mouseup',function(){
				$(window).off('mousemove');
			})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</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" target="_blank">跳转到百度</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>

7、ready() 加载事件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>加载事件</title>
	<script src="../day07jquery/jquery-1.8.3.min.js"></script>
</head>
<body>

<script>

	//当文档加载完成后自动触发ready事件
	$(document).ready(function(){
		$('.box').css({width:'100px',height:'100px',background:'pink'});
	})
</script>

<div class="box">1</div>

</body>
</html>

节点操作

1、创建元素节点

2（1）、将新元素插入到页面中
append()
prepend()
after()
befor()
2（2）、删除元素
empty()
remove()
2（3）、克隆(复制)
可以传参数默认是false 只克隆单纯的元素
如果传参为true 会将元素的事件一起复制
clone()
注意：如果直接将页面中的元素插入指定位置，那么会讲原来的元素剪切掉

<head>
	<meta charset="utf-8">
	<title>节点操作</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 type="text/javascript">
		//将元素插入到指定元素内部的尾部
		$('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复制 并插入到warp内,默认为false只是单纯的复制，为true时将事件也复制过来
		$('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>