Day22(javaScript)_javascript document.subform-优快云博客

DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		 js是面向对象的语音。通过js可以网页进行操作
		 网页是由一个个标签构成的，那么操作网页本质上就是操作标签
		  Dom是Document Object Model文档对象模型
		  在js中，认为网页中的每个标签就是一个对象（实际存在，可以使用）
		  操作标签其实就是操作对象
		  Dom对象，是对这一类对象的统称
		  js中如何获得到网页中的标签？
			要操作，先得到
			有四种方式获得标签
			window是浏览器窗口，是js中最大的对象
			document是一个文档对象，表示整个html文档
			document.getElementById();通过标签的id属性，获得到网页中唯一的一个标签
			js对标签的3中操作：
				1.操作标签的属性  
						获取属性值 给属性赋值 tobj2.value = tobj1.value;
						bid.bgColor = color;
				2.操作标签体中的内容
				3.操作标签的css
		 -->
		<script type="text/javascript">
			// window.document
			//document.getElementById("");
			function test()
			{
				//获得文本框1的值
				var tobj1 = document.getElementById("tid1");
				//document.getElementById("tid1")返回的是一个对象 获得的是文本框标签对象
				/* console.log(tobj1.value);
				console.log(tobj1.type);
				console.log(tobj1.id); */
				var tobj2 = document.getElementById("tid2");
				//把框1的值赋给框2
				tobj2.value = tobj1.value;
				tobj1.value = "";
				tobj1.type = "radio"//变成单选框
			}
			function changebgcolor(color){
				var bobj = document.getElementById("bid");
				bid.bgColor = color;
			}
		</script>
	</head>
	<body id="bid">
		<input type="text" id="tid1" value=""/><!-- id中数字不能开头 -->
		<input type="text" id="tid2" value="" />
		<input type="button" value="测试按钮" />
		<input type="button" value="红色" onclick="changebgcolor('red')" />
		<input type="button" value="绿色"  onclick="changebgcolor('green')" />
		<input type="button" value="蓝色"   onclick="changebgcolor('blue')"/>
		</body>
		</body>
		</body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		 js是面向对象的语音。通过js可以网页进行操作
		 网页是由一个个标签构成的，那么操作网页本质上就是操作标签
		  Dom是Document Object Model文档对象模型
		  在js中，认为网页中的每个标签就是一个对象（实际存在，可以使用）
		  操作标签其实就是操作对象
		  Dom对象，是对这一类对象的统称
		  js中如何获得到网页中的标签？
			要操作，先得到
			有四种方式获得标签
			window是浏览器窗口，是js中最大的对象
			document是一个文档对象，表示整个html文档
			document.getElementById();通过标签的id属性，获得到网页中唯一的一个标签
			js对标签的3中操作：
				1.操作标签的属性  
						获取属性值 给属性赋值 tobj2.value = tobj1.value;
						bid.color = color;
				2.操作标签体中的内容
						tobj2.innerHTML = tobj1.innerHTML;连同子标签一起获得
				3.操作标签的css
		 -->
		<script type="text/javascript">
			// window.document
			//document.getElementById("");
			function test()
			{
				var dobj1 = document.getElementById("div1");
				var dobj2 = document.getElementById("div2");
				dobj2.innerHTML=dobj1.innerHTML;
				//操作css
				 dobj1.style.width="200px";
				dobj1.style.height="200px";
				dobj1.style.background="green";
			}
			</script>
	</head>
	<body>
		<div id="div1">第一个div</div>
		<div id="div2"></div>
		<input type="button" value="测试按钮" onclick="test()" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		 js是面向对象的语音。通过js可以网页进行操作
		 网页是由一个个标签构成的，那么操作网页本质上就是操作标签
		  Dom是Document Object Model文档对象模型
		  在js中，认为网页中的每个标签就是一个对象（实际存在，可以使用）
		  操作标签其实就是操作对象
		  Dom对象，是对这一类对象的统称
		  js中如何获得到网页中的标签？
			要操作，先得到
			有四种方式获得标签
			window是浏览器窗口，是js中最大的对象
			document是一个文档对象，表示整个html文档
			document.getElementById();通过标签的id属性，获得到网页中唯一的一个标签
			document.getElementsByTagName("input");通过标签名获得
			var objs = document.getElementsByClassName("ck");通过class属性获得
			getElementsByName("hobby");通过标签name属性获得
			以上3种获取到的都是一个集合对象（数组），即使获取到的只有一个标签对象，也是一个集合
			js对标签的3中操作：
				1.操作标签的属性  
						获取属性值 给属性赋值 tobj2.value = tobj1.value;
						bid.color = color;
				2.操作标签体中的内容
						tobj2.innerHTML = tobj1.innerHTML;连同子标签一起获得
				3.操作标签的css
		 -->
		<script type="text/javascript">
			function test()
			{
				//获得到多个标签，获得到之后，一个标签集合（数组）
				// var objs = document.getElementsByTagName("input");
				// var objs = document.getElementsByClassName("ck");
				 var objs = document.getElementsByName("hobby");
				 //对集合进行循环便遍历
				 console.log(objs);
				 for(var i=0;i<objs.length;i++)
				 {
					//console.log(objs[i]);
					//objs[i].checked ="checked";
					objs[i].checked ="true";
				 }
				//alert(objs.length);
			}
			</script>
	</head>
	<body>
		<input type="checkbox" class="ck"  name="hobby"/>
		<input type="checkbox" class="ck" name="hobby"/>
		<input type="checkbox" class="ck" name="hobby"/>
		<input type="checkbox"  name="hobby"/>
		<input type="checkbox" name="hobby" />
		<input type="button" value="全选" onclick="test()" />
	</body>
</html>

表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function subform()
			{
				//验证条件
				var accobj = document.getElementById("accountid");
				var account =  accobj.value;
				if(account.length == 0) 
				{
					document.getElementById("accountMsgid").innerHTML = "不能为空";
					document.getElementById("accountMsgid").style.color = "darkred"
					return;
				}
				/* else{
					document.getElementById("accountMsgid").innerHTML = "√";
					document.getElementById("accountMsgid").style.color = "darkgreen"
				} */
				if(account.length <6||account.length>10)
				{
					document.getElementById("accountMsgid").innerHTML = "账号的长度区间在6-10位之间";
					document.getElementById("accountMsgid").style.color = "darkred"
					return;
				}
				else{
					document.getElementById("accountMsgid").innerHTML = "√";
					document.getElementById("accountMsgid").style.color = "darkgreen"
				}
				//密码验证
				var passwrd = document.getElementById("passwordid");
				var password =  passwrd.value;
				if(password.length == 0) 
				{
					document.getElementById("passwordMsgid").innerHTML = "密码不能为空!";
					document.getElementById("passwordMsgid").style.color = "darkred"
					return;
				}
				else{
					document.getElementById("passwordMsgid").innerHTML = "√";
					document.getElementById("passwordMsgid").style.color = "darkgreen"
				} 
				document.getElementById("formID").submit();
				//在js种获得表单对象，并提交表单数据
			}
		</script>
	</head>
	<body>
		<!-- 
		 对表单数据验证，减少一些无效的数据提交到服务器
		 在提交表单之前，对表单数据进行验证，满足我们的输入条件，就提交表单，否则不提交
		 -->
		 <form action="server.html" method="get" id="formID">
			 账号<input type="text" id="accountid"/><br/>
			 <span id="accountMsgid"></span><br/>
			 密码<input type="password" id="passwordid"/><br/>
			 <span id="passwordMsgid"></span><br/>
			 <input type="button" value="保存" onclick="subform()" />
		 </form>
	</body>
</html>

正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function subform()
			{
				var account = document.getElementById("accountid").value;
				//定义一个正则表达式
				//var reg = new RegExp("a");
				var reg = /^\d$/;//以数字开头  
				//\d*零次或多次  \d+ 一次或多次  电话号码：1[3578]\d{9} 字母[a-zA-Z]+  有加号就是任意个
				//\w[0-9a-zA-z_]
				var res = reg.test(account);
				Console.log(res); 
			}
		</script>
	</head>
	<body>
		<!-- 
		 对表单数据验证，减少一些无效的数据提交到服务器
		 在提交表单之前，对表单数据进行验证，满足我们的输入条件，就提交表单，否则不提交
		 -->
		 <form action="" method="get" id="formID">
			 账号<input type="text" id="accountid"/><br/>
			 <span id="accountMsgid"></span><br/>
			 <!-- 密码<input type="password" id="passwordid"/><br/>
			 <span id="passwordMsgid"></span><br/> -->
			 <input type="button" value="保存" onclick="subform()" />
		 </form>
	</body>
</html>

浏览器对象

window

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		 内置对象 String Array Date Math RegExp
		 DOM  指的是网页中的标签
		 浏览器对象（BOM Browser ）
		 window：表示浏览器窗口，是js中最大的一个对象 ，其他的全局函数，对象都是它的成员
		 location
		 计时
		 
		 -->
		 <script type="text/javascript">
		 	/* window.document
			window.alert(); */
			//alert(window.innerWidth+":"+window.innerHeight);
		 </script>
	</head>
	<body>
	</body>
</html>

index：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function show(msg)
			{
				document.getElementById("showId").innerHTML= msg;
			}
			function openNewWindow(e)
			{
				var x = e.screenX;
				var y = e.screenY;//显示器内的坐标
				open("newpage.html","newName","width = 200,height=200, left ="+x+ ",top ="+y);
			}
		</script>
	</head>
	<body>
		<input type="button" value="打开新窗口" onclick="openNewWindow(event)"/>
		index
		<div id="showId">
			
		</div>
		<iframe src="child.html"></iframe><!-- 窗口 -->
	</body>
</html>

child：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function send()
			{
				var msg = document.getElementById("msgId").value;
				//window.parent;获得父级窗口
				//window.parent.document.getElementById("showId").innerHTML = msg;在自己窗口操作父级窗口的内容
				window.parent.show(msg);//在子集窗口中调用父级窗口函数
			}
		</script>
	</head>
	<body>
		child
		<input type="text" id="msgId" />
		<input type="button"  value="发送" onclick="send()"/>
	</body>
</html>

newpage：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		新页面
	</body>
</html>

location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function testAssign()
			{
				location.assign("newpage.html");//加载一个新页面到浏览器窗口，保留原来的
			}
			function testReplace()
			{
				location.replace("newpage.html");//用用新的替换原来的窗口中的页面
			}
			function testReload()
			{
				location.reload();//重新加载
			}
		</script>
	</head>
	<body>
		<input type="button" value="assign" onclick="testAssign()"/>
		<input type="button" value="replace" onclick="testReplace()"/>
		<input type="button" value="reload" onclick="testReload()"/>
	</body>
</html>

计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function demo()
			{
				alert("你好，计时")；
			}
			//demo();
			//setTimeout设置一个定时器在触发后，间隔5秒后调用指定的函数,只调用一次
			//@var t = setTimeout("demo()",5000);
			//setInterval设置一个定时器在触发后，间隔3秒后调用指定的函数,多次循环调用
			var t = setInterval("demo()",3000);
			function cancel()
			{
				//@clearTimeout(t);//取消定时任务@的是一组
				clearInterval(t);
			}
		</script>
	</head>
	<body>
		<input type="button" value="取消定时" onclick="cancel()"/>
	</body>
</html>