JS(二)之BOM

一、 BOM

解释： Browser Object Model，浏览器对象模型

概念：将浏览器的各个组成部分封装为对象

特点： BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。

作用：使JS能与浏览器对话

组成： Window(窗口对象)、Location(地址栏对象)、History(历史记录对象)、Navigator(浏览器对象)、Screen(显示器屏幕)

1.1 Window

解释：窗口(视图)对象，即地址栏下方的区域

使用方式： window.方法名();

注意：window可以省略(由于以前频繁的调用太麻烦，所以省略！)

常用的方法

1、与弹出有关的方法

1.1 alert()

特点：显示带有一段消息和一个确认按钮的警告框。

window.alert("我是警告弹框");

1.2 confirm()

特点：显示带有一段消息以及确认按钮和取消按钮的对话框。

返回值：boolean类型的返回值

简单应用：用户要执行某个操作(给予提示，让其重新确认，以防误点) ，例如：关闭页面时，给予其提示。

function disp_confirm() {
	var r = confirm("Press a button");//注意返回值类型(用户通过按钮来选择的)
	if (r == true) {
		document.write("You pressed OK!")
	} else {
		document.write("You pressed Cancel!")
	}
}
disp_confirm();//调用函数

1.3 prompt()

特点：显示可提示用户输入的对话框

参数：参数1是提示，参数2是默认的输入内容(可以不写)

var  text=window.prompt("请输入收货地址","陕西西安咸阳");	
document.write(typeof text);//string类型

相关链接：点击打开链接，点击打开链接(比较透彻)，点击打开链接

2、与定时器有关的方法(执行一次和循环执行)

2.1 setInterval()

参数：参数1是调用的的函数；参数2是延时的周期(多少秒之后执行)

特点：循环执行

说明：clearInterval()取消由 setInterval()设置的timeout

应用：动态显示时钟

<body>
    <span id="time" style="color:blue"></span>
</body>
	
<script type="text/javascript">
	function showtime() {
		var date = new Date();
		var datetime = date.toLocaleString(); //获取时间的字符串形式

		//在指定的位置显示，所以要获取标签对象(DOM),通过id获取
		var time = document.getElementById("time");
		//要注意：如果在块在span标签之前，由于加载顺序，尚未加载，获取的是null值
			
		time.innerHTML = datetime;//给此标签之间设置时间(内容)；注意"+="是追加，否则是覆盖
	}

	window.setInterval("showtime()", 1000);
</script>

实际应用：点击打开链接(看该作者的其它博客)，点击打开链接(重点)

2.2 setTimeout()

说明：在指定的毫秒数后调用函数或计算表达式

特点：只执行一次

说明：clearTimeout() 取消由 setTimeout() 方法设置的 timeout

定时器理解：理解为执行一个任务

应用：向屏幕中输入内容，执行三次结束

<script type="text/javascript">
	function add() {
	document.write("哈喽！");
}
var i = 1;
while (i <= 3) {
	window.setTimeout("add()",2000);
	i++;
}
document.write("hello kitty");
//疑问：为什么是hello kitty先输出屏幕(不是应该最后输出吗？)，然后执行的三次哈喽，覆盖掉原内容！---
</script>

补充：每个定时器开启的时候(set)，都有一个id，关闭定时器是针对此id的定时器进行关闭的

3 与打开关闭有关的方法

3.1 open()

说明：打开一个新的浏览器窗口或查找一个已命名的窗口

参数：打开目标的URL

返回值：返回新打开窗口的window引用(注意)

特点：打开了两个窗口

var newWindwo=window.open("http://www.baidu.com");
document.write(newWindwo);//[object Window]
document.write(this==newWindwo);//看是否是同一个窗口对象

3.2 close()

说明：关闭浏览器窗口

特点：谁调用我，我关谁
-------------------------------------

常用属性

作用：获取其他对象的属性：

history ：对 History 对象的只读引用(获取历史记录对象)
location ：用于窗口或框架的 Location 对象( 地址栏对象)
Navigator：对 Navigator 对象的只读引用()
Screen ：对 Screen 对象的只读引用(屏幕对象)
document：对Document对象的只读引用( 重点)

1.2 其它对象

Location：地址栏对象

获取方式：可以用window对象中的属性获取(见名知意)

                var locat=window.location;
		document.write(typeof locat);//object
		document.write(locat.Location);//未定义(说明地址栏没有内容，暂时获取不到！)
		locat.href="http://www.baidu.com";//通过地址栏对象，给地址栏赋值(打开的窗口会覆盖原来的窗口！)

属性：href---设置或获取当前的URL

方法：relod()--重新加载当前的文档对象

History：历史记录对象

获取方式：可以用window对象中的属性获取

方法：

forward()：等效前进的按钮

back()：下面一行代码执行的操作与单击后退按钮执行的操作一样

go(参数)：负数(后退几次)，0(刷新当前页面)，正数(前进几次)

属性：

length：获取的是从当前窗口开始的访问历史记录条数(默认是1表示当前)