Window 对象

BOM (浏览器对象模型)

定时器-延时函数

js 执行机制

location 对象

navigator 对象

history 对象

BOM

  1. BOM (Browser Object Model) 是浏览器对象模型

  2. navigator + location+ document + history + screen --> window

  3. window 是浏览器内置的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的

  4. window 对象包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM

  5. document 是实现 DOM 的基础，它其实是依附于 window 的属性

  6. 依附于 window 对象的所有属性和方法，使用时都可以省略 window

定时器 - 延时函数

  1. js 内置的一个用来让代码延迟指定的函数， setTimeout

  2. 语法：setTimeout(回调函数，等待的毫秒数)

  3. setTimeout 仅仅只执行依次，所以可以理解为就是把一段代码延迟执行，平时省略 window

  4. 清除延时函数

    • let timer = setTimeout(回调函数，等待的毫秒数)

    • clearTimeout(timer)

  5. demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>解除定时器</button>
​
    <script>
        // 添加 延时函数 定时器
        let timer = setTimeout(function() {
            console.log(111);
        }, 3000)
        // 清除 延时函数 定时器
        let btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            clearTimeout(timer)
        })
    </script>
</body>
</html>

  1. 递归函数

    6.1 什么是递归函数？

    • 自己调用自己

    6.2 利用递归 与 延时函数 实现 间隔函数 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
​
    <script>
        // 利用递归函数 实现 间隔函数
        let div = document.querySelector('div')
        function fn() {
            div.innerHTML = new Date().toLocaleString()
            setTimeout(fn, 1000)
        }
        fn()
    </script>
</body>
</html>

js 执行机制

(js 执行机制)[js执行机制 - 简书 (jianshu.com)]

location 对象

  1. location 的数据类型是对象，用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

  2. 常用的属性和方法 (Location)[Location - Web API 接口参考 | MDN (mozilla.org)]

navigator 对象

  1. navigator 的数据类型是对象，它包含有关访问者浏览器的信息

  2. 常用属性和方法 (Navigator)[Navigator - Web API 接口参考 | MDN (mozilla.org)]

  3. 警告!!! 来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

    • navigator 数据可被浏览器使用者更改

    • 一些浏览器对测试站点会识别错误

    • 浏览器无法报告晚于浏览器发布的新操作系统

  4. 浏览器检测

    • 由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

      由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

      例子：if (window.opera) {...some action...}

history 对象

  1. history 的数据类型是对象，该对象与浏览器地址栏的操作对应，如前进、后退、历史记录等

  2. 常用属性和方法 (History)[History API - Web API 接口参考 | MDN (mozilla.org)]

DOM06~的更多相关文章

随机推荐

  1. java中的自增运算

    本文主要阐明java中的自增运算 1.当i ++ 与 ++ i作为单独语句时,作用与i = i +1一样 2.当赋值时,结果就不一样了 temp = i ++: 操作顺序:1)temp = i: 2) ...

  2. nuxt.js框架 如何打包 build

    nuxt脚手架开发好项目后怎么打包 以下是脚手架的package.json部分代码 "scripts": { "dev": "cross-env NO ...

  3. Linux利用crontab执行定时任务

    Linux利用crontab执行定时任务 crond简介 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认 ...

  4. python之路 57 linux 基础 命令与执行效果

    虚拟环境的安装与配置 1.VMware软件安装 这里有一个15版本和一个16版本的 链接:https://pan.baidu.com/s/1vkNxxQ6NS9q7XYJ6qiVMaQ 提取码:t3l ...

  5. Java学习笔记：2022年1月9日(其二)

    Java学习笔记:2022年1月9日(其二) 摘要:这篇笔记主要记录了1月9日学习的第四章的类的基础知识,以及访问器以及访问器于多线程的意义. 目录 Java学习笔记:2022年1月9日(其二) 1. ...

  6. render到底是什么，该如何使用它

    一.前言 1.vue程序的运行过程:模板 -> 进行编译 -> 生成ast树 -> 数据绑定 -> 生成render函数 -> 成虚拟dom树 -> 真实dom树 ...

  7. hashlib加密模块及subprocess远程命令模块

    hashlib加密模块及subprocess远程命令模块 一.hashlib加密模块 1.加密模块简介 1.加密模块简介 将明文数据进行加密处理,转变为密文数据再存储或者传输,这样的安全机制可以让用户 ...

  8. 字符串拼接输出-Predicate接口

    字符串拼接输出 下面的字符串数组当中存有多条信息,请按照格式""\姓名∶XX.性别:xx."的格式将信息打印出来.要求将打印姓名的动作作为第一个Consumer 接口的L ...

  9. java入门与进阶 P-2.7+P-3.1

    判断语句常见错误 忘了大括号 永远在if和else后面加上大括号,即使当时后面只有一条语句 if后面的分号 错误使用== 和= if只要求()里面的值是零或者非零 = 是赋值 == 是判断是否相同 代 ...

  10. 【随笔记】SiliconLabs Android Demo 编译

    AndroidStudio:3.5.2 AndroidPhone:XiaoMi5 (Android 8.0) AndroidDemo:3.1.4-44 AndroidDemo 源码路径:Simplic ...