BOM浏览器相关1.浏览器对象模型定义:浏览器给开发者提供的一系列方法: 01.可以打开一个浏览器弹窗框 02.记录当前

1.浏览器对象模型定义:浏览器给开发者提供的一系列方法:

01.可以打开一个浏览器弹窗框 02.记录当前窗口大小 03.操做页面跳转 04....

2.浏览器的弹出层(confirm/alert/prompt);

var boo = confirm('请问您确定进入页面')//实际开发不用,丑很了; console.log(boo);

注意:返回值是bool值;

3.window对象:

定义:在JS的全局作用域,有一个window对象,相关BOM的方法都在里面;

使用语法:window.XXX 注意:window可以不写;

1.浏览器的地址信息:

window有一个location 内部记录了浏览器的地址信息

location内部有一个href属性,可以获取当前浏览器的地址,也可以赋值新地址,从而实现页面跳转;

//打开页面,3S后页面自动跳转至百度首页
setTimeout(function(){
    window.location.href='https://www.baidu.com/'
},3000);

2.浏览器的刷新功能:

window对象内部有一个location,在其内部有一个reload方法,功能是刷新;

注意:window.location.reload()不应直接写在js外部中,避免直接刷新,应写在一个内部条件,如定时器;

var count =0;
        var time =setInterval(function(){
            count++;
            console.log(count);
            if(count===5){
                window.location.reload();
            }
        },1000);

3.浏览器的历史记录(模拟左上角的回退与前进)

window内部有一个history,内部有方法能够实现前进回退功能; 语法: window.history.back(); 回退;

window.history.foward();

前进(必须先有一次回退内容,才能使用前进);

4.浏览器的onload事件

onload事件,等到页面的所有资源加载完毕后再执行

注意:浏览器的图片加载是异步的;

  window.onload=function(){
            console.log('21565');
        }

5.浏览器的onscroll事件:即浏览器页面滚动时触发;

window.onscroll=function(){
            console.log('页面滚到了')
        };

6.浏览器的滚动距离:因为是页面滚动,所以需要使用document 对象去获取滚动的距离

方法1:document.body.scrollTop(再浏览器没有声明使用) 备注:同理存在scrollLeft(须在body设定一个盒子,并使HTML页面存在足够的宽/高)

方法2:document.documentElement.scrollTop(再浏览器声明了) 备注:同理存在scrollLeft (须在body设定一个盒子,并使HTML页面存在足够的宽/高)

  window.onscroll = function () {
            console.log('页面滚到了');
            console.log('document.body.scrollTop:', document.body.scrollTop, 'document.documentElement.scrollTop:', document.documentElement.scrollTop);
        };

7.本地存储(面试必问)

localStorage:浏览器本地存储(永久存储),打开浏览器存储之后,即便关闭浏览器,信息依然还在;

7.1存储语法:window.localStorage.setItem(key,value)

注意:value的值必须为字符串; key的书写符合见名知意;

7.2删除语法:window.localStorage.removeItem(key)清除指定内容

7.3清除语法:window.localStorage.clear();全部清除

7.4获取语法 window.localStorage.getiTEM(key);

sessionStorage:浏览器的临时存储

特点:页面关闭,直接清除数据

设置语法:window.sessionStorage.setItem(key,value) 其中value值必须为字符串;

window.seesionStorage.setItem('VX','4468890');

清除语法:window.sessionStorage.clear();()

8.JSON的两个方法(JSON需要大写)

8.1 JSON.stringify() 将其他类型的数据转为Json字符串格式;

var obj=[1,2,3,4,5];
window.sessionStorage.setItem('obj',JSON.stringify(obj));

8.2 JSON.parse(); 将Json字符串格式转换为相匹配的数据格式;

var newObj=JSON.parse(window.sessionStorage.getItem('obj'));
console.log(newObj);