【HTML、-HX学习】网页前端学习笔记（七）

最新推荐文章于 2024-04-26 16:47:03 发布

Mo_none

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量323

点赞数

分类专栏： HTML学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Mo_none/article/details/122900974

版权

HTML学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

解释一些，因为跳跃的观看，所以这次没有接续上次，这次也不完整这次的链接

视频（偷偷说一句，我觉得视频里少了一集）https://www.bilibili.com/video/BV1sf4y1k7dr?p=27&spm_id_from=pageDriver

表单

1.获取表单

1.document.getElementById("id属性值")；通过from标签的id属性值获取表单对象；

2.document.表单的name属性值；通过表单的name属性值获取表单对象；

3.document.forms[下标] 通过指定下标获取表单元素；

4.document.forms[表单的name属性值]; 通过表单的name属性值获取表单对象；

2.获取表单元素

1.获取input元素

1.document.getElementById("id属性值")；通过元素的id属性值获取表单元素对象；

2.表单对象.表单元素的name属性值；通过表单对象中对应的元素的name属性值获取；

3.document.getElementByName("name属性值")；通过表单元素的name属性值获取；

4.document.getElementByTagName("标签名/元素名")；通过标签名获取表单元素对象；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取表单元素</title>
	</head>
	<body>
		
		<form id="myform" name="myform" action="" method="get">
			姓名：<input type="text" id="uname" name="uname" value="zs"/>
			密码：<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>
			
		
		</form>
		
		<script type="text/javascript">
			
			function getTxt(){
				var uname = document.getElementById("uname").value;
				console.log(uname);
				
				var pwd = document.getElementById("myform").upwd.value;
				console.log(pwd);
				
				var uno =  document.getElementsByName("uno")[0].value;
				console.log(uno);
				
				var intro = document.getElementsByTagName("textarea")[0].value;
				console.log(intro);
				
			}
		
		</script>
		
	</body>
</html>

2.获取下拉选项

（1）获取select对象

（2）获取选中项的索引

（3）获取选中项options的value属性值（复杂）

有value取value，没有则取option标签的内容

（4）获取选中项options的text：

3.提交表单

4.表单校验

5.天气请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03</title>
	</head>
	<body>
		<input type ="text" id = "numb"/>
		<button type="button" onclick="loadXMLDoc()">请求数据</button>
		<p id = "text"></p>
	</body>
	<script type="text/javascript">
	function loadXMLDoc(){
		document.getElementById("text").innerHTML = "请填写城市";
		var x, url;
		x = document.getElementById("numb").value;
		console.log("--------------");
		console.log(x);
		console.log("--------------");
		
		var xhr = new XMLHttpRequest();
		url = "https://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&location=南京&language=zh-Hans&unit=c"
		console.log("--------------");
		console.log(url);
		console.log("--------------");
		
		xhr.open("get",url,false);
		xhr.send(null);
		if(xhr.status==200){
			document.getElementById("text").innerHTML=xhr.responseText;
			console.log(xhr.responseText);
		}else{
			console.log("状态码："+xhr.status+",原因:"+xhr.responseText)
		}
	}
	
	
	
	
	</script>
</html>

Mo_none

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML、-HX学习】网页前端学习笔记（七）

3.BOM对象1.window对象方法2.history对象3.location对象4.DOM对象1.节点2.获取节点3.创建节点和加入节点4.间接查找节点5.删除节点5.JS表单1.获取表单2.获取表单元素3.提交表单4.表单校验...
复制链接

扫一扫