
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="10%,*">
        <frame src="head.html">
		
		<frameset cols="15%,*">
			  <frame src="left.html">
			  <frame src="right.html">
		</frameset>
	</frameset>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我是头部</h1>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我是侧边栏</h1>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我是主体部</h1>
	</body>
</html>

1.1.2、iframe

可以把window页面进行分割，是一个框架标签，可以和body一块使用


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="right.html" frameborder="1"></iframe>
		<h1>hello world</h1>
	</body>
</html>

1.1.3、confrim确认框架

confrim两个值确定（true）取消(false) var con = window.confrim(消息); 返回的类型为boolean


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<input type="button" value="删除" id="_delete">
	</body>
	<script>
		 var _delete=document.getElementById("_delete");
		 _delete.onclick=function(){
			if(confirm("你确认要删除我?")){
				alert("删除成功");
			}else{
				alert("谢谢你手下留情");
			}
			 
		 }
	</script>
</html>

1.1.4、时间周期

clearInterval()	取消由setInterval()设置的timeout
clearTimeout()	取消setTimeout()设置的timeout
setInterval()	指定时间周期
setTimeout()	在指定的毫秒数后调期函数或者计算表达式

案例让时间走动，进行开始或者停止控制


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
 
	<body>
		<span id="_time"></span>
		<input type="button" onclick="stopTime()" value="暂停时间">
		<input type="button" onclick="startTime()" value="开始时间">
	</body>
	<script>
        //设置时间周期，间隔一秒调用setTime函数
		var set_Time=setInterval("setTime()", 1000);
		window.onload = function() {
			var _time = document.getElementById("_time");
		}
		function setTime() {
			var date = new Date();
            //日期格式转换为字符串格式
			var time = date.toLocaleString();
            //替换内容
			_time.innerHTML = time;
		}
		function stopTime(){
            //消除时间周期
			clearTimeout(set_Time);
		}
		function startTime(){
           //重新设置时间周期
		   set_Time=setInterval("setTime()", 1000);
		}
		
	</script>
</html>

1.1.5、倒计时案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <!--设置倒计时时间-->
		<meta http-equiv="refresh" content="10;https://www.baidu.com">
		<title></title>
		
	</head>
	<body>
		还有<span id="time_m" style="color: orange; font-size: 18px;"></span>秒跳转到<a href="https://www.baidu.com">百度</a>
	</body>
	<script>
		var time_m=document.getElementById("time_m");
		var time=10;
	    window.onload=function(){
			var _time=setInterval("setTime()",1000);
		}	
		function setTime(){
			time_m.innerHTML=--time;
		}
	</script>
</html>

1.1.6、关闭、打开浏览器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open_Browser(){
				window.open("https://www.baidu.com");
			}
			function close_Browser(){
				window.close();
			}
		</script>
	</head>
	<body>
		<input type="button" value="打开浏览器" onclick="open_Browser()">
		<input type="button" value="关闭浏览器" onclick="close_Browser()">
	</body>
</html>

1.2、history对象

history对象包含用户访问过的url, 注意：一定是访问过的历史url

history是window对象的一部份，可以通过window.history属性进行访问

back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载hitory列表中的某一个具体的页面


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我是a页面</h1>
		<a href="b.html">跳转到b页面</a>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function backPage() {
				history.back();
			}
 
			function forwardPage() {
				history.forward();
			}
 
			function goPage() {
			/* 
			负数是指定上一个页（左边）  
			正数是指定下一个页（右边）  
			*/
				history.go(1)
			}
		</script>
	</head>
	<body>
		<h1>我是b页面</h1>
		<a href="c.html">跳转到c页面</a>
		<input type="button" value="返回上一页" onclick="backPage()">
		<input type="button" value="跳到下一页" onclick="forwardPage()"">
		<input type="button" value="指定跳转" onclick="goPage()">
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function goPage(){
				history.go(-2);//返回a页面
			}
		</script>
	</head>
	<body>
		<h1>我是c页面</h1>
		<input type="button" value="指定跳转" onclick="goPage()"">
	</body>
</html>

1.3、Location对象

Location对象是window对象的一部份，可以通过window.location属性来访问

location表示是当前浏览器的地址对象。浏览器的地址中主要保存的是访问某个网站的url地址


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
		function skip(){
			location.href="https://www.baidu.com";
		}
		
	</script>
	<body>
		<input type="button" value="跳转百度" onclick="skip()">
	</body>
</html>

2、DOM对象

2.1、document对象

Document对象代表整个html文档，可用来访问页面中的所有元素，快速获取html中的页面的标签对象。

document.getElementById()	返回指定id对象的引用
document.getElementsByName()	返回指定带有名称的对象集合
document.getElementsTagName()	返回指定带有标签名的对象集合
document.getElementsByClassName()	根据Class属性值获取元素对象们，返回值是一个数组
document.querySelector(选择器)	根据选择器，获取元素，适合选择一个（#id .class div）
document.querySelectorAll(css选择器)	根据css选择器获取元素，适合选择多个，返回是一个数组

1、querySelectorAll 是找出所有匹配的节点后，返回对应的元素节点数组.如果没有则返回undefinde。

2、querySelector 是找到一个后立刻返回找到的第一个节点对象，如果没有则返回null。

2.1.1、getElementById()

案例：显示/隐藏密码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		密码：<input type="password" name="pwd" id="pwd_id">
		<input type="button" value="显示/隐藏密码" onclick="changeType()"">
	</body>
	<script>
		var pwd=document.getElementById("pwd_id");
		function changeType(){
			if(pwd.type=="password"){
				pwd.type="text";
			}else if(pwd.type=="text"){
				pwd.type="password";
			}
			
		}
	</script>
</html>

2.1.2、getElementsByTagName()

案例：图片放大缩小


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<img src="../img/1.png" alt="" width="400px">
		<input type="button" value="放大" onclick="increate()">
		<input type="button" value="减小" onclick="decreate()">
	</body>
	<script>
        //方式一，返回的是数组
		var imgs=document.getElementsByTagName("img");
        //方式二，querySelectorAll("img") 返回也是数组 可以根据css选择器选中
		function increate(){
            //获取到的是img数组，所以取出数组中第一个图片
			imgs[0].width+=40;
		}
		function decreate(){
			
			imgs[0].width-=40;
		}
	</script>
</html>

2.1.3、getElementsByName()

案例：提交多选框后输出所选内容


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<input type="checkbox" name="hobby" value="悠悠球" />悠悠球
		<input type="checkbox" name="hobby" value="乒乓球" />乒乓球
		<input type="checkbox" name="hobby" value="足足球" />足足球
 
		<input type="button" value="提交" onclick="demo()" />
	</body>
	<script>
		
		function demo(){
            //获取到的元素对象是一个数组，所以需要进行遍历
			var hobby=document.getElementsByName("hobby");
			for(var i=0;i<hobby.length;i++){
				if(hobby[i].checked==true){
					console.info(hobby[i].value);
				}
			}
			
		}
	</script>
</html>

2.2、操作内容

2.2.1、相关属性

属性名	描述
element.innerText	获取或者修改元素的纯文本内容
element.innerHTML	获取或者修改元素的html内容
element.outerHTML	获取或者修改包含自身的html内容


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="myDiv">
			<h4>注释</h4>
			程序猿最讨厌自己写注释，
			同时也最讨厌别人不写注释
		</div>
	</body>
	<script>
		// element.innerText获取或者修改元素的纯文本内容
		// element.innerHTML获取或者修改元素的html内容
		// element.outerHTML获取或者修改包含自身的html内容
		var myDiv = document.getElementById("myDiv");
		console.log(myDiv.innerText);
		console.log(myDiv.innerText += "pppp");
 
		console.log(myDiv.innerHTML);
		console.log(myDiv.innerHTML += "aaasp");
 
		console.log(myDiv.outerHTML);
		console.log(myDiv.outerHTML += "pppp");
	</script>
</html>

innerText与innerHTML的区别：（经典面试题）
1、innerText 获取的是纯文本，innerHTML获取的是所有html内容。
2、innerText 设置到页面中的是纯文本，innerHTML设置到页面中的html会展示出外观效果。
3 innerHTML不包含自身，outerHTML包含自身的html内容。

2.3、常用的事件

点击事件

事件	描述
onclick	单击事件
ondblclick	双击事件

焦点事件

事件	描述
onblur	失去焦点
onfocus	元素获得焦点

加载事件

事件	描述
onload	页面加载完成后立即发生

鼠标事件

事件	描述
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开

键盘事件

事件	描述
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

改变事件

事件	描述
onchange	域的内容被改变

表单事件

事件	描述
onsubmit	提交按钮被点击

2.3.1、案例一（验证手机号码是否正确）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		手机号：<input type="text" placeholder="请输入手机号" id="phone" onblur="demo()"><span id="spanid"></span>
	</body>
	<script>
		function demo(){
			var regExp=new RegExp("^1[3456789]\\d{9}$")
			var spanid=document.getElementById("spanid");
			var phone=document.getElementById("phone");
			if(regExp.test(phone.value)){
				spanid.innerHTML="<font color=green>通过！</font>";
			}else{
				spanid.innerHTML="<font color=red>手机格式错误</font>";
			}
			
		}
	</script>
</html>

2.3.2、案例二鼠标悬浮切换图片


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="../img/2.png" alt="" class="img" width="450px">
	</body>
	<script>
		var _img=document.querySelector(".img");
		_img.onmouseover=function(){
			_img.src="../img/1.png";
		}
		_img.onmouseout=function(){
			_img.src="../img/2.png";
		}
	</script>
</html>

2.3.3、案例三鼠标按下松开切换背景颜色


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="input_id">
	</body>
	<script>
		var input_id=document.querySelector("#input_id");
		input_id.onkeydown=function(){
			input_id.style.background="pink";
		}
		input_id.onkeyup=function(){
			input_id.style.background="orange";
		}
	</script>
</html>

2.4、操作节点

标签名	创建标签
appendChild	为某一个标签，去添加子标签
removeChild	为某一个标签，删除孩子标签
setAttribute	为某一个标签添属性
removeAttribute	删除某一个标签中的属性

2.4.1、appendChild添加子标签


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 
	</head>
	<body>
		<ul id="myul">
			<li>jack</li>
			<li>rose</li>
		</ul>
 
	</body>
	<script>
         var myul=document.getElementById("myul");
		 // 创建li标签
		 var _li=document.createElement("li");
		 //创建文本
		 var _text=document.createTextNode("pink");
		 //把文本添加到li标签中
		 _li.appendChild(_text);
		 //添加到父级标签内
		 myul.appendChild(_li);
	</script>
</html>

2.4.2、removeChild删除子标签


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="myul">
			<li>jack</li>
			<li id="x1">rose</li>
			<li>tom</li>
			<li>mary</li>
		</ul>
		<input type="button" value="删除子标签" onclick="demo()">
	</body>
	<script>
		function demo(){
			var x1=document.getElementById("x1");
            //第一种方式
			// var myul=document.getElementById("myul");
			// myul.removeChild(x1);
            //第二种方式 parentNode是获取x1的父亲标签对象
			x1.parentNode.removeChild(x1);
		}
	</script>
</html>

删除全部


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="myul">
				<li>jack</li>
				<li id="x1">rose</li>
				<li>tom</li>
				<li>mary</li>
			</ul>
	<input type="button" value="删除全部" onclick="demo()">
	</body>
	<script>
		function demo(){
			var lis=document.querySelectorAll("li");
			for(let i=lis.length-1;i>=0;i--){
				lis[i].parentNode.removeChild(lis[i]);
			}
			
		}
	</script>
</html>

依次删除


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="myul">
			<li>jack</li>
			<li>rose</li>
			<li>tom</li>
			<li>mary</li>
		</ul>
		<input type="button" value="依次删除子标签" onclick="demo()">
	</body>
	<script>
          function demo(){
			  var lis=document.querySelectorAll("li");
              //每次删除数组第一个元素对象
			  lis[0].parentNode.removeChild(lis[0]);
		  }
	</script>
</html>

2.4.3、setAttribute添加属性

案例：清除所有input框历史记录


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="username" autocomplete="off">
		<input type="text" name="username">
		<input type="text" name="username">
		<input type="text" name="username">
		<input type="text" name="username">
	</body>
	<script>
		var inputs=document.querySelectorAll("input");
		for(let i=0;i<inputs.length;i++){
			inputs[i].setAttribute("autocomplete","off");
		}
	</script>
</html>

2.4.4、removeAttribute删除属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<input type="text" name="username" autocomplete="off">
		<input type="text" name="username">
		<input type="text" name="username">
		<input type="text" name="username">
		<input type="text" name="username">
	</body>
	<script>
		var inputs=document.querySelectorAll("input");
		for(let i=0;i<inputs.length;i++){
			inputs[i].removeAttribute("name");
		}
	</script>
</html>

2.5、操作CSS样式

通过js动态修改元素的样式。

2.5.1、设置一个CSS样式

js对象.style.样式名='样式值'

2.5.2、批量设置CSS样式

js对象.style.cssText='属性名：属性值;...'

2.5.3、通过class设置样式

js对象.className='样式名称1; 样式名称2;...'

2.5.4、案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pclass{
				color: aqua;
				border: 1px solid darkgoldenrod;
			}
		</style>
	</head>
	<body>
		<p id="p1">1. 设置一个css样式</p>
		<p id="p2">2. 批量设置css样式</p>
		<p id="p3">3. 通过class设置样式</p>
	</body>
	<script>
	var p1=document.getElementById("p1");
	p1.style.color="red";
	
	var p2=document.getElementById("p2");
	p2.style="color:red;border:1px solid yellow;font-size:20px";
	
	
	var p3=document.getElementById("p3");
	p3.className="pclass";
	
	</script>
</html>

3、表单验证


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input {
				outline: none;
			}
 
			#box {
				background-color: #F5F5F5;
				text-align: center;
				line-height: 50px;
				width: 350px;
				height: 350px;
				margin: 150px auto;
			}
 
			table {
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h1>注册</h1>
			<form action="#" method="get" onsubmit="return demo()">
				<table>
					<tr>
						<td>账号：</td>
						<td><input type="text" name="username" id="input_id" placeholder="请输入4-16位字母数字下划线"></td>
					</tr>
					<tr>
						<td>昵称：</td>
						<td><input type="text" name="name" id="name_id" placeholder="请输入以字母开头的4-15位字母数字"></td>
					</tr>
					<tr>
						<td>密码：</td>
						<td><input type="password" name="password" id="pwd_id" placeholder="请输入至少一个大写字母和一个小写字母的8-16位密码"></td>
					</tr>
					<tr>
						<td>确认密码：</td>
						<td><input type="password" name="password" id="re_pwd"></td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="submit" value="注册">
							<input type="reset">
						</td>
				
					</tr>
				</table>
			</form>
		</div>
 
	</body>
	<script>
		var inputs = document.getElementsByTagName("input");
		//关闭每个input框的历史记录
		for (let i = 0; i < inputs.length; i++) {
			inputs[i].setAttribute("autocomplete", "off");
		}
		//为每个tr添加属性居中属性
		var trs = document.getElementsByTagName("tr");
		for (let i = 0; i < trs.length; i++) {
			trs[i].setAttribute("align", "center");
		}
		var input_id = document.getElementById("input_id");
		var name_id = document.getElementById("name_id");
		var pwd_id=document.getElementById("pwd_id");
		var re_pwd=document.getElementById("re_pwd");
		var regExp = new RegExp("^\\w{4,16}$");
		//必须包含一个大写，一个小写字母，且长度为8到16位
		var pwdExp= new RegExp("^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$")
		var nameExp=new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,15}$") 
		//检查用户名是否符合正则表达式
		var checkUsername=input_id.onblur = function() {
			if (regExp.test(input_id.value)) {
				input_id.style.border = "2px solid green";
				return true;
			} else {
				input_id.style.border = "2px solid red";
				return false;
			}
		}
		//检查昵称是否符合正则表达式
		var checkName=name_id.onblur=function(){
			if (regExp.test(name_id.value)) {
				name_id.style.border = "2px solid green";
				return true;
			} else {
				name_id.style.border = "2px solid red";
				return false;
			}
		}
		//检查密码方法，里面有判断密码是否为空，重复密码是否和密码相同
		var checkpwd=pwd_id.onblur=function(){
			if(pwdExp.test(pwd_id.value)){
				pwd_id.style.border="2px solid green";
			    return true;	
			}else{
				pwd_id.style.border="2px solid red";
				return false;
			}
		}
		var check_repwd=re_pwd.onblur=function(){
			if(pwd_id.value==""||re_pwd.value==""){
				re_pwd.style.border = "2px solid red";
				pwd_id.style.border="2px solid red";
				return false;
			}
			if(pwd_id.value==re_pwd.value&&pwd_id.value!=""&&re_pwd.value!=""){
				re_pwd.style.border="2px solid green";
				return true;
			}else{
				re_pwd.style.border = "2px solid red";
				return false;
			}
		}
		//提交调用demo方法，判断以上所有方法是否同时满足
		function demo(){
			if(!(checkUsername()&&checkName()&&checkpwd()&&check_repwd())){
				return false;
			}
		}
	</script>
</html>

初加载效果

全部正确

重复密码错误

点击注册成功后，提交信息至后台，使用get方式会显示到地址栏，不过实际开发都会使用post方式提交到请求头里，这里为了方便演示才使用get方式。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/836907