慕课前端入门-BOM基础

BOM
browser object model浏览器对象模型
BOM对象有window、navigator、screen、history、location、document、event。

1. window

window是浏览器的一个实例，在浏览器中，window对象有双重角色，它即使通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
所有的全局变量和全局方法都被归于window上。

1.1 操作弹窗

方法	说明	实例
window.alert(content)	功能：显示带有一段消息和一个确认按钮的警告框	alert("弹窗");
window.confirm(message)	功能：显示一个带有指定消息和确认、取消按钮的对话框 返回值：点击确定返回true；点击取消返回false	console.log(confirm("母鸡还能变鸭子啊"));
window.prompt(text,defaultText)	参数说明： text：要在对话框中显示的纯文本 defaultText：默认的输入文本 返回值：如果用户点击取消，返回null； 如果用户点击确认，则返回输入的文本	console.log(prompt("妹子，芳龄几何？",18));

1.2 open/close

方法	说明	实例
window.open(pageURL, name, parameters)	功能：打开一个新的浏览器窗口 参数说明 pageURL：子窗口路径 name：子窗口句柄。(name生命了新窗口的名称， 方便后期通过name对子窗口进行引用) 窗口参数(各参数用逗号分隔) width：窗口宽度 height：窗口高度 left：窗口X轴坐标 top：窗口Y轴坐标 toolbar：是否显示浏览器的工具栏 menubar：是否显示菜单栏 scrollbars：是否显示滚动条 location：是否显示地址字段 status：是否添加状态栏	window.open("http://www.baidu.com",     "newwindow","width=400,     height=200,left=0,top=0,     toolbar=no,menubar=no,     scrollbars=no,location=no,     status=no");
window.close()	功能：关闭当前窗口	window.close();

1.3定时器setTimeout

方法	说明	实例
setTimeout(code, millisecond)	功能：在指定的毫秒数后调用函数或计算表达式 参数说明：   1.code：要调用的函数或要执行的js字符串   2.millisecond：执行代码钱需等待的毫秒数 返回值：超时函数的ID	setTimeout('alert("第1次")',1000); var slaveId = setTimeout( function(){ alert("第2次"); }, 4000); clearTimeout(slaveId); var fnCall = function(){ alert("第3次"); } setTimeout(fnCall,7000);
clearTimeout(id_of_setTimeout)	功能：取消超时函数的执行
setInterval(code, millisecond)	功能：每隔指定的时间执行一次代码 参数说明：   1.code:要调用的函数或要执行的代码串   2.millisecond：间隔，单位毫秒 返回值：间歇函数的ID	setInterval('console.log("第1次")',1000); setInterval(function(){ console.log("第2次");},3000); function fn3(){console.log("第3次");} var dsId = setInterval(fn3,7000); clearInterval(dsId);
clearInterval(intervalId)	取消间歇函数的执行

使用超时实现间歇打印

<script type="text/javascript">
var num=1,max=10,timer=null;
function inCreamentNum(){
	console.log(num);
	num++;
	if(num<=max){
		setTimeout(inCreamentNum,1000);
	}else{
		clearTimeout(timer);
	}
}
timer=setTimeout(inCreamentNum,1000);
</script>

1.4 location对象属性

location对象提供了与当前窗口中加载的文档有关的的信息，还提供了一些导航的功能。它即使window对象的属性，也是document对象的属性。

方法	说明	实例
location.href	功能：返回当前加载页面的完整URL 与window.location.href等价	https://www.baidu.com/s?wd=adb sendevent 滑动&rsv_spt=1
laction.hash	1.有参数是设置锚点 2.返回URL中的锚点，如果没有就返回空字符串	<input type="button" value="去你奶奶的" id="btn"> <div id="next"></div> ... var nHash = document.getElementById("btn"); btn.onclick=function() { location.hash="next"; }
location.host	功能：返回服务器名称和端口号	以上面的URL为例 host:www.baidu.com hostname:www.baidu.com pathname:/s port:"" protocol:https search:?wd=adb sendevent 滑动&rsv_spt=1
location.hostname	功能：返回不带端口号的服务器名称
location.pathname	功能：返回URL中的目录和(或)文件名
location.port	功能：返回URL中指定的端口号。如果没有，返回空字符串。
location.protocol	功能：返回页面使用的协议
location.search	功能：返回URL中的查询字符串，这个字符串以问号开头
location.replace()	功能：重新定向URL，不会在历史记录中生成新记录
location.reload()	功能：重新加载当前页面，即刷新 location.reload()//有可能从缓存中加载 location.reload(true)//从服务器重新加载

改变浏览器位置的方法有href, hash, search ,replace。replace与其他属性不同点在于不会留下历史记录。

1.5 history对象

history对象保存了用户在浏览器中访问页面的历史记录。

方法	说明	实例
history.back()	功能：回到历史记录的上一步	history.back(); history.forward(); history.go(-1); history.go(2)
history.forward()	功能：回到历史记录的下一步
history.go(n)	功能：回到历史记录的第n步 n为正数，就前进；n为负数，就后退

1.6 掌握screen对象及其常用属性

screen对象包含客户端显示屏幕的信息。
获取浏览器窗口可视区域的高度和宽度，使用window.innerHeight和window.innerWidth
获取屏幕的高度和宽度，使用screen.availWidth和screen.availHeight(不包括任务栏)

//控制台直接打印
window.innerHeight;
window.innerWidth;
screen.availWidth;
screen.availHeight

1.7 navigator对象即属性userAgent扩展

navigator提供了浏览器即操作系统的信息。
userAgent用来识别浏览器名称、版本、引擎以及操作系统等信息。

//封装一个检测浏览器类型的方法
<script type="text/javascript">
	function getBrowsers(){
		//获取userAgent属性
		var explorer = navigator.userAgent.toLowerCase(),browser;
		if(explorer.indexOf("msie")>-1){
			browser="IE";
		}else if(explorer.indexOf("chrome")>-1){
			browser="chrome";
		}else if(explorer.indexOf("opera")>-1){
			browser="opera";
		}else if(explorer.indexOf("safari")>-1){
			browser="safari";
		}
		return browser;
	}
	var explorer = getBrowsers();
	alert("你当前使用的是"+explorer+"浏览器");
</script>