JavaScript第10天

BOM：Browser Object Model        游览器对象模型

        专门用于操作游览器使用的不多，还不如ES和DOM，游览器很多操作都是自带的，BOM没有标准

        各个游览器都有自己的定义，大部分游览器都是一直规范的，除了老IE（8和8以下的）

window对象：扮演两个角色：

        1、全局对象：保存着全局变量和全局函数

        2、指代当前窗口本身：

        属性：

                1、获取游览器的完整大小：outerWidth/outerHeight

                2、获取游览器文档显示区域的大小：innerWidth/innerHeight

                        获取每台电脑的游览器文档区域显示的大小

                3、获取屏幕完整大小：跟window没关系;screen.width/height

        方法：

                1、打开链接新方式：

                        1、当前窗口打开，可以后退：

·                                HTML：<a href="url">内容</a>

                                js：open("url","_self");

                        2、当前窗口打开，静止后退：如电商网站结帐后不允许后退

                                HTML做不到只有js可以，也不是window能做到

                                history：当前【窗口的历史纪录】，可以做前进后退

                                location：当前【窗口正在打开的url】，有一个API

                                        location.replace("新url")；叫做替换不是跳转，不会产生历史记录，但是网址换了，网页必然发生变化

                        3、新窗口打开，可以开多个

                                HTML：<a href="url" target="_blank">内容</a>

                                js：open("url","_blank")；

                        4、新窗口打开，只能打开一个：如电商网站结账后，只允许打开一个结账页面

                                HTML：<a href="url" target="自定义一个name">内容</a>

                                js：open("url","自定义一个name");

                        其实窗口底层都是有自己的名字，如果打开一个已经开着的名字的窗口，他会先关掉再打开

                        注意：

                                1、以后跳转，任何标签都可以

                                2、提升用户的体验感

                                3、a标签的其他用途

                                        1、跳转

                                        2、锚点

                                        3、下载按钮：<a href="xx.exe/rar/zip">下载</a>

                                       4、打开图片和txt文档：<a href="xx.png/jpg/jpeg/gif/txt">打开图片和txt文档</a>

                                        5、直接书写js -不需要绑定点击事件：<a href="javascipt:js代码;">内容</a>

                2、打开新窗口/新链接：

                        newW=open("url","windth=?,height=?,left=?,top=?");

                        特殊：

                                1、如果没有加第三个参数，那么窗口和游览器会融为一体

                                2、如果加了第三个参数，那么窗口会脱离游览器独立存在

                3、关闭窗口：window/newW.close();

                4、改变窗口大小：newW.resizeTo(新宽,新高);

                5、改变窗口位置：newW.moveTo(新X,新Y);

                6、window提供的三个框：

                        1、警告框：alter("警告文字");

                        2、输入框：var str=prompt("提示文字");

                        3、确认框：var bool=confirm("提示文字");

                7、定时器也是window的

                8、事件：

                        1、window.onload事件

                                load：加载，等其他所有资源加载完毕才执行代码，放在里面的代码最后执行

                        2、window.onresize事件

                                窗口如果大小发生变化，就i会触发，搭配innerWidth可以理解为js版本的css媒体查询

                        3、window.onscroll事件

                                滚动事件，一旦滚动就会触发

                                        1、获取滚动条当前的位置：window.scrollY

                                        2、获取元素距离页面顶部有多远：elem.offsetTOP/offsetLeft

                9、本地/客户端存储技术：

                        cookie：淘汰了，存储只有2kb，操作麻烦，要到处切割，只能保存30天

                        webStorage：H5带来一个新特性，存储大小有8mb，永久保存，操作简单

                                分类：2种

                                        1、sessionStorage   只要游览器关闭，数据就会死亡

                                        2、localStorage   只要你不清空，就会永久保存

                                                两者用法一样，不用创建，直接使用

                                                1、添加：xxxStorage.属性名="属性值";

                                                2、读取：xxxStorage.属性名;

                                                3、删除：xxx.Storage.removeItem("属性名");

                                                4、清空：xxxStorage.clear();