Javascript BOM

最新推荐文章于 2024-05-17 13:52:13 发布

沈不知

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量114

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Lebiry/article/details/127486813

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

BOM概述

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

window对象是浏览器的顶级对象，它具有双重角色。它是JS访问浏览器窗口的一个接口。它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

注意:window.name是window下的一个特殊属性，所以声明变量最好不要用name。

Window对象的常见事件

window.onload-窗口加载事件

1.window.οnlοad=function(){}或者

window.addEventListener(‘load’,function(){})

是窗口加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等？，就调用的处理函数。

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。

2.document.addEventListener(‘DOMContentLoaded’,function(){})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等等。如果页面的图片很多的话，从用户访问到onload触发可能需要较长时间，交互效果不能实现，必然影响用户体验。此时用DOMContentLoaded更合适。

window.onresize-调整窗口大小事件

window.οnresize=function(){}

window.addEventListener(‘resize’,function(){})

是调整窗口大小加载事件，当触发时就调用的处理函数。

只要窗口大小发生像素变化，就会触发这个事件。我们经常利用这个事件完成响应式布局。window.innerWidth是当前屏幕的宽度。

定时器

1.setTimeout()

window.setTimeout(调用函数，[延迟的毫秒数]);

用于设置一个定时器，该定时器在定时器到期红藕执行调用函数。
这个window在调用时可以省略。毫秒数省略时，默认为0。
这个调用函数可以直接写函数，还可以写函数名
页面中可能有很多定时器，我们经常给定时器加标识符（名字）

document.addEventListener('DOMContentLoaded',function(){
    var time1=setTimeout(function()
    {
        console.log('时间到了');
    },2000);
});

setTimeout()这个调用函数我们也称为回调函数callback。普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，因此称回调函数。

停止setTimeout()定时器

window.clearTimeout(timeout ID)

document.addEventListener('DOMContentLoaded',function(){
    var time1=setTimeout(function()
    {
        console.log('时间到了');
    },5000);

    var btn=document.querySelector('button');
    btn.addEventListener('click',function(){
        clearTimeout(time1);
    });
});

2.setInterval()

window.setInterval(回调函数，[间隔的毫秒数]);

和上一个几乎相同，但setInterval()每当时间到了就会调用一次，不停地重复这个过程。

window.clearInterval(intervalID)

停止setInterval()定时器。定时器也是个对象

document.addEventListener('DOMContentLoaded',function(){
    var begin=document.querySelector('.begin');
    var stop=document.querySelector('.stop');
    var timer=null;//全局变量让函数外可以访问

    begin.addEventListener('click',function(){
       timer=setInterval(function(){
        console.log('123');
       },1000);
    });

    stop.addEventListener('click',function(){
        clearInterval(timer);
    });
});

this指向

    <script>
        //1.全局作用域或者普通函数、定时器中this指向全局对象window
        console.log(this);
        function fn(){
        console.log(this);
         }
        fn();

        // 2.方法调用中谁调用this指向谁
        var o={
            sayHi:function(){
                console.log(this);//this指向o这个对象。
            }
        }
        o.sayHi()

        // 3.构造函数中this指向构造函数的实例
        function fun(){
            console.log(this);
        }
        var Fun=new fun();
    </script>

JS执行队列

JS语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。单线程就意味着，所有任务都需要排队，前一个任务结束，才执行下一个任务。

为了防止下一个任务等上一个任务等待很长时间，利用多核CPU的计算能力，HTML5允许JS脚本创建多个线程，JS中出现了同步和异步。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步

在做这件事的同时，可以去处理其他的事情。

同步任务

同步任务都在主线程上执行，形成一个执行栈。

异步任务

JS异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型

普通事件，如click,resize等
资源加载，如load,error等
定时器，包括setInterval,setTimeout等

执行机制

先执行同步任务
异步任务放入任务队列中
一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进行执行栈，开始执行。
由于主线程不断的重复获得任务，执行任务，在获取任务，再执行，所以这种机制被称为事件循环（event loop）

常用对象

location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

URL

统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该如何处理它。

URL的一般语法格式为

protocol://host[:port]/path/[?query]#fragment

protocol 通信协议，常用的http,ftp,maito等
host 主机（域名）www.itheima.com
port 端口号，可选，省略时使用方案的默认端口，如http的默认端口为80
path 路径，由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query 参数，以键值对的形式，通过&符号分隔开
fragment 片段，#后面内容常见于链接锚点

属性

location.href

获取或设置整个URL，赋值时，location.href=‘新的URL’

location.host

返回主机（域名）

location.port

返回端口号，如果未写，返回空字符串

location.pathname

返回路径

location.search

返回参数

获取URL参数案例：

<body>
    <form action="index.html">
        用户名：<input type="text" name="uname">
        <input type="submit" value="登陆">
    </form>
</body>

index.html

<body>
    <div></div>

    <script>
        //location.search得到参数信息
        console.log(location.search);//?uname=Bob

         //去掉开头的?
         var params=location.search.substr(1);
         console.log(params);//uname=Bob

         //利用= 把字符串分割为数组
         var arr=params.split('=');
         console.log(arr);//['uname', 'Bob']

         //把数据写入div中
         var div=document.querySelector('div');
         div.innerHTML=arr[1];
    </script>
</body>