网页前端第八次培训

一、学习网址：学习网址

二、js表单

<!--
			获取表单
				1.document.getElementById("id属性值")；
					通过form标签的id属性值获取表单对象
				2.document.表单的name属性值；
					通过表单的name属性值获取表单对象
				3.document.forms[下标]
					通过指定下标获取表单元素
				4.document.forms[表单的name属性值]；
					通过表单的name属性值获取表单对象
					
				document.forms:获取HTML文档中所有的表单对象
		-->

获取表单元素

<!--
			获取表单元素
				1.获取input元素
					1.document.getElementById("id属性值")；
						通过元素的id属性值获取表单元素对象
					2.表单对象.表单元素的name属性值；
						通过表单对象中对应的元素的name属性值获取
					3.document.getElementByName("name属性值");
						通过表单元素的name属性值获取
					4.document.getElementsByTagName("标签名/元素名")；
						通过标签名获取表单元素
						
						
				获取下拉选项
					1.获取下拉框对象
						var 对象=document.getElementById("id属性值")；
					2.获取下拉框的下拉选项列表
						var options=下拉框对象.options;
					3.获取下拉框被选中项的索引
						var index=下拉框对象.selectedIndex;
					4.获取下拉框被选中项的值
						var 值=下拉框对象.value;
					5.通过选中项的下标获取下拉框被选中项的值
						var 值=下拉框对象.options[index].value;
					6.获取下拉框被选中项的文本
						var 文本值=下拉框对象.options[index].text;
						
					注意：
						1.获取下拉框选中项的值时：(value)
							如果option标签设置了value属性值，则获取value属性对应的值；
							如果option标签未设置value属性值，则获取的是option双标签中的文本值
				2.下拉框的选中状态：
					选中状态：selected=selected、selected、selected=true
					未选中状态：不设置selected属性、selected=false
				
			-->	

 提交表单

<!--
			提交表单
				一、使用普通按钮 type="button"
					1.给按钮绑定click点击事件，绑定函数
					2.在函数中，通过表单校验(非空校验)
					3.如果校验通过，则手动提交表单
						表单对象.submit();
						
				二、使用提交按钮  type="submit"
					1.给按钮绑定click点击事件，绑定函数
					2.函数需要有返回值，返回true或false（return false;表单不会提交。return true;表单会提交）
						onclick="return 函数名()"
					3.在函数中，进行表单校验(非空校验、合法校验等)
					4.如果校验通过，返回true，如果校验不通过，返回false
				三、使用提交按钮  type="submit"
					1.给表单form元素绑定submit点击事件，绑定函数
					2.函数需要有返回值，返回true或false（return false;表单不会提交。return true;表单会提交）
						onsubmit="return 函数名()"
					3.在函数中，进行表单校验(非空校验、合法校验等)
					4.如果校验通过，返回true，如果校验不通过，返回false
		-->

 

Ajax 

<!--
			Ajax
				异步无刷新技术
				
				原生Ajax的实现流程
					1.得到XMLHttpRequest对象
						var xhr =new XMLHttpRequest
					2.打开请求
					xhr.open(method,uri,async);
						method:请求方式、通常是GET|POST
						uri:请求地址
						async:是否异步。如果是true表示异步。false表示同步
						
					3.发送请求
						xhr.send(params);
							params.请求时需要传递的参数
								如果是GET请求，设置null。(GET请求的参数设置在url后面)
		、						如果是POST请求，无参数设置为null，有参数则设置参数
					4.接收响应
						xhr.status 响应状态  (200=响应成功 404 =资源未找到)
						xhr.responseText  得到响应结果
		
		
		
		
		-->

 

天气请求，提取例句中的天气显示 

<script type="text/javascript">
		var shijian={"results":[{"location":
		{"id":"WTSQQYHVQ973","name":"南京",
		"country":"CN","path":"南京,南京,江苏,中国",
		"timezone":"Asia/Shanghai","timezone_offset":"+08:00"},
		"now":{"text":"阴","code":"9","temperature":"5"},
		"last_update":"2022-02-12T09:10:49+08:00"}]}
		
		var chengshi,tianqi,wendu;
		chengshi=shijian.results[0].location.name;
		tianqi=shijian.results[0].now.text;
		wendu=shijian.results[0].now.temperature;
		function xianshi(){
			document.write("城市："+chengshi+"<br/>");
			document.write("天气："+tianqi+"<br/>");
			document.write("温度："+wendu+"<br/>");
		}
		xianshi();
		
		</script>