第四十二天学习java-CSDN博客

本文链接：https://blog.csdn.net/qq_37549781/article/details/110727549

总结

js

设置定时器

<script type="text/javascript">
			/* 
				setInterval(code,millisec[,"lang"])设置定时器 
				clearInterval(id_of_setinterval)取消定时器
				setTimeout() 在指定的毫秒数后调用函数或计算表达式。 
			*/
			var time = 10;
			var l = setInterval(function(){
				if(!time){
					clearInterval(l);
				}
				console.debug(time--);
			},1000)
			
		</script>

获取指定元素

<!-- 
			getElementById() 返回对拥有指定 id 的第一个对象的引用。 
			getElementsByName() 返回带有指定名称的对象集合。
			getElementsByTagName() 返回带有指定标签名的对象集合。
		 -->
		 <script type="text/javascript">
		 	onload=function(){
		 		var name = document.getElementById("username");
		 		console.debug(name);
		 		
		 		var hobbys = document.getElementsByName("hobbys");
		 		console.debug(hobbys);
		 		
		 		var input = document.getElementsByTagName("input");
		 		console.debug(input);
		 	}
		 </script>

节点操作

<!-- 
			onload 一张页面或一幅图像完成加载。 
			doocument.documentElement:获取根节点   <html>
			document.body: 获取body节点  <body>
		创建和添加：
			document.createElement() 创建新的元素
			insertBefore(newnode, refnode) 在childNodes中的refnode之前插入newnode，返回Node
			appendChild() 父节点追加子节点
		删除：
			removeChild() 父节点删除子节点
		属性操作：
			setAttribute(“type”,”button”) --  node.type=’button’ 设置属性
			getAttribute(“type”) -- node.type 获取属性值
			removeAttribute()	 删除某属性；
			node.style.样式 设置样式
			node.className 设置样式名
		 -->
		 <style type="text/css">
		 	.in{
		 		color:red;
		 	}
		 </style>
		 <script type="text/javascript">
		 	onload=function(){
		 		var body = document.body;
		 		var input = document.createElement("input");
		 		body.appendChild(input);
		 		input.setAttribute("type","text");
		 		input.value="小明";
		 		input.className="in";
		 		
		 	}
		 </script>

设置文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
		/* 
			innerHTML:设置或获取带有标签的元素（会覆盖）
			innerText:设置或获取纯文本（会覆盖）
		*/
			onload=function(){
				var btn = document.getElementById("btn");
				var pwd = document.getElementById("pwd");
				btn.onmousedown=function(){
					pwd.type="text";
				}
				btn.onmouseup=function(){
					pwd.type="password";
				}
				var form = document.getElementById("form");
				var form1 = document.getElementById("form1");
				
				console.debug(form.innerHTML)
				console.debug(form1.innerText)
				
				form.innerHTML="<input type='button'>"
				
				form1.innerText="<input type='button'>"
				
			}
		</script>
	</head>
	<body>
		<input type="password" id="pwd">
		<input type="button" id="btn" value="查看">
		<form action="" id="form">
			<input type="submit">
			<a>超链接</a>
		</form>
		<form action="" id="form1">
			<input type="submit">
			<a>超链接</a>
		</form>
	</body>
</html>

Ajax

异步请求，发送请求的同事还可以继续操作页面。页面不销毁；

返回部分数据，减少不必要的数据承传输，介绍网络资源。页面不刷新，而是更新页面部分数据；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function check(){
		//创建一个 发送ajax对象的实例
		var xhr = new XMLHttpRequest();
		//open(method,url,syn) 创建请求 method类型为get/post
		/*url Controller地址
			syn:可选 意思代表是否需要异步请求  默认是true 
				false:同步请求，等服务器执行完毕以后在继续往下执行（没有意义）
		*/
		//动态获取输入框的值
		var input = document.getElementById("uname");
		var uname=input.value;
		
		xhr.open("get","/user/reg?uname="+uname);

		//找监听函数，实时关注请求的状态变化，等数据接收成功以后再去取数据
		xhr.onreadystatechange =function(){
			/* 
				readyState：
				  2.请求完成
				  3.请求成功，正在接收数据
				  4.数据接受成功
			  
			 	status：服务器返回的状态码
			 		200  OK
			 		500 服务器异常
			 		404 资源未找到
			*/
			if(xhr.readyState==4&& xhr.status==200){
				//接收后台的请求响应 不能直接获取值，可能后台服务器还没有做出响应
				var msg = xhr.responseText;
					var div = document.getElementById("msg");
				//用户名重复
				if(msg=='false'){
					div.innerText="用户名已经注册";
				}else{
					div.innerText="";
				}
			}
		}
		//send() 发送请求
		xhr.send();
	}

</script>
</head>
<body>
	<form action="">
		<div id="msg" style="color: red"></div>
		用户名:<input type="text" id="uname" name="username" onblur="check()"><br>
		密码:<input type="password" id="pwd" name="password"><br>
		<input type="button" value="注册"><br>
	</form>
</body>
</html>