HTML5教程

网页前端第八次培训

本文主要是介绍网页前端第八次培训,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

本文章为寒假记录通过b站学习HTML所得收获


一、学习网址:

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili


二、js表单

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

例句

<form id="myform1" name="myform1" action=""></form>
		<form id="myform2" name="myform2" action=""></form>
		
		<script type="text/javascript">
		
		//1.document.getElementById("id属性值")
		console.log(document.getElementById("myform1"));
		//2.document.表单的name属性值;
		console.log(document.myform2);
		console.log("------------");
		//获取所有的表单对象
		console.log(document.forms);
		//3.document.forms[下标]
		console.log(document.forms[0]);
		//4.document.forms[表单的name属性值]
		console.log(document.forms['myform2']);

获取表单元素

<!--
			获取表单元素
				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
				
			-->	

例句

<form id="myform" name="myform" action="" method="get">
			<!--	文本框	-->
			姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
			<!---	密码框	-->
			密码:<input type="password" id="upwd" name="upwd" value="1234"/><br />
			<!---	隐藏域	-->
			<input type="hidden" id="uno" name="uno" value="隐藏域" />
			<!--	文本域	-->
		
			个人说明:<textarea name="intro"></textarea>
				<br>
			<button type="button" onclick="getTxt();">获取元素内容</button>
			<br>
			<hr>
			<br>
			
			来自:
				<select id="ufrom" name="ufrom">
					<option value="-1">请选择</option>
					<option value="beijing" selected="selected">北京</option>
					<option value="shanghai">上海</option>
					<option>杭州</option>
				</select><br />
				<button type="button" onclick="getSelect"
			
			
			
			
			
		</form>
		<script type="text/javascript">
		function getTxt(){
			//1.document.getElementById("id属性值")
			var uname=document.getElementById("uname").value;
			console.log(uname);
			
			
			//	2.表单对象.表单元素的name属性值;
			var pwd=document.getElementById("myform").upwd.value;
			console.log(pwd);
			
			//3.document.getElementByName("name属性值");
			var uno=document.getElementsByName("uno")[0].value;
			console.log(uno);
			
			//4.document.getElementsByTagName("标签名/元素名");
			var intro=document.getElementsByTagName("textarea")[0].value;
			console.log(intro);
			
		}




function getSelect(){
			var ufrom=document.getElementById("ufrom");
			console.log(ufrom);
			
			var opts=ufrom.options;
			console.log(opts)
			
			var index=ufrom.selectedIndex;
			console.log("被选中的下标..."+index);
			
			var val=ufrom.value;
			console.log("被选中项的值:"+val);
			var val2=ufrom.options[index].value;
			console.log("被选中项的值:"+val2);
			var txt=ufrom.options[index].text;
			console.log("被选中项的文本:"+txt);
		
			ufrom.options[2].selected=true;
		
		}
		
		
		

提交表单

<!--
			提交表单
				一、使用普通按钮 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
		-->

例句

<form id="myform" name="myform" action="http://www.baidu.com" method="get" >
			姓名:<input name="uname" id="uname"/> &nbsp;
			<span id="msg" style="font-size: 12px;color:red;"></span><br />
			
			<button type="button" onclick="submintForm1()">提交</button>
		</form>
		<hr>
		<form id="myform2" action="http://www.baidu.com" method="get" >
			姓名:<input name="uname2" id="uname2"/> &nbsp;
			<span id="msg2" style="font-size: 12px;color:red;"></span><br />
			
			<button type="submit" onclick="return submitForm2()">提交</button>
		</form>
		
		<hr>
		<form id="myform3" action="http://www.baidu.com" method="get" onsubmit="return submitForm3()">
			姓名:<input name="uname3" id="uname3"/> &nbsp;
			<span id="msg3" style="font-size: 12px;color:red;"></span><br />
			
			<button type="submit">提交</button>
		</form>
		<script type="text/javascript">
		
			function submintForm1(){
				var uname=document.getElementById("uname").value;
				
				if(isEmpty(uname)){
					
					document.getElementById("msg").innerHTML="姓名不能为空!";
					
					
					return;
				}
				
				
				document.getElementById("myform").submit();
			}
		
			function.submitForm2(){
				var uname=document.getElementById("uname2").value;
				
				if(isEmpty(uname)){
					
					document.getElementById("msg2").innerHTML="姓名不能为空!";
					
					
					return false;
				}
				
				
				return true;
			}
			
			
			function.submitForm3(){
				var uname=document.getElementById("uname3").value;
				
				if(isEmpty(uname)){
					
					document.getElementById("msg3").innerHTML="姓名不能为空!";
					
					
					return false;
				}
				
				
				return true;
			}
		
		//trim():  字符串方法,去除字符串前后空格
		
		function isEmpty(str){
			if(str==null||str.trim()==""){
				return true;
			}
		}
		return 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">
	
	
	function test01(){
	//  得到XMLHttpRequest对象
		var xhr=new XMLHttpRequest();
		//打开请求
		xhr.open("get","js/date.json",false);//同步供求
		//发送请求
		xhr.send(null);
		//判断响应状态
		if(xhr.status==200){
			//获取响应结果
			console.log(xhr.responseText);
		}else{
			console.log("状态码:"+xhr.status+",原因:"+xhr.responseText)
		}
		
	}	
		//test01;
		//异步请求
		function test02(){
			//  得到XMLHttpRequest对象
				var xhr=new XMLHttpRequest();
				
			
				
				console.log(xhr.readyState);
				//打开请求
				xhr.open("get","js/date.json",true);//异步供求
				console.log(xhr.readyState);
				//发送请求
				xhr.send(null);	
				
				xhr.onreadystatechange=function(){
					if(xhr.readState==4){
						if(xhr.status==200){
						//获取响应结果
						console.log(xhr.responseText);
					}else{
						console.log("状态码:"+xhr.status+",原因:"+xhr.responseText)
					}
				   }
				}
				
				
				console.log(xhr.readyState);
				//异步请求,所以需要知道后台已经将请求处理完毕,才能获取响应结果
				//通过监听readyState的变化来得知后面的处理状态
					xhr.onreadystatechange=function(){
						
					}
				//判断响应状态
				if(xhr.status==200){
					//获取响应结果
					console.log(xhr.responseText);
				}else{
					console.log("状态码:"+xhr.status+",原因:"+xhr.responseText)
				}
				
				console.log("异步请求...");
				
		}
		test02();


当然还有天气请求,提取例句中的天气显示

<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>

先将例句存放在定义的shijian中,再定义三个用以存放,下面直接function运行即可

帮到大家的话点个赞叭

这篇关于网页前端第八次培训的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!