第六章 BOM编程 ① 笔记

内容回顾

 理解文档对象模型
 熟练掌握document对象访问页面元素
 熟练掌握动态添加页面元素
 通过DOM操作html页面中的标签，属性，样式等。

本章内容

第一节 BOM编程

BOM:Browser Object Model，浏览器对象模型。
BOM编程: 在浏览器中，js代码是通过内嵌在浏览器中的javascript解释器来运行的。在浏览器加载页面的时候，如果页面中有js代码，js解释器会将浏览器的各个部分封装成对应的对象，然后通过访问这些对象的属性和方法来实现特定的功能，这就是BOM编程。

1.window对象

window对象是一个顶层对象，其中包含很多属性和方法，其中的属性也对应一些子对象:document,history,location,screen等等。

属性/方法	说明
history	历史记录对象
location	地址栏对象
document	文档对象
screen	客户窗口屏幕
event	客户窗口屏幕
stauts	状态条
open	打开子窗口的方法
close	关闭窗口的方法
alert	消息提示框
prompt	输入提示框
confirm	输入提示框

2.history历史记录对象

history记录了用户在浏览器中的浏览器记录，通过history可以访问用户的浏览记录历史信息。对应于浏览器工具栏上的前进和后退按钮。
方法:
history.forward():前往下一页
history.back():返回上一页
history.go(索引）:跳到某一页

<!DOCTYPE html>
<html>
	<head>
	<title> new document 1 -A </title>
	<meta charset="gbk"/>
	</head>
	<body>
		<h3>这是Noname1-A页面</h3>
		<a href="Noname1-B.html">Noname1-B页面</a>
		<!--
		history.forward(): 前进到历史记录中的下一个页面
		-->
		<input type="button" value="下一个页面" onclick="window.history.forward()"/
	</body>
	</html>
	<!DOCTYPE html>
	<html>
		<head>
		<title> new document 1 -B </title>
		<meta charset="gbk"/>
		</head>
		<body>
			<h3>Noname1-B页面</h3>
			<!--
			history.back(): 后退到历史记录中的上一个页面
			-->
			<input type="button" value="回退上一页" onclick="history.back()"/>
	</body>
</html>

3.location地址栏对象

URL ：统一资源占位符，定位符
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

<!DOCTYPE html>
<html>
	<head>
	<title> my page </title>
	<style type="text/css">
	</style>
	<script type="text/javascript">
		//当下拉框选项切换的时候，跳转网站
		function goWebSite(){
			//获取选中的网站
			var site = document.getElementById("website").value;
			//alert(site);
			//选中的站点数据不为空时，才跳转网站
			if(site!=""){
				//通过浏览器的地址栏对象，跳转页面
				window.location.href=site;
				}
		}
	</script>
	</head>
	<body>
		网址:
		<!--
		onchange:下拉选项切换时触发的事件
		-->
		<select id="website" onchange="goWebSite()">
		<option value="">请选择</option>
		<option value="http://www.baidu.com">百度</option>
		<option value="http://www.taobao.com">淘宝</option>
		<option value="http://www.jd.com">京东</option>
		</select>
	</body>
</html>

4.window对象的常用方法

	window.alert();//弹出消息框
	window.prompt();//输入消息框
	window.confirm();//确认框
	window.setTimeout(函数名,延时时间); //延迟指定时间(毫秒)调用一次函数
	window.setInterval(函数名,延时时间); //每隔特定时间(毫秒)，重复调用函数

定时器方法

setTimeout(函数名,延时时间) :延迟指定的时间后，执行一次函数
setInterval(函数名,延迟时间) :每隔指定的延迟时间，就执行一次函数

<!DOCTYPE html>
<html>
	<head>
		<title> my page </title>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			function test(){
				alert(123);
				//使用递归方式调用函数，实现每隔指定时间，调用一次的效果
				//等价于setInterval
				setTimeout("test()",3000);
			}
			//调用函数
			//test();
			//延迟调用
			//延迟时间是毫秒数:1s = 1000ms
			//延迟指定时间(毫秒数),调用一次函数
			//setTimeout(test,3000);
			//调用函数加双引号,函数后要加括号。函数外没有双引号时，直接写函数名
			setTimeout("test()",3000);
			//每隔指定时间调用一次函数
			//setInterval(test,3000);
		</script>
	</head>
	<body>
	</body>
</html>

电子时钟

<!DOCTYPE html>
<html>
	<head>
	<title> my page </title>
	<style type="text/css">
		#time
		{
			width:300px;
			height:100px;
			line-height:100px;
			border:2px solid black;
			text-align:center;
			font-size:20px;
		}
		</style>
		<script type="text/javascript">
			//显示系统时间
			function showTime()
			{
				//创建新的日期对象，用于获取当前的系统时间,并存入变量d中
				var d = new Date();
				//通过d获取系统日期的各个部分
				var year = d.getFullYear();
				//月份默认:0-11
				var month = d.getMonth()+1;
				var day = d.getDate();
				var hour = d.getHours();
				var min = d.getMinutes();
				var sec = d.getSeconds();
				//获取div元素
				var div = document.getElementById("time");
				//设置div的内容
				div.innerHTML=year+"年"+month+"月"+day+"日"+" "+
				hour+"时"+min+"分"+sec+"秒";
				//递归调用，实现循环处理的效果
				t = setTimeout(showTime,1000);
			}
			//定义变量，用于存储定时器对象
			var t;
			//通过开始函数，实现循环调用
			//函数命名要避免系统的关键字
			function startTime()
			{
				//setTimeout:会创建出一个定时器对象，我们可以保存这对象。
				//使用保存的对象，可以清除定时器
				//t = setTimeout(showTime,1000);
				showTime();
			}
			//停止计时
			function stopTime()
			{
				//将定时器对象清除，结束定时器效果
				clearTimeout(t);
			}
	</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="startTime()"/>
		<input type="button" value="停止" onclick="stopTime()"/>
		<hr/>
		<div id="time"></div>
	</body>
</html>

短信倒计时

<script type="text/javascript">
		//1.点击按钮按钮不可用
		//2.按钮上出现10s倒计时
		//3.倒计时结束，按钮恢复可用
		function sendCode(){
			//设置按钮元素禁用
			btnSend.disabled=true;
			var i=10;
			//每隔1s调用一次
			var t = setInterval(function(){
				//大于0做正常的提示
				if(i>=0){
					btnSend.value="发送验证码("+i+"s)";
					i--;
				}else{
					//小于0就停止
					clearInterval(t);
					//恢复按钮可用
					btnSend.disabled=false;
					//恢复内容
					btnSend.value="发送验证码";
				}
			},1000);
		}
		</script>
	</head>
	<body>
		验证码:
		<input type="text" />
		<input type="button"
		id="btnSend"
		value="发送验证码"
		onclick="sendCode()"
		/>
	</body>

5.HTML页面常用事件

onclick :元素的单击事件
onload :页面加载完成事件

<!DOCTYPE html >
<html>
	<head>
	<title> New Document </title>
	<meta charset="utf-8">
	<script type="text/javascript">
		//页面加载事件 window.onload
		//需求:页面显示之后，动态的设置标题和内容
		/*
		var bt = prompt("请输入新闻标题:","");
		var nr = prompt("请输入新闻内容:","");
		document.getElementById("title").innerHTML=bt;
		document.getElementById("content").innerHTML=nr;
		*/
		function test(){
			var bt = prompt("请输入新闻标题:","");
			var nr = prompt("请输入新闻内容:","");
			//innerHTML(元素内部内容)/outerHTML(包含元素自己的标签在内的内容):用于非表
			//value:用于表单元素的设值和取值
			document.getElementById("title").innerHTML=bt;
			document.getElementById("content").innerHTML=nr;
			//对比
			alert(document.getElementById("title").innerHTML);
			alert(document.getElementById("title").outerHTML);
		}
		//页面加载完成事件,test做事件绑定时，不要加括号
		//等页面中的所有元素都加载完成的时候，会触发该事件，并自动调用事件绑定的函数
		//window.onload=test; //这是事件函数绑定
		//绑定页面加载事件，关联一个匿名函数
		window.onload=function(){
			alert(123);
		}
	</script>
	</head>
	<body>
		<h1 id="title"></h1>
		<p id="content"></p>
	</body>
</html>

事件对象：IE事件对象模型，W3C事件对象

<!DOCTYPE html >
<html>
	<head>
	<title> New Document </title>
	<meta charset="utf-8">
	<style type="text/css">
		#mydiv{
			width:100px;
			height:100px;
			border:2px solid red;
		}
		#myspan{
			border:2px solid black;
		}
	</style>
	<script type="text/javascript">
		function test(e){
			//alert(123);
			//ie事件模型对象: window.event,
			// 包含了事件发生时的相关信息,比如鼠标事件,鼠标单击的位置,单击的目标
			// id: mydiv ===> document.getElementById("mydiv")
			// window.event.clientX:鼠标点击事件，x轴坐标
			// window.event.clientY:鼠标点击事件，y轴坐标
			// window.event.target：触发事件的目标元素
			// window.event.target.tagName: 事件元素的标签名(body,html,span,div)
			//mydiv.innerHTML=window.event.clientX+" "+window.event.clientY+"<br
			//mydiv.innerHTML+=window.event.target.tagName;
			//w3c事件模型对象: 通过事件绑定的函数，传入事件对象参数
			//e:代表w3c事件模型的事件对象
			// e.pageX:鼠标点击事件，x轴坐标
			// e.pageY:鼠标点击事件，y轴坐标
			// e.target：触发事件的目标元素
			// e.target.tagName: 事件元素的标签名(body,html,span,div)
			mydiv.innerHTML=e.pageX+" "+e.pageY;
			mydiv.innerHTML+=e.target.tagName;
		}
		//绑定文档的单击事件
		document.onclick=test;
	</script>
	</head>
	<body>
		<input type="button" value="测试按钮"/>
		<div id="mydiv"></div>
		<span id="myspan">这是一个内容</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title> my page </title>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			//绑定文档单击事件
			document.onclick=function(x){
				//获取IE的事件对象
				//var e = window.event;
				//获取触发事件的目标元素
				//alert(e.srcElement)
				//设置鼠标点击的位置
				//mydiv.innerHTML=e.clientX+" "+e.clientY;
				//W3C事件对象:
				//在与事件绑定的函数的参数中定义变量(名字随便起),当事件发生时，
				//浏览器会自动将事件对象传入该变量
				//获取w3c时间对象的目标元素
				//alert(x.srcElement);
			}
			//键盘按下
			document.onkeydown=function(e){
				//e.key:字符 e.keyCode:编码
				//alert(e.key);
				mydiv.innerHTML=e.key+" "+e.keyCode;
				//获取按键的键值
				switch(e.keyCode){
					case 37: //向左
						break;
					case 38: //向上
						break;
					case 39: //向右
						mydiv.style.left=(mydiv.offsetLeft+10)+"px";
					break;
						case 40: //向下
					break;
				}
			}
		</script>
	</head>
	<body>
		<div id="mydiv" style="border:1px solid red;width:100px;height:100px;posit
		这是一个DIV
		</div>
		<p id="myp" style="border:2px solid black;width:50px;height:50px;">
		这是一个P
		</p>
		<button type="button" id="btn">这是一个button</button>
	</body>
</html>