JavaScript起步(二十一-BOM)| 一起学系列

112 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第19天,点击查看活动详情

BOM

  • window对象在调用属性和方法时,可以省略window不写;

  • 在全局作用域定义的全局变量,都是window的一个属性:var age = 19; console.log(window.age);输出结果也是19。

  • 但是存在特殊属性:name,如果定义新的变量,只会在原来的name属性上赋值,并且只能是字符串。所以尽量不要在全局作用域下定义name变量名。

  • 特殊属性:top,在window中,属性值指向的就是顶层对象window,这个属性是只读的,不能后期更改。局部作用域均可以使用

  • 对话框(基本上在工作中不会使用,会存在很多兼容问题)

    • alert(“hello”);

    • prompt(“请输入一个数字”,12);

    • confirm(“请问,您确定要删除这条数据吗?”);(confirm方法有返回值,根据按钮点击情况,如果确定返回true,如果取消返回false)

  • onload加载事件

    • 我们可以给window对象或者等元素添加onload加载事件,表示只有绑定事件的元素加载完毕才能触发事件,才能执行事件函数

    • 其中window对象加载完毕:指的是所有HTML结构加载完,并且外部引入资源(js、CSS、img、视频)也加载完毕

    • Chrome渲染机制:由于图片加载时间过长,避免等待,图片在加载过程中,会先执行后面的js代码。问题:后续需要使用图片的高度和宽度时,js可能无法获取

    • 应用:利用window.onload事件,可以将js代码提前到HTML结构之前(即body之前)

    • 注意:一个页面中只能有一个window.onload事件

  • 延时器(异步语句)

    • 延时器是window对象的一个方法,类似于定时炸弹

    • 语法:window.setTimeout(func, time);

    • 第一个参数:延时执行的函数,可也是匿名函数定义,或者是一个函数名的引用,注意不要加()

    • 第二个参数:延时的时间,以毫秒计数,1000毫秒等于1秒

    • 功能:在指定的时间后,延时执行一个函数

    • 同步语句:在前面的代码未加载完成时,后面的须等待,单线程

    • 异步语句:前面的代码加载的时候,这个代码同时加载,不会影响后面的代码加载,在内存中开辟了一个新的进程

 

  • 清除延时器

    • 语法:window.clearTimeout(timeout);

    • 参数:指定的延时器变量名引用

    • 功能:清除指定的延时器

    • 注意:清除的延时器需要存储到一个变量中,便于后期清除调用