js之BOM学习,页面加载事件,定时器,js同步异步,location参数,this指向问题

什么是BOM?

BOM(Browser Object Model)浏览器对象模型,提供了独立于内容而与窗口进行交互的对象,核心对象是window,学习与浏览器进行交互的一些对象比如怎么后退一个页面,前进一个页面,刷新等。BOM由一系列对象组成,每个对象有其对应的属性和方法,BOM缺乏标准,浏览器厂商再各自浏览器上定义的JS的语法标准化组织是ECMA,DOM是W3C。

var num = 10 
log(num)
log(window.log)全局变量变成window对象的属性
function fn(){

}
fn()
window.fn()函数变成window对象的一个方法
可以省略window,alert和prompt都属于window的方法
var name = 10 不要这样写 window中有个特殊属性name

页面加载事件

window.onload = function(){}

或者window.addEventListener('load',function(){})

是页面加载事件,当文档内容全部加载完就会触发事件,包括(图像,文本,脚本,样式)等调用处理函数。这样就能把js脚本放到html页面中任何位置了,之前只能在标签的下面,因为是按照从上往下依次执行的。

还有一个document.addEventListener('DOMContentLoaded',function(){})这个是仅当DOM加载完毕(不包括样式,图像等)如果一个页面图片很多,等全部的图像加载完需要一定时间,影响用户体验,我们可以使用这个。加载速度比load快。



    
    

调整窗口大小事件

 

定时器之setTimeout

setTimeout(调用函数,延迟时间(毫秒)可以省略默认为0),属于window对象,window可以省略。

setTimeout(function(){},1000)或者把函数写到外面,setTimeout(fn,1000)

function fn(){},fn可以加引号。

定时器有很多,所以有时候会给定时器加标识符。

回调函数以及五秒后关闭广告

setTimeout也叫回调函数,普通函数是按照代码是按照代码顺序执行的,而这个函数,需要等待时间,时间到了才会去调用。

element.onclick = function(){}或者element.addEventListener('click',function(){})也是回调函数。

关闭广告是设置定时器,5秒过后设置隐藏

 
123

清除定时器clearTimeout         

window.clearTimeout(定时器名字)window可以省略

定时器setInterval()

setIterval(回调函数,间隔毫秒数)

与setTimeout()区别是setInterval()循环执行,重复调用,每隔一段时间就调用一次回调函数。

  

每隔3秒在控制台打印继续输出中

倒计时效果

第一次执行也会有间隔毫秒是,解决办法,先调用一次这个函数


    
1
2
3

清除定时器clearInterval

 
    
    

发送验证码


    
    
    

this指向问题

this在定义的时候确定不了,只有函数执行的时候,指向调用它的对象。

1.全局作用域或者普通函数中this指向全局变量window,定时器中的this指向window。

  console.log(this); //window

        function fn() {
            console.log(this); //window
        }
        fn();
        setTimeout(function() {
            console.log(this);//window
        }, 1000);

2.方法中谁调用指向谁

 var o = {
            sayHi: function() {
                console.log(this); //指向o
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); //指向按钮
        // }
        btn.addEventListener('click', function() {
                console.log(this);
            })

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

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

js中同步和异步

js语言一大特点,典型性的单线程,同一个时间只能做一件事,所有任务排队,下一个任务有可能等好长时间。

同步,前一个任务执行完再去执行下一个任务,比如烧完水再去炒菜

异步,可以同时处理事情,比如烧水的同时,也炒菜。

 

location常见方法

location.assign()跟href属性一样,可以跳转页面(重定向)记录历史,可以后退

location.replace()替换当前页面,因为不记录历史,所以不能后退页面

location.reload()重新加载,相当于刷新按钮,如果参数为true强制刷新

navigator对象

移动端显示移动端页面 pc端打开的使用pc页面

history对象

与浏览器的历史记录进行交互

history对象方法

back()实现后退

forward()实现前进

go(参数)前进后退功能 参数如果是1前进一个 -1后退一个。

前提要先有缓存

 点我去19
    
    
                    
                    

你可能感兴趣的:(JavaScript,javascript,BOM,浏览器对象模型,html5)