JavaScript系列教程(十一)：BOM

一、BOM的概念

BOM浏览器对象模型（Browser Object Model）

1、我们通过window对象操控浏览器

2、window与document的关系
document是window的一个对象属性

console.log(window.document);

3、location对象

window.location.href="index.html";//属性  控制浏览器地址栏的内容
window.location.reload();//刷新  带本地缓存
window.location.reload(true);//刷新 不使用本地缓存

4、history对象----用户（在浏览器窗口中）访问过的 URL

window.history.back();//上一个
window.history.forward();//下一个
window.history.go(-2);//参数<0时，跳转到自己后方的第参数个记录。参数>0时，跳转自己前方的第参数个记录
console.log(window.history.length);//获取历史记录的长度

二、window中常用的事件

1、open()打开窗口
既可以导航到一个特定的URL,也可打开一个新窗口。

属性	值	说明
width	数值	新窗口的宽度，不能小于100
height	数值	新窗口的高度，不能小于100
top	乘数值	距离屏幕上方的像素
left	数值	距离屏幕上方的像素
toolbar	yes no	是否显示工具栏，IE浏览器有效
location	yes no	是否显示地址栏，IE浏览器有效
fullscreen	yes no	全屏显示

window.open("one.html","blank","width=100px,height=400px,top=0px,left=0px,toolBar=yes,location=no;");

2、close()关闭窗口
window.close()关闭窗口，不能关闭非脚本打开的窗口

//在FF浏览器只能关闭通过代码打开的窗口
window.close();

3、onload加载事件
当页面加载完成的时候会触发该事件

window.onload=function(){
	console.log('我被触发了')
}

4、onscroll滚动事件
当窗口发生滚动会触发该事件

window.onscroll=function(){
	console.log("滚！");
	//浏览器支持哪个属性就获取哪个属性
        //获取滚动条滚动距离
	var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
	console.log(scrollTop);
}

5、onresize窗口变化事件

//当浏览器窗口大小发生改变的时候 就会触发window.onresize事件
window.onresize=function(){
	console.log("变变变！");
	//可视区域的宽度 
    var width = document.documentElement.clientWidth||document.body.clientWidth||document.innerWidth;
	var height = document.documentElement.clientHeight||document.body.clientHeight||document.innerHeight;
	console.log("宽："+width+"高："+height);
}

三、window常用的方法

1、系统对话框

警告框：alert()，没有返回值

 alert("你访问的页面含有非法敏感内容!")

选择框：confirm("提问的问题")，返回true,false;

var b = confirm("是否同意保存你的密码？");

输入框：prompt()返回字符串或者为null

var a = prompt("填写你的姓名");
console.log(a);

2、关于定时器的方法

循环定时器setInterva()
延迟定时器setTimeout()
清除定时器clearInterval()、clearTimeout()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				height: 800px;
				width: 100%;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<script>
			console.log('--------');
			//定时器
			
			//延时定时器
			//第一个参数：延时执行的函数
			//第二个参数：延时的时间
			//函数可以作为另外一个函数的参数，这种函数称之为回调函数
			var time3 = setTimeout(function(){
				console.log('调用了setTimeout');
			},0);//时间的单位是毫秒
			//延时定时器只能执行一次
			//定时器会在程序最后执行，即使延时0秒，也不会马上执行
			
			//循环定时器
			//第一个参数：循环每一次执行的函数
			//第二个参数：循环的时间
			var time1 = setInterval(function(){
				console.log('setInterval1');
			},1000);
			
			var time2 = setInterval(function(){
				console.log('setInterval2');
			},1000);
			
			var body = document.querySelector('body');
			body.onclick = function(){
				console.log('点击了');
				
				//清除循环定时器  参数：要清除的定时器
				clearInterval(time1);
				//清除延时定时器
				clearTimeout(time3);
			}
			
			console.log('++++++++++++');
			
		</script>
	</body>
</html>

posted on 2017-08-01 17:58 阳光洒在代码上阅读(205) 评论(0) 收藏举报