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. 深入解读MySQL InnoDB存储引擎Update语句执行过程

    参考b站up 戌米的论文笔记 https://www.bilibili.com/video/BV1Tv4y1o7tA/ 书籍<mysql是怎样运行的> 极客时间<mysql实战45讲 ...

  2. 在IQuery中使用除法提示"Numeric value does not fit in a System.Decimal"

    起因 有个需求是需要汇总(单耗=单件用量*1+损耗率)的值,由于现在我们数据库中存的XX率都是放大了一百倍(即10%数据库存的是10),然后就很自然的写了个linq汇总如下 materialOrder ...

  3. Mybatis-plus实现数据库的增删改查操作

    目录 1.MybatisPlus简介 2.MybatisPlus注解介绍 3.常用方法 4.SpringBoot整合MybatisPlus实现增删改查的一个简单Demo 5.参考资料 1.Mybati ...

  4. 【博学谷学习记录】超强总结，用心分享|前端CSS总结（一）

    CSS总结(一) shift+alt,选中多行 外链式 <link rel="stylesheet" href="./my.css"> 1 选择器 ...

  5. PostgreSQL(02): PostgreSQL常用命令

    目录 PostgreSQL(01): Ubuntu20.04/22.04 PostgreSQL 安装配置记录 PostgreSQL(02): PostgreSQL常用命令 PostgreSQL 常用命 ...

  6. 网盘不限速下载器，全速下载，快过SVIP

    一.软件简介 该软件利用作者开通的SVIP下载文件到服务器,然后由服务器传送给客户端实现不限速下载,所有功能(下载文件夹.批量下载)基本都免费开放了,现在每天每个用户拥有免费的20G的流量可以使用,已 ...

  7. 全志V3S 调试串口更改或关闭

    有时项目外设比较多,很容易造成串口不够用的情况. 最近就遇到了,新增加一个GPS模块串口的,串口现在外部只有原来的调试串口可以用,所以 尝试将调试口更改为普通串口. 经过网上看大神们的文章和自己摸索, ...

  8. 【Java刷题】初始化List应该选择ArrayList还是LinkedList

    文章目录 前言 题目 解题思路 遇到的坑:ArrayList和LinkedList 未通过代码 通过代码 小结 ArrayList和LinkedList的区别 在刷题的时候应该如何选择 排序效率 测试 ...

  9. Angularjs的重要概念

    AngularJS的重要概念 MVC模式 AngularJS最早按照MVC模式设计,在这种设计模式下,AngularJS组件可以分为: M: Model,即模型,是应用程序中用于处理应用程序数据逻辑的 ...

  10. C语言定制DEBUG信息

    C语言定制DEBUG信息 背景与问题 在日常编写程序中,我们经常需要输出一些调试信息帮助我们 DEBUG 或者更好的编程,通常我们的做法是这样的: 在需要的地方直接printf(...)输出有用的信息 ...