Javascript（3）-BOM

目录

一.简介

二.理论基础

1.this的指向问题

2.JS执行机制

三.window对象

1.window对象的事件

窗口加载事件

调整窗口大小事件

定时器   setTimeout

2.window对象的属性

location属性

navigator属性

history属性

案例

1.五秒后自动关闭的广告

2.倒计时

3.发送短信

4.5s之后跳转页面

5.欢迎页面

---

一.简介

BOM（Browser Object Model）浏览器对象模型，与浏览器窗口进行交互。核心对象是window。

BOM比DOM大，包含了DOM。

document *** 作文档中的元素

location *** 作地址栏的URL

navigation包含浏览器的信息，必须浏览器是由什么设备打开的（手机/电脑）

history可以进行回退和前进，与历史浏览记录相关

二.理论基础  1.this的指向问题

一般情况下，this最终指向的是那个调用它的对象 

1.全局作用域或普通函数中，this指向全局对象window（定时器里面的this指向window）

因为调用函数的默认是window.fn()；

console.log(this);

function fn(){
    console.log(this);
}

2.方法调用中谁调用this指向谁

var o = {
    sayHi:function(){
        console.log(this);//指向o
    }
}

o.sayHi();

var btn = document.qs
btn.onclick = function(){
    console.log(this);//指向btn
}

3.构造函数中this指向构造函数的实例

function Fun(){
    console.log(this);//this 指向fun实例对象
}
var fun = new Fun();

2.JS执行机制

 

 

 这段代码中JS会输出123，不会等待3执行完再执行2.

 回调函数一般和时间有关系，需要等待的时间可能长。

所以上面的代码将1000毫秒改为0，也不会输出132.而是输出123

 多个异步任务时怎么执行处理

 

 先执行第一个同步函数，将第一个异步函数交给异步进程处理，等待点击鼠标事件，如果不点击，异步任务就不放到异步任务中。再执行控制台打印2，再将第二个异步函数放到异步任务中。

当执行完异步任务后，异步任务队列就清空了。如果不点击鼠标就输出123.如果任何时候点击鼠标，异步进程处理就把异步任务放到队列中。

三.window对象 1.window对象的事件

 window是一个全局对象，定义在全局作用域中的变量或者方法都会变成window对象的属性和方法，在调用的时候可以省略window。

window下面有一个特殊的属性是name，所以定义变量时不要var name。

 窗口加载事件

当文档内容完全加载完成（包括图片，脚本文件，CSS文件等）会触发该事件，这样就可以不用把script标签写到body中了，不用写到标签的后面。可以写在head中。

    
    
    


按钮

用传统的写法时，当写多个window.onload事件时，会以最后一个为准，其他的都不生效了。

所以用下面的方式

    
    
    


按钮

    
    
    


按钮

var btn不能写到最外层。

document.addEventListener('DOMContentLoaded',function(){})

这个事件当DOM加载完成后触发，不包括样式表，图片，flash等等。

如果页面图片特别多，用window.onload会加载事件很长，影响js的交互效果的实现，所以这时候用DOM的加载完成事件会更合适。

调整窗口大小事件

当浏览器的窗口大小发生了变化而产生的一些交互效果

window.addEventListener('resize',function (){
            alert('resize');
        })

当页面宽度小于800，div隐藏，当页面宽度大于800，div显示 

定时器   setTimeout

比如某些轮播图，隔一段事件就轮播一张。

        //window.setTimeout(调用函数,[延迟的毫秒数]);设置一个定时器，定时在延迟到时之后调用函数
        //window在调用时可以省略,延迟毫秒数也可以省略，省略后默认是0
        //如果函数的内容很多，可以采用写函数名的方式
        setTimeout(function (){
            alert("It's time!");
        },2000)

        //页面中可能有很多定时器，可以给定时器起名字

        var timer1 = setTimeout(function(){},3000);
        var timer2 = setTimeout(function(){},5000);

setTimeout也称为回调函数callback，普通函数是按顺序执行的，而回调函数是等待时间，只有时间到了才返回头调用函数。所以onclick也是回调函数。

 清除定时器

window.clearTimeout(timer1);

定时器 setInterval

//window.setInterval(回调函数,[间隔毫秒数]);
        //作用：每隔一秒就调用一次
        window.addEventListener('load',function () {
            setInterval(function (){
                alert('oops');
            },2000)
        })

清除计时器

clearInterval(timer1);

注意timer1需要时全局变量，要是在一个方法内，就关闭不了了。

2.window对象的属性 location属性

URL

 location对象的属性

navigator属性

 可以根据打开该页面的设备来显示不同格式的页面，手机端和电脑端打开的页面有各自不同的显示效果。

手机端的页面代码和电脑端的页面代码不同，根据navigator的属性值来打开不同的页面。

history属性

 back()和forward()就是浏览器中后退和前进的功能

这两个功能也能通过js代码来实现

 go既可以实现back功能也能实现forwar功能

案例 1.五秒后自动关闭的广告

2.倒计时

setInterval里面的方法只能传方法名，不能传递参数，传递参数后就没有效果了，Do not know why。

因为setInterval执行的函数的时候也是打开页面一秒后，这一秒没有执行方法会显示空白，所以我们先执行一遍方法，就可以解决了

3.发送短信

点击按钮，60秒之内不能再次点击，防止重复发送

    
    
    
    



发送

 4.5s之后跳转页面

    
    
    
    


跳转

5.欢迎页面

window.addEventListener('load',function () {
            var div = document.querySelector('div');
            var para = location.search;//?username=zhou
            //利用=把字符串分割为数组
            var arr = para.split('=');//得到一个数组，arr[0] = ?username，arr[1] = zhou;
            div.innerHTML = arr[1]+'，欢迎登录';
        })