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)//两秒 刷新/前进/后退