javascript高级程序设计读书笔记--BOM

对BOM进行一下总结

1.  location 对象

location既是window也是document的属性，所以二者在使用的时候引用的是同一个location对象

location参数解析：

   location.href: 返回完整的url

location.host: 返回主机名和端口号。 eg: www.baidu.com：80

location.hostname: 返回主机名。 eg: www.baidu.com

location.search: 返回查询字符串。包括?.例如 ?q=javascript

location.protocol:返回协议名。例如： http：

location.pathname: 返回文件路径。例如： /search

location.port: 返回端口号。例如 80

对搜索字符串进行查询参数提取

<span style="font-size:18px;">function parseUrl(){
	// 如果查询字符串存在，返回？以后的字符。反则返回 ''
	var query = location.search.length? location.slice(1): '';

	var args = {}; // 用来保存查询参数
	// 对query进行分割。
	var item = query.length? query.split('&'):[];

	var keyVal;
	// 遍历item，将查询参数以 key，value形式保存到args
	item.forEach(function (ele, index) {
		keyVal = ele.split('=');
		args[keyVal[0]] = keyVal[1];
	});

	return args;

}</span>

location 位置操作

location.assign()。 传递一个url，将会打开新窗口。并生成一条历史记录

使用location.href以及window.location设置值打开新窗口调用该方法。

location.reload() 方法会优先选取比较有效的加载方式，即从缓存中加载页面。传参为true的时候，强制刷新，将会从服务器获取页面。

location.replace() 传入一个url的时候，将会生成新的历史记录。

即使用该方式加载一个新的页面的时候，无法返回到上一页面~

2. history 对象

history.go() 表示从历史记录中加载某一页面。

传入 负数 -n 的时候，便是后退 n个页面

传入 正数 n， 表示前进 n个页面

传入 字符串 str 的时候，将会优先加载最近的href中含有str的页面。如果历史记录不含有该字符串，就什么都不做。

history.back()   history.forward() 模仿浏览器的后退/前进按钮。每次跳转一个页面。

history.length 返回历史记录条数。通常用来判断是否直接打开某一个页面。

3. navigator 对象

经常被用来进行浏览器类型检测。常用的属性包括 useragent

详细的会在对javascript第九章进行总结之后再放上来

4. screen 对象

使用频率较低。主要是显示浏览器外部显示信息，例如： 宽高

5. window 对象（核心）

在js中，未使用var 声明的变量/方法会直接被归为window对象的属性/方法。 其中 全局变量不能被删除。而window对象的属性可以被删除。

<span style="font-size:18px;">color = "red";
console.log(window.color); // red
var blue = "blue"; 
console.log(delete blue); // false
console.log(delete color); // true</span>

窗口关系和框架。

在使用框架集的时候

top: 始终指向最外层的框架，也就是浏览器窗口

parent：指向当前框架的上层框架，可能等于top

self： 指向window对象

也可以使用window.frame[0],window.frame[1]来进行框架访问。

窗口位置及大小

resizeTo(w, h)表示调整大小至宽为w，高为h

resizeBy(w, h)表示在原基础上宽增加/减少 w， 高增加/减少h

moveTo(x, y)表示将浏览器窗口位置移动到屏幕 （x,y） 坐标处

moveBy(x, y)表示将浏览器窗口位置在原坐标基础上横坐标改变 x， 纵坐标改为 y

document.body.clientWidth / document.documentElement.clientWidth页面视口大小（注意兼容性问题）

document.body.clientHeight / document.documentElement.clientHeight 

// 获取当前浏览器视口大小
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth  !== 'number' ) {
// 不支持innerWidth/innerHeight

	if(document.compatMode === 'CSS1Compat') { // 判断是否处于标准模式
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clinetHeight;
	} else {
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}

由于兼容性问题，很难准确获得窗口大小。但以上方法获取视口大小还是可以的。

打开窗口

window.open() 传入三个参数。

第一参数为url。

第二个参数表示已有窗口或框架的名字。

第三个参数表示所要打开的窗口的特性。包括： top,left,height,width,location,status,scrollBars,resizable等。

返回的对象是一个指向新窗口的引用。可以通过该引用对新窗口进行调整大小、位置移动等

<span style="font-size:18px;">var newWin = window.open("http:www.baidu.com", "nwewindow", "top=200,left=200,width=400,height=400,resizable=true");
newWin.resizeTo(600,600);

console.log(newWin.opener == window); // true. newWin.opener指向调用window.open() 的原始窗口
newWin.opener = null; // 切断newWin与之前窗口的联系，如果需要标签页通信，就不可以切断。一旦切断，不可恢复。

newWin.close(); // 关闭新打开的窗口</span></span>

间歇调用和超时调用

setInterval(fn, time) // 传入的第一个参数为函数，第二个时间。

返回值为一个数字ID。通过该ID对间歇调用进行清除

setTimeout(fn , time ) // 可以说是一个定时器。在time时间后，调用fn函数。

返回值为一个数字ID，可以通过该ID在函数未被调用之前清除超时调用

<span style="font-size:18px;">var timer1 = setInterval(function(){
		num++;
		if (num > 10 ) {
			clearInterval(timer1); // 每隔3秒执行函数一次，当num>10的时候，清除间歇调用。
		}
	}, 3000);

var timer2 = setTimeout(function(){
		num++;
	}, 10000); // setTimeout被执行10秒后,将会调用该函数。可以使用 clearTimeout(timer2)来在10s到达之前清除调用。

// 在真正的开发中，很少直接使用间歇调用。
// 因为很可能发生本次间歇调用还没结束，下次已经开始。所以使用超时调用模拟间歇调用时很好的方法
function dingshiqi() {
	num++;
	if (num <= 11) {
		setTimeout(dingshiqi, 3000);
	} 
}
setTimeout(dingshiqi, 3000);
// 以上不用一直追踪超时调用ID， 用来模拟间歇调用
</span>

弹出窗口
alert() 弹出提示框
confirm() 弹出确认框。
prompt() 弹出验证框。

<span style="font-size:18px;">if (confirm("are you sure ?") ) { // 弹出确认框，如果返回值为确认
	var yourname = prompt("请输入你的名字："); // 弹出验证框
	if (yourname) { // 用户输入姓名
		alert(yourname); // 弹出用户姓名
	} else { // 点击取消
		alert("您已经取消输入！");
	}
} else {
	alert("what a pity ! ");
}</span>

以上~