Web-Day10笔记

其他 2019-03-05 00:57:04 阅读次数: 0

一、jQuery案例

1.overflow属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 150px;
				height: 150px;
				background-color: lightgray;
				
				/*scroll hidden*/
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		
		<!--
			overflow:定义溢出元素内容区的内容会如何处理
			
			visible：默认值，内容不会被修剪，会呈现在元素框之外
			hidden：隐藏，内容会被修剪，并且多于内容是不可见的
			scroll：滚动，内容会被修剪，但是浏览器会显示滚动条以方便显示多余的内容
			auto：根据内容自适应
			inherit：规定当前元素继承父元素的overflow的值
			
		-->
		<div>
			默认值，内容不会被修剪，会呈现在元素框之外
			默认值，内容不会被修剪，会呈现在元素框之外
			默认值，内容不会被修剪，会呈现在元素框之外
			默认值，内容不会被修剪，会呈现在元素框之外
			默认值，内容不会被修剪，会呈现在元素框之外
		</div>
	</body>
</html>

2.cursor属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			cursor:定义鼠标指针放在元素范围内的时候的光标形状
		-->
		<div style="cursor: auto;">指针放在元素范围内的时候的光</div>
		<div style="cursor: default;">指针放在元素范围内的时候的光</div>
		<div style="cursor: crosshair;">指针放在元素范围内的时候的光</div>
		<div style="cursor: text;">指针放在元素范围内的时候的光</div>
		<div style="cursor: wait;">指针放在元素范围内的时候的光</div>
		<div style="cursor: help;">指针放在元素范围内的时候的光</div>
		<div style="cursor: move;">指针放在元素范围内的时候的光</div>
		<div style="cursor: pointer;">指针放在元素范围内的时候的光</div>
	</body>
</html>

3.选项卡

//页面加载响应函数
$(function(){
	//给导航中的li添加单击事件
	$("#menu li").bind("click",function(){
		
		
		//一.导航按钮的切换
		//1.清空所有导航按钮上的active
		//$("#menu li").removeClass("active");
		
		//2.给当前选中的li重新添加active
		/*
		 * eq():在一个容器中获取第几个子标签
		 * index()：获取当前被操作的标签在一个指定容器中的下标
		 */
		//$("#menu li").eq($(this).index()).addClass("active");
		
		
		//将上面的操作合并为一行代码
		$("#menu li").removeClass("active").eq($(this).index()).addClass("active");
		
		
		//二、正文部分的切换
		$("#panel .panel").removeClass("active").eq($(this).index()).addClass("active");	
	});
})

/*全局设置*/
*{
	padding: 0px;
	margin: 0px;
	font-size: 12px;
}

/*设置所有的无序列表*/
ul{
	list-style: none;
}

/*设置整体*/
#box{
	margin: 50px auto;
	
	width: 570px;
}

/*设置导航*/
#menu{
	/*
	 * 单词，rgb()   #ffffff----->#fff
	 */
	background: #eee;
	
	/*处理溢出的部分*/
	overflow: hidden;
}

/*设置导航中的li*/
#menu li{
	float: left;
	width: 90px;
	height: 30px;
	
	line-height: 30px;
	text-align: center;
	
	border: 1px solid #eee;
	
	border-bottom-color: #ccc;
	
	border-top-width: 2px;
	
	cursor: pointer;
}

/*设置导航被选中的样式*/
#menu .active{
	border-left-color: #ccc;
	border-right-color: #ccc;
	border-top-color: blue;
	border-bottom-color: #fff;
	background: #fff;
}

/*设置每一块正文内容*/
#panel .panel{
	/*将每一块隐藏*/
	display: none;
	margin: 10px 0px;
	overflow: hidden;
}

/*单独设置第一块的正文：显示*/
#panel .active{
	display: block;
}

/*图片*/
#panel .panel img{
	float: left;
}

/*标题*/
#panel .panel .title{
	margin-left:280px;
	
	padding-bottom: 10px;
	
	border-bottom: 1px solid #ccc;
}

#panel .panel .list{
	margin-left:280px;
}

#panel .panel .list li{
	float: left;
	margin-right: 10px;
	margin-top: 15px;
	text-decoration: underline;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入外部文件-->
		<link href="css/menuStyle.css" type="text/css" rel="stylesheet" />
		
		<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
	</head>
	<body>
		
		<!--整体-->
		<div id="box">
			<!--导航-->
			<ul id="menu">
				<!--使用类选择器：一个类选择器可以作用于多个元素，active表示被选中【活跃】-->
				<li class="active">手机通讯</li>
				<li>电脑数码</li>
				<li>食品百货</li>
				<li>电脑数码</li>
				<li>食品百货</li>
				<li>电脑数码</li>
			</ul>
			
			<!--正文部分-->
			<div id="panel">
				<!--panel表示6块内容的共性-->
				<div class="panel active">
					<img src="img/images/1.jpg" />
					<div class="title">京东家电.年度好货盘点</div>
					<ul class="list">
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
					</ul>
				</div>
				
				<div class="panel">
					<img src="img/images/2.jpg" />
					<div class="title">京东家电.年度好货盘点</div>
					<ul class="list">
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
					</ul>
				</div>
				<div class="panel">
					<img src="img/images/3.jpg" />
					<div class="title">京东家电.年度好货盘点</div>
					<ul class="list">
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
					</ul>
				</div>
				<div class="panel">
					<img src="img/images/4.jpg" />
					<div class="title">京东家电.年度好货盘点</div>
					<ul class="list">
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
					</ul>
				</div>
				<div class="panel">
					<img src="img/images/5.jpg" />
					<div class="title">京东家电.年度好货盘点</div>
					<ul class="list">
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
					</ul>
				</div>
				
				<div class="panel">
					<img src="img/images/6.jpg" />
					<div class="title">京东家电.年度好货盘点</div>
					<ul class="list">
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
						<li>买电视立省8888元</li>
					</ul>
				</div>
						
			</div>
		</div>
		
		
		<script type="text/javascript" src="js/menujs.js"></script>
	</body>
</html>

4.省份城市区域三级关联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#city,#country{
				display:none;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/city.js"></script>
	</head>
	<body>
		<select name="province" id="province">
			<option>请选择</option>
		</select>
		<select name="city" id="city">
			<option>请选择</option>
		</select>
		<select name="country" id="country">
			<option>请选择</option>
		</select>
		
		<script type="text/javascript">
			$(function(){
				//1.加载省份
				function provinceLoad(){
					//通过键获取省份的数组
					var provinceArr = zcityData["0"];
					
					//定义一个变量，用于拼接所有的省份信息
					var provinceStr = "<option value='-1'>请选择</option>";
					
					//遍历数组，获取数组中省份名称
					for(var i = 0; i < provinceArr.length;i++){
						//provinceArr[i]
						provinceStr += "<option value='" + i + "'>" + provinceArr[i]  + "</option>";
					}
					
					//给省份的select标签设置html内容
					$("select[name='province']").html(provinceStr);
					
				}
				
				//调用函数
				provinceLoad();
				
				//2.加载城市
				function cityLoad(){
					//当省份的值发生改变的时候加载城市的select
					$("select[name='province']").change(function(){
						
						//隐藏区域的select
						$("#country").css("display","none");
						
						
						//获取当前被选中的省份,获取当前选中的省份的value值，可以去获取对应的城市
						var provinceVal = $(this).val();
						
						//判断
						if(provinceVal == -1){
							$("select[name='city']").css("display","none");
							return;
						}
						
						//手动拼接属性
						var city = "0_" + provinceVal;
						//通过属性名获取对应的城市
						var cityArr = zcityData[city];
						
						//定义一个字符串，用于拼接所有的城市
						var cityStr = "<option value='-1'>请选择</option>";
						
						//遍历数组
						for(var i = 0;i < cityArr.length;i++){
							cityStr += "<option value='" + city + "_" + i + "'>" + cityArr[i] + "</option>";
						}
						
						//设置html文件内容
						$("select[name='city']").html(cityStr);
						
						//需要让城市的select和省份的select在同一行显示出来
						$("select[name='city']").css("display","inline-block");	
						
					});
				}
				
				//调用
				cityLoad();
				
				//3.加载区域
				function countryLoad(){
					//当城市的值发生改变的时候加载区域的select
					$("select[name='city']").change(function(){
						//获取当前选中的城市对应的value值，获取对应的区域
						var cityVal  = $(this).val();
						
						if(cityVal == -1){
							$("select[name='country']").css("display","none");
							return;
						}
						
						//通过城市的value获取对应的区域
						var countryArr = zcityData[cityVal];
						
						//定义一个变量，用于拼接区域的字符串
						var countryStr = "<option value='-1'>请选择</option>";
						
						//遍历
						for(var i = 0;i < countryArr.length;i++){
							countryStr += "<option>" + countryArr[i] + "</option>";
						}
						
						//设置html文件内容
						$("select[name='country']").html(countryStr);
						
						//显示
						$("select[name='country']").css("display","inline-block");
					});
				}
				
				countryLoad();
				
			})
		</script>
		
	</body>
</html>

5.swipe

见微信场景页代码

二、AJAX

1.简介

AJAX=Asynchronous JavaScript And XML ,异步的javascript和xml

ajax不是新的编程语言，而是一种用于快速创建动态网页的技术

作用：传统的网页如果需要更新网页内容，则会重新加载整个网页，如果在网页中使用了ajax，实现局部刷新

异步交互：客户端发出一个请求，无需等待服务端的响应，就可以继续发送请求

同步交互：客户端发出一个请求，需要等待服务端的响应之后，才能发出第二次请求

2.ajax的工作原理【面试题】

C/S:client server ,客户端服务端

B/S:Broswer sever，浏览器服务端

工作流程：

四步操作：

​ a.创建核心对象【XMLHttpRequest/ActiveObject】

​ b.使用核心对象打开与服务器之间的连接：open()

​ c.发送请求：send()

​ d.注册监听，监听服务器响应

3.表单请求

3.1get请求
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			表单
				作用：向服务器提交不同类型的数据
				action：提交到哪里去
				method：提交方式
				
				表单提交数据的方式有两种：get和post，默认为get
				
			get请求:
				将数据名称和数据值使用=连接，并且使用&拼接，
				缺点：不安全，会将所有的数据暴露在地址栏中，最大传输为2kb，并不适合传输较大的数据
				优点：简单，效率高
				
				
			url:统一资源定位符【网址】
				
				格式：网络协议://主机名/资源的路径？关键字1=值1&关键字2=值2
			
		-->
		
		
		<form action="http://10.12.152.104/formget.php" method="get">
			<input type="text" name="username" />
			<input type="text" name="age" />
			<input type="password" name="password" />
			<br  />
			<input type="submit" value="提交" />
		</form>
		
		
	</body>
</html>
3.2post请求
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			
			post请求:
				安全，数据通过浏览器内部传输的，上传文件的大小理论上没有任何的限制
				
				缺点：比get麻烦		
		-->
		
		
		<form action="http://10.12.152.104/formpost.php" method="post">
			<input type="text" name="username" />
			<input type="text" name="age" />
			<input type="password" name="password" />
			<br  />
			<input type="submit" value="提交" />
		</form>
		
	</body>
</html>

4.原生的ajax请求

4.1get请求
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		用户名：<input type="text" name="username" id="username"/><br />
		年龄：<input type="text" name="age" id="age"/><br />
		密码：<input type="password" name="password" id="password"/>
		<br />
		<button id="btn">提交数据</button>
		
		<script type="text/javascript">
			window.onload = function(){
				//获取标签对象
				var userInput = document.getElementById("username");
				var ageInput = document.getElementById("age");
				var pwdInput = document.getElementById("password");
				var btn = document.getElementById("btn");
				
				//给按钮绑定点击事件
				btn.onclick = function(){
					//请求服务器过程
					
					//1.创建请求的核心对象
					var xhr = null;
					
					//兼容问题：如果没有异常，则正常创建；如果 出现异常，则需要采用另外方式创建
					//Python异常：try-except,js:try-catch
					
					try{
						xhr = new XMLHttpRequest();
					}catch(e){
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
					
					
					//2.与服务器建立连接
					//open(请求方式，服务器地址，true)
					//get请求的特点：将数据拼接在服务器地址的后面传输
					//http://10.12.152.104/ajaxget.php?username=xxxx&age=xxx&password=xxx
					//对参数中出现的中文需要编码处理：encodeURI()
					urlStr = "http://10.12.152.104/ajaxget.php?username=" + encodeURI(userInput.value) + "&age=" + ageInput.value + "&password=" + pwdInput.value;
					xhr.open("get",urlStr ,true);
					
					
					//3.发送请求
					xhr.send();
					
					//4.建立监听，监听服务器的响应
					xhr.onreadystatechange = function(){
						//是服务器返回的响应
						
						/*
						 * 有两个字段可以捕捉
						 * readystate；表示当前核心对象的状态
						 * 	0：请求未初始化【还没有调用open（）】
						 * 	1：请求已经建立，但是还没有发送【还没有调用send（）】
						 * 	2：请求已经发送，正在处理中
						 * 	3：请求正在处理，通常在响应中的部分数据就可以说使用了
						 * 	4：响应已经完成，可以获取并使用服务端的响应
						 * 
						 * 
						 * status:服务器返回的响应码
						 * 	404：数据不存在
						 * 	200：请求成功
						 *  400
						 * 	500
						 * 
						 * 1xx：信息响应类，表示接受到请求需要继续处理
						 * 2xx:处理成功响应类，
						 * 3xx；重定向响应类，
						 * 4xx:客户端响应
						 * 5xx:服务端错误
						 * 
						 */
						if(xhr.readyState == 4){
							if(xhr.status == 200){
								alert("数据请求成功");
								//服务器的响应数据
								alert(xhr.responseText);
								
							}else{
								alert("数据请求失败");
							}
						}
						
					}
					
				}
				
			}
		</script>
		
	</body>
</html>
4.2post请求
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		用户名：<input type="text" name="username" id="username"/><br />
		年龄：<input type="text" name="age" id="age"/><br />
		密码：<input type="password" name="password" id="password"/>
		<br />
		<button id="btn">提交数据</button>
		
		<script type="text/javascript">
			window.onload = function(){
				//获取标签对象
				var userInput = document.getElementById("username");
				var ageInput = document.getElementById("age");
				var pwdInput = document.getElementById("password");
				var btn = document.getElementById("btn");
				
				//给按钮绑定点击事件
				btn.onclick = function(){
					//请求服务器过程
					
					//1.创建请求的核心对象
					var xhr = null;
					
					//兼容问题：如果没有异常，则正常创建；如果 出现异常，则需要采用另外方式创建
					//Python异常：try-except,js:try-catch
					
					try{
						xhr = new XMLHttpRequest();
					}catch(e){
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
					
					
					//2.与服务器建立连接
					//open(请求方式，服务器地址，true)
					//对参数中出现的中文需要编码处理：encodeURI()
					urlStr = "http://10.12.152.104/ajaxpost.php?";
					xhr.open("post",urlStr ,true);
					
					
					//3.发送请求
					//设置编码格式
					//请求头,固定写法
					xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
					
					//将需要发送的数据在请求体中发送
					var data = "username=" + encodeURI(userInput.value) + "&age=" + ageInput.value + "&password=" + pwdInput.value;
					xhr.send(data);
					
					//4.建立监听，监听服务器的响应
					xhr.onreadystatechange = function(){
						//是服务器返回的响应
						if(xhr.readyState == 4){
							if(xhr.status == 200){
								alert("数据请求成功");
								//服务器的响应数据
								alert(xhr.responseText);
								
							}else{
								alert("数据请求失败");
							}
						}
					}
				}
			}
		</script>
		
	</body>
</html>

5.案例实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//请求方式，请求地址，数据，请求成功之后的回调函数
			function ajax(method,url,data,successfn){
				//1.创建请求的核心对象
				var xhr = null;
				
				//兼容问题：如果没有异常，则正常创建；如果 出现异常，则需要采用另外方式创建
				//Python异常：try-except,js:try-catch
				
				try{
					xhr = new XMLHttpRequest();
				}catch(e){
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				//2.判断请求的方式并建立连接
				if(method == "get"){
					//http://xxxx/news.php?data
					url += "?" + data;
				}
				
				xhr.open(method,url,true);
				
				//3.发送请求
				if(method == "get"){
					xhr.send();
				}else if(method == "post"){
					xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
					xhr.send(data);
				}
				
				//4.请求完成之后的操作
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							//注意：ajax将数据请求完成之后，每个用户的需求是不一样的，需要自定义下载完成之后的代码
							
							//调用回调函数，将请求成功之后的响应传参
							successfn(xhr.responseText);
						}
					}
				}
					
			}
			
			window.onload = function(){
				//获取现有的标签对象
				var btn = document.getElementById("btn");
				var ulEle = document.getElementById("ul");
				
				//给按钮添加事件
				btn.onclick = function(){
					//请求服务器
					ajax("get","http://10.12.152.104/news.php","",function(text){
						//alert(text);
						//前端处理服务器响应的时候，明确服务器的数据类型以及是否编码
						
						//返回一个数组
						var arr = JSON.parse(text);
						alert(arr);
						
						//遍历数组
						for(var i = 0;i < arr.length;i++){
							//arr[i]
							//arr[i].title    arr[i].date
							
							//创建标签对象
							var liEle = document.createElement("li");
							var aEle = document.createElement("a");
							var spanEle = document.createElement("span");
							
							//解析数据，将数据设置为标签的文本
							aEle.innerHTML = arr[i].title;
							aEle.href = "#";
							spanEle.innerHTML = "【" + arr[i].date + "】";
							
							//添加
							liEle.appendChild(aEle);
							liEle.appendChild(spanEle);
							
							ulEle.appendChild(liEle);
							
						}
					})
				}
			}
		</script>
		
		<button id="btn">下载</button>
		<ul id="ul">
			
		</ul>
		
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41470296/article/details/87922522
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022