JavaScript的BOM和DOM对象操作与设置顶级窗口------JavaScript

小咪咪 2024-02-19 11:31 29阅读 0赞

>     <!DOCTYPE html>
>     
>     <html lang="en" id="myHtml">
>     	<head>
>     		
>     		<meta charset="UTF-8">
>     		<meta name="viewport" content="width=device-width, initial-scale=1.0">
>     		<title>HtmlAll</title>
>     		<style type="text/css">
>     			span
>     			{
>     				color: red;
>     				font-size: 12px;
>     			}
>     		</style>
>     	</head>
>     	<body>
>     		
>     		
>     		
>     		<script type="text/javascript">
>     			window.onload = function()
>     			{
>     				var UF = document.getElementById("usernameError");
>     				//通过浏览器窗体获取了html元素
>     				document.getElementById("btn").onclick = function()
>     				{
>     					alert(btn);
>     				}
>     				document.getElementById("get").onclick = function()
>     				{
>     					alert(document.getElementById("txt").value);
>     					document.getElementById("nwx").value = "jack";
>     				}
>     				var un = document.getElementById("username");
>     				un.onblur = function()
>     				{
>     					username = un.value;
>     					username = username.trim();
>     					if(username)
>     					{
>     						//代表非空
>     						if(username.length < 6 || username.length > 14)
>     						{
>     							//用户名长度非法
>     							UF.innerText = "用户名必须在6到14之间";
>     						}
>     						else
>     						{
>     							//用户名长度合法
>     							//判断是否有非法字符
>     							var regExp = /^[A-Za-z0-9]+$/;
>     							if(regExp.test(username))
>     							{
>     								//合法
>     							}
>     							else
>     							{
>     								//不合法
>     								UF.innerText = "用户名只能由数字和字母组成";
>     							}
>     						}
>     					}
>     					else
>     					{
>     						//代表空
>     						//提示信息
>     						UF.innerText = "用户名不能为空";
>     					}
>     				}
>     				un.onfocus = function()
>     				{			
>     					//这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理
>     					if(UF.innerText != "")
>     					{
>     						//清空空格内容
>     						un.value = "";
>     					}
>     					//清空提示信息
>     					UF.innerText = "";
>     				}
>     				document.getElementById("pwd2").onblur = function()
>     				{
>     					var pwd1 = document.getElementById("pwd1").value;
>     					var pwd2 = document.getElementById("pwd2").value;
>     					if(pwd1 != pwd2)
>     					{
>     						//密码错误的提示标签提示错误
>     						document.getElementById("pwdError").innerText = "两次输入的密码不一致";
>     					}
>     					if(pwd1 === "" || pwd2 === "")
>     					{
>     						document.getElementById("pwdError").innerText = "密码不能为空";
>     					}
>     				}
>     				document.getElementById("pwd2").onfocus = function()
>     				{
>     					if(document.getElementById("pwdError").innerText != "")
>     					{
>     						document.getElementById("pwdError").innerText = "";
>     					}
>     				}
>     				document.getElementById("email").onblur = function()
>     				{
>     					var email = document.getElementById("email").value;
>     					var emailRegExp = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
>     					if(emailRegExp.test(email))
>     					{
>     						
>     					}
>     					else
>     					{
>     						//没过
>     						document.getElementById("emailnameError").innerText = "必须输入一个邮箱";
>     					}
>     				}
>     				document.getElementById("email").onfocus = function()
>     				{
>     					if(document.getElementById("emailnameError").innerText != "")
>     					{
>     						document.getElementById("emailnameError").innerText = "";
>     					}
>     				}
>     				document.getElementById("myForm").onsubmit = function()
>     				{
>     					
>     				}
>     				document.getElementById("update").onclick = function()
>     				{
>     					document.getElementById("username").onblur();
>     					document.getElementById("pwd2").onblur();
>     					document.getElementById("email").onblur();
>     					var emailnameError = document.getElementById("emailnameError").innerText;
>     					var emailnameError = document.getElementById("pwdError").innerText;
>     					if(UF.innerText === "" && emailnameError === "" && pwdError === "")
>     					{
>     						document.getElementById("myForm").submit();
>     					}
>     					else
>     					{
>     						alert("输入信息有误");
>     					}
>     				}
>     				var aihaos = document.getElementsByName("aihao");
>     				document.getElementById("firstCheck").onclick = function()
>     				{
>     					var flag = document.getElementById("firstCheck");					
>     					// if(flag.checked)
>     					// {
>     					// 	//全选
>     					// 	//返回的是多个对象
>     					// 	for(var i = 0;i < aihaos.length;i++)
>     					// 	{
>     					// 		aihaos[i].checked = true;
>     					// 	}
>     					// }
>     					// else
>     					// {
>     					// 	//取消全选
>     					// 	//返回的是多个对象
>     					// 	for(var i = 0;i < aihaos.length;i++)
>     					// 	{
>     					// 		aihaos[i].checked = false;
>     					// 	}
>     					// }
>     					//简便写法
>     					for(var i = 0;i < aihaos.length;i++)
>     					{
>     						aihaos[i].checked = flag.checked;
>     					}
>     				}
>     				for(var i = 0;i < aihaos.length;i++)
>     				{
>     					aihaos[i].onclick = function()
>     					{
>     						var count = 0;
>     						//总选中量和被选中量相同,全选打勾
>     						for(var i = 0;i < aihaos.length;i++)
>     						{
>     							if(aihaos[i].checked)
>     							{
>     								count++;
>     							}
>     						}
>     						//简便写法
>     						document.getElementById("firstCheck").checked = (count == aihaos.length);
>     						// if(count == aihaos.length)
>     						// {
>     						// 	document.getElementById("firstCheck").checked = true;
>     						// }
>     						// else
>     						// {
>     						// 	document.getElementById("firstCheck").checked = false;
>     						// }
>     					}
>     				}
>     				document.getElementById("setWindow").onclick = function()
>     				{
>     					//如果当前窗口不是顶级窗口,设置为顶级窗口
>     					//window是当前浏览器窗口,代表002
>     					//以下代码的意思是,因为我们当前窗口是002,他不是001,所以001的window.self不是window.top
>     					//所以会将002的当前窗口修改为了001
>     					if(window.top != window.self)
>     					{
>     						//设置当前窗口为顶级窗口
>     						//window.self.location这个是001
>     						//当前的window.top.location还是002
>     						//触发后修改window.top.location为001
>     						window.top.location = window.self.location;
>     					}
>     				}
>     				document.getElementById("provinceList").onchange = function()
>     				{
>     					alert(document.getElementById("provinceList").value);
>     				}
>     				var code;
>     				document.getElementById("GetTime").onclick = function()
>     				{
>     					code = window.setInterval(displayTime,100);
>     				}
>     				function displayTime()
>     				{
>     					//获取系统当前时间
>     					var Time = new Date();
>     					//通过日期Date对象获取年月日
>     					var year = Time.getFullYear();
>     					//获取月份,但是是0到11,所以要加1
>     					var month = Time.getMonth();
>     					//获取的一周的第几天
>     					var day = Time.getDate();
>     					//怎么获取毫秒数
>     					var times = Time.getTime();
>     					//转换本地语言的日期格式
>     					Time = Time.toLocaleString();
>     					document.getElementById("TimeDiv").innerText = Time;
>     				}
>     				document.getElementById("World!").onclick = function()
>     				{
>     					window.clearInterval(code);
>     				}
>     				document.getElementById("closeDE").onclick = function()
>     				{
>     					window.close();
>     				} 
>     				document.getElementById("chooseD").onclick = function()
>     				{
>     					//取消和确认会返回一个布尔类型
>     					var i = window.confirm("亲,确认删除吗");
>     					alert(i);
>     				}
>     				document.getElementById("forwords").onclick = function()
>     				{
>     					window.history.go(1);
>     				}
>     				document.getElementById("goBaidu").onclick = function()
>     				{
>     					//可以设置我们的链接为百度 
>     					var location = window.location;
>     					location.href = "http://www.baidu.com";
>     					//总结浏览器往服务器发请求
>     					//表单,超链接
>     					//document.location文本重定向
>     					//window.location窗口重定向
>     					//window.open()请求地址
>     					//以上所有方法都可以往服务器传送数据,只有表单提交的数据才是动态的(JSP可以动态)
>     				}
>     			}	
>     		</script>
>     		<input type="button" id="btn" value="hello"/>
>     		<input type="text" id="txt"/>
>     		<input type="button" id="get" value="获取文本的value"/>
>     		<input type="text" id="nwx"/>
>     		<input type="text" value="哈哈哈哈哈哈哈哈哈" onblur="alert(this.value)"/>
>     		<div>
>     			<table>
>     				<form id="myForm" action="http://www.baidu.com">
>     					<tr>
>     						<th>
>     							用户名:
>     						</th>
>     						<th>
>     							<input type="text" id="username"/>
>     							
>     						</th>
>     						<th>
>     							<span id="usernameError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							密码:
>     						</th>
>     						<th>
>     							<input id="pwd1" type="text"/>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							确认密码:
>     						</th>
>     						<th>
>     							<input id="pwd2" type="text"/>
>     						</th>
>     						<th>
>     							<span id="pwdError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							邮箱:
>     						</th>
>     						<th>
>     							<input id="email" type="email"/>							
>     						</th>
>     						<th>
>     							<span id="emailnameError"></span>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							注册或重置
>     						</th>
>     						<th>
>     							<input id="update" type="button" value="注册"/>
>     							<input type="reset" value="重置"/>
>     						</th>
>     					</tr>
>     				</form>
>     			</table>
>     		</div>
>     		<div>
>     			<table>
>     				<form>
>     					<tr>
>     						<th>
>     							<th>
>     								<input type="checkbox" name="aihao"/>抽烟
>     							</th>
>     							<th>
>     								<input type="checkbox" name="aihao"/>喝酒
>     							</th>
>     							<th>
>     								<input type="checkbox" name="aihao"/>烫头
>     							</th>
>     						</th>
>     					</tr>
>     					<tr>
>     						<th>
>     							<th>
>     								<input type="checkbox" id="firstCheck"/>全选
>     							</th>
>     						</th>
>     					</tr>
>     				</form>
>     			</table>
>     		</div>
>     		<div>
>     			<select id="provinceList">
>     				<option selected>请选择省份</option>
>     				<option value="河北省">河北省</option>
>     				<option value="河南省">河南省</option>
>     				<option value="山东省">山东省</option>
>     				<option value="山西省">山西省</option>
>     				<option value="陕西省">陕西省</option>
>     			</select>
>     			<input type="button" value="获取时间" id="GetTime"/>
>     			<input type="button" value="扎瓦鲁多" id="World!"/>
>     		</div>
>     		<div id="TimeDiv"></div>
>     		<input type="button" value="关闭" id="closeDE"/>
>     		<input type="button" id="chooseD" value="确认"/>
>     		<a href="file:///C:/Users/15713/Desktop/Demo/New.html">跳转页面</a>
>     		<input type="button" value="前进" id="forwords"/>
>     		<input type="button" value="百度" id="goBaidu">
>     		<input type="button" value="设置顶级窗口" id="setWindow"/>
>     	</body>
>     </html>
> 
> <!DOCTYPE html>  
>   
> <html lang="en" id="myHtml">  
> <head>  
>   
> <meta charset="UTF-8">  
> <meta name="viewport" content="width=device-width, initial-scale=1.0">  
> <title>HtmlAll</title>  
> <style type="text/css">  
> span  
> \{  
> color: red;  
> font-size: 12px;  
> \}  
> </style>  
> </head>  
> <body>  
>   
>   
>   
> <script type="text/javascript">  
> window.onload = function()  
> \{  
> var UF = document.getElementById("usernameError");  
> //通过浏览器窗体获取了html元素  
> document.getElementById("btn").onclick = function()  
> \{  
> alert(btn);  
> \}  
> document.getElementById("get").onclick = function()  
> \{  
> alert(document.getElementById("txt").value);  
> document.getElementById("nwx").value = "jack";  
> \}  
> var un = document.getElementById("username");  
> un.onblur = function()  
> \{  
> username = un.value;  
> username = username.trim();  
> if(username)  
> \{  
> //代表非空  
> if(username.length < 6 || username.length > 14)  
> \{  
> //用户名长度非法  
> UF.innerText = "用户名必须在6到14之间";  
> \}  
> else  
> \{  
> //用户名长度合法  
> //判断是否有非法字符  
> var regExp = /^\[A-Za-z0-9\]+$/;  
> if(regExp.test(username))  
> \{  
> //合法  
> \}  
> else  
> \{  
> //不合法  
> UF.innerText = "用户名只能由数字和字母组成";  
> \}  
> \}  
> \}  
> else  
> \{  
> //代表空  
> //提示信息  
> UF.innerText = "用户名不能为空";  
> \}  
> \}  
> un.onfocus = function()  
> \{  
> //这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理  
> if(UF.innerText != "")  
> \{  
> //清空空格内容  
> un.value = "";  
> \}  
> //清空提示信息  
> UF.innerText = "";  
> \}  
> document.getElementById("pwd2").onblur = function()  
> \{  
> var pwd1 = document.getElementById("pwd1").value;  
> var pwd2 = document.getElementById("pwd2").value;  
> if(pwd1 != pwd2)  
> \{  
> //密码错误的提示标签提示错误  
> document.getElementById("pwdError").innerText = "两次输入的密码不一致";  
> \}  
> if(pwd1 === "" || pwd2 === "")  
> \{  
> document.getElementById("pwdError").innerText = "密码不能为空";  
> \}  
> \}  
> document.getElementById("pwd2").onfocus = function()  
> \{  
> if(document.getElementById("pwdError").innerText != "")  
> \{  
> document.getElementById("pwdError").innerText = "";  
> \}  
> \}  
> document.getElementById("email").onblur = function()  
> \{  
> var email = document.getElementById("email").value;  
> var emailRegExp = /^\[A-Za-z0-9\]+(\[-.\_\]\[A-Za-z0-9\]+)\*@\[A-Za-z0-9\]+(-\[A-Za-z0-9\]+)\*(\\.\[A-Za-z\]\{2,6\}|\[A-Za-z\]\{2,4\}\\.\[A-Za-z\]\{2,3\})$/;  
> if(emailRegExp.test(email))  
> \{  
>   
> \}  
> else  
> \{  
> //没过  
> document.getElementById("emailnameError").innerText = "必须输入一个邮箱";  
> \}  
> \}  
> document.getElementById("email").onfocus = function()  
> \{  
> if(document.getElementById("emailnameError").innerText != "")  
> \{  
> document.getElementById("emailnameError").innerText = "";  
> \}  
> \}  
> document.getElementById("myForm").onsubmit = function()  
> \{  
>   
> \}  
> document.getElementById("update").onclick = function()  
> \{  
> document.getElementById("username").onblur();  
> document.getElementById("pwd2").onblur();  
> document.getElementById("email").onblur();  
> var emailnameError = document.getElementById("emailnameError").innerText;  
> var emailnameError = document.getElementById("pwdError").innerText;  
> if(UF.innerText === "" && emailnameError === "" && pwdError === "")  
> \{  
> document.getElementById("myForm").submit();  
> \}  
> else  
> \{  
> alert("输入信息有误");  
> \}  
> \}  
> var aihaos = document.getElementsByName("aihao");  
> document.getElementById("firstCheck").onclick = function()  
> \{  
> var flag = document.getElementById("firstCheck");  
> // if(flag.checked)  
> // \{  
> // //全选  
> // //返回的是多个对象  
> // for(var i = 0;i < aihaos.length;i++)  
> // \{  
> // aihaos\[i\].checked = true;  
> // \}  
> // \}  
> // else  
> // \{  
> // //取消全选  
> // //返回的是多个对象  
> // for(var i = 0;i < aihaos.length;i++)  
> // \{  
> // aihaos\[i\].checked = false;  
> // \}  
> // \}  
> //简便写法  
> for(var i = 0;i < aihaos.length;i++)  
> \{  
> aihaos\[i\].checked = flag.checked;  
> \}  
> \}  
> for(var i = 0;i < aihaos.length;i++)  
> \{  
> aihaos\[i\].onclick = function()  
> \{  
> var count = 0;  
> //总选中量和被选中量相同,全选打勾  
> for(var i = 0;i < aihaos.length;i++)  
> \{  
> if(aihaos\[i\].checked)  
> \{  
> count++;  
> \}  
> \}  
> //简便写法  
> document.getElementById("firstCheck").checked = (count == aihaos.length);  
> // if(count == aihaos.length)  
> // \{  
> // document.getElementById("firstCheck").checked = true;  
> // \}  
> // else  
> // \{  
> // document.getElementById("firstCheck").checked = false;  
> // \}  
> \}  
> \}  
> document.getElementById("setWindow").onclick = function()  
> \{  
> //如果当前窗口不是顶级窗口,设置为顶级窗口  
> //window是当前浏览器窗口,代表002  
> //以下代码的意思是,因为我们当前窗口是002,他不是001,所以001的window.self不是window.top  
> //所以会将002的当前窗口修改为了001  
> if(window.top != window.self)  
> \{  
> //设置当前窗口为顶级窗口  
> //window.self.location这个是001  
> //当前的window.top.location还是002  
> //触发后修改window.top.location为001  
> window.top.location = window.self.location;  
> \}  
> \}  
> document.getElementById("provinceList").onchange = function()  
> \{  
> alert(document.getElementById("provinceList").value);  
> \}  
> var code;  
> document.getElementById("GetTime").onclick = function()  
> \{  
> code = window.setInterval(displayTime,100);  
> \}  
> function displayTime()  
> \{  
> //获取系统当前时间  
> var Time = new Date();  
> //通过日期Date对象获取年月日  
> var year = Time.getFullYear();  
> //获取月份,但是是0到11,所以要加1  
> var month = Time.getMonth();  
> //获取的一周的第几天  
> var day = Time.getDate();  
> //怎么获取毫秒数  
> var times = Time.getTime();  
> //转换本地语言的日期格式  
> Time = Time.toLocaleString();  
> document.getElementById("TimeDiv").innerText = Time;  
> \}  
> document.getElementById("World!").onclick = function()  
> \{  
> window.clearInterval(code);  
> \}  
> document.getElementById("closeDE").onclick = function()  
> \{  
> window.close();  
> \}  
> document.getElementById("chooseD").onclick = function()  
> \{  
> //取消和确认会返回一个布尔类型  
> var i = window.confirm("亲,确认删除吗");  
> alert(i);  
> \}  
> document.getElementById("forwords").onclick = function()  
> \{  
> window.history.go(1);  
> \}  
> document.getElementById("goBaidu").onclick = function()  
> \{  
> //可以设置我们的链接为百度  
> var location = window.location;  
> location.href = "http://www.baidu.com";  
> //总结浏览器往服务器发请求  
> //表单,超链接  
> //document.location文本重定向  
> //window.location窗口重定向  
> //window.open()请求地址  
> //以上所有方法都可以往服务器传送数据,只有表单提交的数据才是动态的(JSP可以动态)  
> \}  
> \}  
> </script>  
> <input type="button" id="btn" value="hello"/>  
> <input type="text" id="txt"/>  
> <input type="button" id="get" value="获取文本的value"/>  
> <input type="text" id="nwx"/>  
> <input type="text" value="哈哈哈哈哈哈哈哈哈" οnblur="alert(this.value)"/>  
> <div>  
> <table>  
> <form id="myForm" action="http://www.baidu.com">  
> <tr>  
> <th>  
> 用户名:  
> </th>  
> <th>  
> <input type="text" id="username"/>  
>   
> </th>  
> <th>  
> <span id="usernameError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 密码:  
> </th>  
> <th>  
> <input id="pwd1" type="text"/>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 确认密码:  
> </th>  
> <th>  
> <input id="pwd2" type="text"/>  
> </th>  
> <th>  
> <span id="pwdError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 邮箱:  
> </th>  
> <th>  
> <input id="email" type="email"/>  
> </th>  
> <th>  
> <span id="emailnameError"></span>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> 注册或重置  
> </th>  
> <th>  
> <input id="update" type="button" value="注册"/>  
> <input type="reset" value="重置"/>  
> </th>  
> </tr>  
> </form>  
> </table>  
> </div>  
> <div>  
> <table>  
> <form>  
> <tr>  
> <th>  
> <th>  
> <input type="checkbox" name="aihao"/>抽烟  
> </th>  
> <th>  
> <input type="checkbox" name="aihao"/>喝酒  
> </th>  
> <th>  
> <input type="checkbox" name="aihao"/>烫头  
> </th>  
> </th>  
> </tr>  
> <tr>  
> <th>  
> <th>  
> <input type="checkbox" id="firstCheck"/>全选  
> </th>  
> </th>  
> </tr>  
> </form>  
> </table>  
> </div>  
> <div>  
> <select id="provinceList">  
> <option selected>请选择省份</option>  
> <option value="河北省">河北省</option>  
> <option value="河南省">河南省</option>  
> <option value="山东省">山东省</option>  
> <option value="山西省">山西省</option>  
> <option value="陕西省">陕西省</option>  
> </select>  
> <input type="button" value="获取时间" id="GetTime"/>  
> <input type="button" value="扎瓦鲁多" id="World!"/>  
> </div>  
> <div id="TimeDiv"></div>  
> <input type="button" value="关闭" id="closeDE"/>  
> <input type="button" id="chooseD" value="确认"/>  
> <a href="file:///C:/Users/15713/Desktop/Demo/New.html">跳转页面</a>  
> <input type="button" value="前进" id="forwords"/>  
> <input type="button" value="百度" id="goBaidu">  
> <input type="button" value="设置顶级窗口" id="setWindow"/>  
> </body>  
> </html>