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. 小程序与app区别及测试点

    小程序和app区别 1. 用户获取渠道区别 小程序: 二维码.用户分享推荐.搜索小程序 APP: 需要去应用市场(或其他)下载 2. 下载.安装卸载 小程序: 不需下载安装,清除时直接删除小程序 AP ...

  2. cmd命令行ssh连接Linux服务器

    打开cmd工具 使用命令ssh连接服务器 ssh 用户名@ip地址 (不需要指定端口号,默认端口就是22) 输入密码即可

  3. 一文详解RocketMQ的存储模型

    摘要:RocketMQ 优异的性能表现,必然绕不开其优秀的存储模型. 本文分享自华为云社区<终于弄明白了 RocketMQ 的存储模型>,作者:勇哥java实战分享. RocketMQ 优 ...

  4. 使用C语言编程的7个步骤

    版权声明 本文作者:main工作室 本文链接:https://www.cnblogs.com/main-studio/p/17034891.html 版权声明:本文为 博客园 博主「main工作室」的 ...

  5. mysql 复制数据

    1.表存在 insert into table_name(key1,key2) select key3,key4 from table_name_2; 2.表不存在 create table test ...

  6. （6）go-micro微服务consul配置、注册中心

    目录 一 Consul介绍 1. 注册中心Consul基本介绍 2.注册中心Consul关键功能 3.注册中心Consul两个重要协议 二 Consul安装 1.使用docker拉取镜像 三 Conf ...

  7. python之路49 模板层标签 自定义过滤器 模板继承、模型层准备、ORM部分操作

    模板层之标签 {% if 条件1(可以自己写也可以是用传递过来的数据) %} <p>周三了 周三了</p> {% elif 条件2(可以自己写也可以用传递过来的数据) %} & ...

  8. YMOI 2019.6.8

    题解 YMOI 2019.6.8 前言 第二回考试,承让拿了第一次rank1,(●ˇ∀ˇ●) 题解 这次考试总体发挥比较好,每一道题都尽可能得取得了所能及的所有分.虽然多少还是有失误,不过在所难免.保 ...

  9. 一类(One-Class)分类器

    本文摘自博客和论文,参考文献请看文末. 一类分类技术概念 与传统的分类技术不同,一类分类技术仅采用隶属于一个类别的样本来训练分类器,其通常被用于某种极端场景,即训练样本仅包含正常样本,而异常样本不可得 ...

  10. 前端防错以及好用小tips指南总结

    @前端防錯以及好用小tips指南總結 1.一般情況下我們接收到的都是對象格式,某些情況下,需要接到後端傳過來的奇怪的字符串格式的JSON,需要解析成對象,但是有時候他們傳過來的格式有問題,會報錯 解決 ...