🌋BOM介绍以及方法

• BOM介绍和window对象的方法

 

一、BOM对象

 

（浏览器对象模型 BOM）

 

 

1、window alert() confirm() prompt() setInterval() ​ setTimeout()

2、location ​ herf ​ hash ​ url ​ ...

3、screen

4、history ​ go()

二、window方法

1、alert()

alert('派大星');

2、confirm（）

var a = window.confirm('你确定要离开网站吗？');
console.log(a);

3、prompt（）

var name = window.prompt('今天吃了什么？','海绵宝宝');
//前面是输入，后面是默认
console.log(name);

 

 

• 定时器方法

一、setTimeout() 延迟性操作

 1 window.setTimeout(function(){
 2     console.log('派大星');//延迟了4秒
 3 },4000);
 4 console.log('海绵宝宝');
 5 
 6 //定时器 异步运行  
 7 function hello(){  
 8     alert("hello");  
 9 }  
10   
11 var t1 = window.setTimeout(hello,1000);//使用方法名字执行方法  
12 var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  

 

二、setInterval() 定时输出

 1 var num = 0;
 2 var timer = null;
 3 timer = setInterval(function(){
 4     num++;
 5     if(num>5){
 6         clearInterval(timer);
 7         return;
 8     }
 9     console.log('num:'+num);
10 },1000);//1秒输出一次
11 
12 
13 //实时刷新  时间单位为毫秒  
14 setInterval('refreshQuery()',8000);   
15 /* 刷新查询 */  
16 function refreshQuery(){  
17   console.log('每8秒调一次') 
18 }

 

•  location对象

 

window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。

一、属性

1 console.log(location.host);//主机名，包括端口
2 console(location.hostname);//主机名
3 console.log(location.href); //完整的url(网址)
4 console.log(location.pathname); //文件名（url中的部分路径）
5 console.log(location.port); //端口号
6 console.log(location.protocol); //协议（HTTP、https）
7 console.log(location.search) //提交的text（查询字符串）

 

二、location 每个查询字符串参数获取方法

1、一个地址

1 HTML、CSS、JS文件代码/BOM代码文件/04 location对象的常用属性.html?user=aaa&pwd=123
2 
3 //?user=aaa&pwd=123

 

2、取得去掉问号的查询字符串

1 var qs = location.search.length > 0? location.search.substring(1) : '';//user=aaa&pwd=123
2 //从索引 1 开始取到后面的字符

 

3、将取到的字符串且分开

1 var items = qs.length? qs.split('&') : [];//['user=aaa','pwd=123']

 

4、定义参数

1 var item = null,//装 items 中的元素
2 name = null,//装 item 中的名字
3 value = null,//装名字对应的值
4 args = {};//装结果

 

5、循环取出 items 中的值进行操作

1 for(i = 0;i<items.length;i++){
2     item = items[i].split('=');//['name','aaa']等号分隔开
3     name = decodeURIComponent(item[0]);
4     value = decodeURIComponent(item[1]);
5     if(name.length){
6         args[name] = value;
7     }
8 }
9 console.log(args);//示例：{user: "派大星", pwd: "cz"}

 

6、用函数进行封装一下

 1 function userPwd(){
 2     //1、取得去掉问好的查询字符串
 3     var qs = location.search.length > 0? location.search.substring(1) : '';//user=aaa&pwd=123
 4     var items = qs.length? qs.split('&') : [];//['user=aaa','pwd=123']
 5     var item = null,name = null,value = null,args = {};
 6     for(i = 0;i<items.length;i++){
 7         item = items[i].split('=');//['name','aaa']
 8         name = decodeURIComponent(item[0]);
 9         value = decodeURIComponent(item[1]);
10         if(name.length){
11             args[name] = value;
12         }
13     }
14     return args;
15 }
16 var newUserPwd = userPwd();
17 console.log(newUserPwd);

 

•  设置跳转、刷新网页

 

setTimeout(function(){
    location.href = 'https://www.cnblogs.com/songhaixing/';
    //跳转有历史记录
    location.replace('https://www.cnblogs.com/songhaixing/');
    //跳转没有历史记录
    location.reload();//两秒后重载网页（刷新）
},2000)

 

 

• 检测浏览器上的插件

 

一、navigator对象（插件检测）

console.log(navigator.plugins);//查看浏览器里安装了的所有插件

function hasPlugin(name){
//如果有插件 返回true 反之亦然
    name = name.toLowerCase();//转成小写方便比较
    for(var i = 0;i < navigator.plugins.length;i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
    //循环取出来的第i 个插件的名字的小写,然后找出名字的索引，大于-1 表示存在
            return true;
        }else{
            return false;
        }
    }
}
alert(hasPlugin('asdas'));//false,没有这个插件
alert(hasPlugin('Chromium PDF Viewer'));//true 有这个插件

 

 

 

 

• history对象

延时 刷新 / 前进 / 后退

var count = 0;
setTimeout(function(){
    count++;
    console.log(count); // 计算次数
    history.go(0);//刷新
    history.go(1);//正数前进
    history.go(-2);//负数后退
},2000)//两秒 刷新/前进/后退