一、BOM（Browser Object Model）
浏览器对象模型，专门用于操作浏览器的，各个浏览器都有自己的定义，但是大部分浏览器都是一致规范的，除了老IE（8-）。
二、window对象
2.1 扮演角色
1. 全局对象：保存着全局变量和全局函数
2. 指代当前窗口本身
2.2 属性
- 获取浏览器的完整大小：outerWidth/outerHeight
- 获取浏览器的文档显示区域的大小：innerWidth/innerHeight
- 获取屏幕的完整大小：跟window没有关系，screen.width/height
2.3 方法
1. 打开链接的新方式
- 当前窗口打开，可以后退
HTML:<a href="url"></a>
JS:open("url","_self")
- 当前窗口打开，禁止后退
HTML:做不到
history:当前窗口的历史记录
location:当前窗口正在打开的url，有一个API
location.replace("url")//叫做替换，不叫做跳转
- 新窗口打开，可以打开多个
HTML:<a href="url" target="_blank"></a>
JS:open("url","_blank")
- 新窗口打开，只能打开一个
HTML:<a href="url" target="自定义一个name"></a>
JS:open("url","自定义一个name")
// 当前窗口打开，可以回退
div1.onclick = function(){
window.open("https://www.baidu.com","_self")
}
// 当前窗口打开，不可以回退
div2.onclick = function(){
location.replace("https://www.baidu.com")
}
// 新窗口打开，可以打开多个
div3.onclick = function(){
window.open("https://www.baidu.com","_blank")
}
// 新窗口打开，只能打开一个
div4.onclick = function(){
window.open("https://www.baidu.com","nn")
}
任何标签都可以实现跳转
2. a标签的其他用途：
- 跳转
- 锚点
- 下载按钮：
<a href="xx.exe/rar/zip/7z"></a> - 打开图片和txt文档：
<a href="xx.png/jpg/jpeg/gif/txt"></a> - 直接书写js-不需要绑定点击事件：
<a href="javascript:js代码;"></a>
3. 打开新窗口/新链接
newW=open("url","target","width=?,height=?,left=?,top=?")
- 如果没有加第三个参数，那么窗口会和浏览器融为一体
- 如果你加了第三个参数，那么窗口会脱离浏览器独立存在
4. 关闭窗口：window/newW.close();
5. 改变新窗口的大小：newW.resizeTo(新宽,新高);
6. 改变新窗口的位置：newW.moveTo(新X,新Y);
7. 定时器也是window的
2.4 window提供了三个框：
- 警告框：alert("警告文字");
- 输入框：var user=prompt("提示文字");
- 确认框：var bool=confirm("提示文字");
2.5 事件
- window.onload事件：等待其他所有的资源加载完毕后才会执行的代码，放在里面的代码其实要最后才会执行
- window.onresize事件：窗口如果大小发生了变化，就会触发，搭配上判断innerWidth可以实现媒体查询
- window.onscroll事件：滚动事件，一旦滚动就会触发
- 获取滚动条当前的位置：window.scrollY
- 获取元素距离页面顶部有多远：elem.offsetTop
- 获取元素距离页面左边有多远：elem.offsetLeft
2.6 本地/客户端存储技术
- cookie：淘汰了，存储的大小只有2kb，而且操作极其麻烦，尤其要到处切割，只能最多保存30天
- webStorage：H5带来了一个新特性，存储的大小有8mb，永久保存
- sessionStorage：会话级，只要浏览器一旦关闭，数据就会死亡了
- localStorage：本地级，只要你不清空，就会永久存在
- 两者的用法是一模一样的，不用创建，直接可用
- 添加：xxxStorage.属性名="属性值"
- 读取：xxxStorage.属性名;
- 删除：xxxStorage.removeItem("属性名");
- 清空：xxxStorage.clear();
三、提交事件
onsubmit，绑定在form表单上，提交的一瞬间就会触发，想要阻止提交：return false
