一、BOM
Browser Object Model - 浏览器对象模型:专门用于操作浏览器的,但是它使用的不多,远不如ES和DOM,浏览器很多操作都是自带的,而且BOM没有标准,
各个浏览器都有自己的定义,但是大部分浏览器的都是一致规范的,除了老IE(8-)
二、window对象:扮演着两个角色:
1、全局对象:保存着全局变量和全局函数
2、指代当前窗口本身:
1.属性:
1、获取浏览器的完整大小:outerWidth/outerHeight
2、*获取浏览器的文档显示区域的大小:innerWidth/innerHeight - 获取每台电脑的浏览器的文档显示区的大小
3、获取屏幕的完整大小:跟window没关系:screen.width/height; - 我们目前学习的都是浏览器应用(网页),并不会去做桌面应用
2.方法
(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/7z">下载</a>
4、打开图片和txt文档:<a href="xx.png/jpg/jpeg/gif/txt">打开图片和txt</a>
5、直接书写js-不需要绑定点击事件:<a href="javascript:js代码;">打开图片和txt</a>
(2)打开新窗口/新链接:
newW=open("url","target","width=?,height=?,left=?,top=?");
特殊:1、如果没有加第三个参数,那么窗口会和浏览器融为一体
2、如果你加了第三个参数,那么窗口会脱离浏览器独立存在
(3)关闭窗口:
window/newW.close();
(4)改变新窗口的大小:
newW.resizeTo(新宽,新高);
(5)改变新窗口的位置:
newW.moveTo(新X,新Y);
(6)*window提供了三个框:
警告框:alert("警告文字");
输入框:var user=prompt("提示文字");
确认框:var bool=confirm("提示文字");
(7)*****定时器也是window的
(8)事件:
1、window.onload事件 - load - 加载:等待其他所有的资源加载完毕后才会执行的代码,放在里面的代码其实要最后才会执行
2、*window.onresize事件 - 窗口如果大小发生了变化,就会触发,搭配上判断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、删除:xxxStorage.removeItem("属性名");
4、清空:xxxStorage.clear();
扩展:
1、提交事件:绑定在form表单上,提交的一瞬间就会触发,想要阻止提交:return false
2、判断多选框有没有被选中:多选框.checked -> true|false
3、日期对象.getTime() 得到的是这个时间的毫秒数