BOM
- Browser Object Model - 浏览器对象模型：专门用于操作浏览器的，但是它使用的不多，远不如ES和DOM
- 浏览器很多操作都是自带的，而且BOM没有标准,各个浏览器都有自己的定义，但是大部分浏览器的都是一致规范的，除了老IE（8-）
window对象
扮演着两个角色：
- 全局对象：保存着全局变量和全局函数
- 指代当前窗口本身
属性：
- 获取浏览器的完整大小：
outerWidth/outerHeight - 获取浏览器的文档显示区域的大小：
innerWidth/innerHeight- 获取每台电脑的浏览器的文档显示区的大小 - 获取屏幕的完整大小：跟window没关系：
screen.width/height;- 做桌面应用
方法：
打开链接的新方式：
- 当前窗口打开，可以后退：
- HTML：
<a href="url">内容</a> - JS：
open("url","_self");
- HTML：
- 当前窗口打开，禁止后退
- 使用场景：比如电商网站，结账后不允许后退
- HTML做不到了，只有JS可以，也不是window能做到的，而是另外一个人：
history：当前【窗口的历史记录】，他其实可以做的事儿就是前进后退location：当前【窗口正在打开的url】，有一个API：location.replace("新url");//叫做替换，不叫做跳转
- 新窗口打开，可以打开多个
- HTML：
<a href="url" target="_blank">内容</a> - JS：
open("url","_blank");
- HTML：
- 新窗口打开，只能打开一个
- 使用场景：比如电商网站，只允许用户打开一个结账页面
- HTML：
<a href="url" target="自定义一个name">内容</a> - JS：
open("url","自定义一个name"); - 其实窗口的底层都是有一个名字的，如果打开了一个已经开着的名字的窗口的，他会把他关闭掉，再次打开
- 学完这块，我们知道了两个点：
- 以后的跳转，任何标签都可以
- 提升用户的体验感
- a标签的其他用途：
- 跳转
- 锚点
- 下载按钮：
<a href="xx.exe/rar/zip/7z">下载</a> - 打开图片和txt文档：
<a href="xx.png/jpg/jpeg/gif/txt">打开图片和txt</a> - 直接书写js-不需要绑定点击事件：
<a href="javascript:js代码;">打开图片和txt</a>
打开新窗口/新链接
newW=open("url","target","width=?,height=?,left=?,top=?");- 特殊
- 如果没有加第三个参数，那么窗口会和浏览器融为一体
- 如果你加了第三个参数，那么窗口会脱离浏览器独立存在
关闭窗口
window/newW.close();
改变新窗口的大小
- newW.resizeTo(新宽,新高);
改变新窗口的位置
newW.moveTo(新X,新Y);
window提供了三个框
- 警告框：
alert("警告文字"); - 输入框：
var user=prompt("提示文字"); - 确认框：
var bool=confirm("提示文字");
定时器也是window的
事件
window.onload事件
- 加载：等待其他所有的资源加载完毕后才会执行的代码，放在里面的代码其实要最后才会执行
window.onresize事件
- 窗口如果大小发生了变化，就会触发，搭配上判断innerWidth可以理解为是js版本的css媒体查询
*window.onscroll事件
- 滚动事件，一旦滚动就会触发
- 获取滚动条当前的位置：
window.scrollY - 获取元素距离页面顶部有多远：
elem.offsetTop/offsetLeft
本地/客户端存储技术
cookie
- 淘汰了，存储的大小只有2kb，而且操作极其麻烦，尤其要到处切割，只能最多保存30天
webStorage
- H5带来了一个新特性，存储的大小有8mb，永久保存，而且非常简单
- 分类2种：
sessionStorage- 会话级，只要浏览器一旦关闭，数据就会死亡了localStorage- 本地即，只要你不清空，就会永久存在
- 操作：
- 添加：
xxxStorage.属性名="属性值";- 读取：xxxStorage.属性名;- 删除：xxxStorage.removeItem("属性名");- 清空：xxxStorage.clear();
- 分类2种：
