BOM的介绍
JavaScript基础分为三个部分：javascript
-
BOM：浏览器对象模型，操做浏览器部分功能的API。好比让浏览器自动滚动。linux
什么是BOM
BOM：Browser Object Model，浏览器对象模型。浏览器
BOM的结构图:框架
从上图也能够看出：异步
-
window对象是BOM的顶层(核心)对象，全部对象都是经过它延伸出来的，也能够称为window的子对象。ide
-
DOM是BOM的一部分。函数
window对象：post
-
window对象是JavaScript中的顶级对象。
-
全局变量、自定义函数也是window对象的属性和方法。
-
window对象下的属性和方法调用时，能够省略window。
BOM 的常见内置方法和内置对象
window对象
弹出系统对话框
好比说，alert(1)是window.alert(1)的简写，由于它是window的子方法。系统对话框有三种：
alert(); //不一样浏览器中的外观是不同的 confirm(); //兼容很差 prompt(); //不推荐使用
打开窗口、关闭窗口
一、打开窗口：
window.open(url,target) //url：要打开的地址。 //target：新窗口的位置。能够是：_blank 、_self、 _parent 父框架。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
<button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function(){
//open('https://www.baidu.com')
//打开空白页面
open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否关闭？")){
close();
}
}
</script>
</html>
二、关闭窗口：
window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就好了)
获取窗口宽高
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
定时器
在js中的定时器分两种：一、setTimeout() 二、setInterval()
setTimeOut()
只在指定时间后执行一次
/定时器 异步运行
function hello(){
alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器
setInterval()
在指定时间为周期循环执行
/实时刷新 时间单位为毫秒
var t = setInterval('refreshQuery()',8000);
/* 刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
window.clearInterval(t)
两种方法根据不一样的场景和业务需求择而取之，
对于这两个方法，须要注意的是若是要求在每隔一个固定的时间间隔后就精确地执行某动做，那么最好使用setInterval，而若是不想因为连续调用产生互相干扰的问题，尤为是每次函数的调用须要繁重的计算以及很长的处理时间，那么最好使用setTimeout
location对象
window.location能够简写成location。location至关于浏览器地址栏，能够将url解析成独立的片断。
location对象的属性
-
href：跳转
-
hash 返回url中#后面的内容，包含#
-
host 主机名，包括端口
-
hostname 主机名
-
pathname url中的路径部分
-
protocol 协议 通常是http、https
-
search 查询字符串
location.href属性举例：
举例1：点击盒子时，进行跳转。
<body>
<div>smyhvae</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时，跳转到指定连接
// window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>
举例2：5秒后自动跳转到百度。
有时候，当咱们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就能够用到location。举例：
<script> setTimeout(function () { location.href = "http://www.baidu.com"; }, 5000); </script>
location.reload()：从新加载
setTimeout(function(){ //3秒以后让网页整个刷新 window.location.reload(); },3000)
navigator对象
window.navigator 的一些属性能够获取客户端的一些信息。
-
userAgent：系统，浏览器)
-
platform：浏览器支持的系统，win/mac/linux
例子：
console.log(navigator.userAgent);
console.log(navigator.platform);
history对象
一、后退：
history.back()
history.go(-1)：0是刷新
二、前进：
history.forward()
history.go(1)
用的很少。由于浏览器中已经自带了这些功能的按钮。
screen对象（了解便可）
屏幕对象，不经常使用。
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度