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. vue elementui弹框内 富文本编辑器的使用，及踩坑

    最近vue项目中遇到弹框内使用富文本编辑器,遇到最大的问题是,在打开弹框后才能创建富文本编辑器,并且只能创建一次,多次点击弹框,报错: Error in v-on handler: "Err ...

  2. python之路40 前端之 CSS 标签查询

    表单标签的补充说明 基于form表单发送数据 1.用于获取用户数据的标签至少应该含有name属性 name属性相当于字典的键 用户输入的数据会被保存到标签的value属性中 value属性相当于字典的 ...

  3. [深度探索C++对象模型]关于成员初始化列表（member initiallization list）

    四种特殊情况: 1.当初始化一个reference member时. 2.当初始化一个const member时. 3.当初始化一个base class的constructor,而它拥有一组参数时. ...

  4. 遗传算法求TSP问题

    一.实验内容及目的 本实验以遗传算法为研究对象,分析了遗传算法的选择.交叉.变异过程,采用遗传算法设计并实现了商旅问题求解,解决了商旅问题求解最合适的路径,达到用遗传算法迭代求解的目的.选择.交叉.变 ...

  5. 微信小程序搜索优化指南(SEO)

    前言 其实在 2019 年上半年,微信就发布了基于小程序页面的搜索. 为了更好地发现及理解小程序的页面,结合过去一段时间来我们遇到的各种情况,强烈建议各位开发者花一些宝贵的时间认真阅读本文. 小程序爬 ...

  6. chatGPT vscode 体验

    体验秘钥 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 多人用可能有点卡,重在体验. 自己(中国)想注册账号如下 步骤一:找到入口 搜索Ope ...

  7. 浅谈Python中的if，可能有你不知道的

    Python中的if,没那么简单,虽然也不难 https://docs.python.org/zh-cn/3.9/reference/compound_stmts.html#if python语言参考 ...

  8. 深度优先搜索算法-dfs讲解

    迷宫问题 有一个迷宫: S**. .... ***T (其中字符S表示起点,字符T表示终点,字符*表示墙壁,字符.表示平地.你需要从S出发走到T,每次只能向上下左右相邻的位置移动,不能走出地图,也不能 ...

  9. P16_发布-小程序的推广与运行数据的查看

    协同工作和发布 - 发布上线 基于小程序码进行推广 相对于普通二维码来说,小程序码的优势如下: 在样式上更具辨识度和视觉冲击力 能够更加清晰地树立小程序的品牌形象 可以帮助开发者更好地推广小程序 获取 ...

  10. STM32F4库函数初始化系列：PWM输出

    1 void _TIM4_Configuration(void) 2 { 3 /* TIM4 Configuration --------------------------------------- ...