DOM06~
Window 对象
BOM (浏览器对象模型)
定时器-延时函数
js 执行机制
location 对象
navigator 对象
history 对象
BOM
BOM (Browser Object Model) 是浏览器对象模型
navigator + location+ document + history + screen --> window
window 是浏览器内置的全局对象,我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
window 对象包含了 navigator、location、document、history、screen 5个属性,即所谓的 BOM
document 是实现 DOM 的基础,它其实是依附于 window 的属性
依附于 window 对象的所有属性和方法,使用时都可以省略 window
定时器 - 延时函数
js 内置的一个用来让代码延迟指定的函数, setTimeout
语法:setTimeout(回调函数,等待的毫秒数)
setTimeout 仅仅只执行依次,所以可以理解为就是把一段代码延迟执行,平时省略 window
清除延时函数
let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)
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>
递归函数
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 对象
location 的数据类型是对象,用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面
常用的属性和方法 (Location)[Location - Web API 接口参考 | MDN (mozilla.org)]
navigator 对象
navigator 的数据类型是对象,它包含有关访问者浏览器的信息
常用属性和方法 (Navigator)[Navigator - Web API 接口参考 | MDN (mozilla.org)]
警告!!! 来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:
navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统
浏览器检测
由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 "window.opera",您可以据此识别出 Opera。
例子:if (window.opera) {...some action...}
history 对象
history 的数据类型是对象,该对象与浏览器地址栏的操作对应,如前进、后退、历史记录等
常用属性和方法 (History)[History API - Web API 接口参考 | MDN (mozilla.org)]
DOM06~的更多相关文章
随机推荐
- PPT排版技巧
- Prometheus及Grafana监控服务的安装使用
说明 Prometheus 是一个开放性的监控解决方案,通过 Node Exporter 采集当前主机的系统资源使用情况,并通过 Grafana 创建一个简单的可视化仪表盘. docker 安装 pr ...
- 如何通过Java应用程序将Word转为Excel
平时在工作中,很多小伙伴会习惯性地将文件保存为Word文档格式,但有时会发现某些文件如果保存成Excel表格可能会更好地呈现.例如有的文本在Word文本中不如在Excel工作表编辑计算方便,所以要把W ...
- 可持久化杀手——rope学习笔记
概述 std::rope,内部一说是可持久化平衡树,一说是块状链表. 它可以实现很多可持久化数组问题. 基本使用 #include<bits/extc++.h> using namespa ...
- 通过Google Cloud Storage(GCS)管理Terraform的状态State
管理Terraform状态文件的最佳方式是通过云端的统一的存储,如谷歌云就用GCS. 首先要创建一个Bucket: $ gsutil mb -p pkslow -l us-west1 -b on gs ...
- WeetCode4 —— 二叉树遍历与树型DP
一丶二叉树的遍历 1.二叉树遍历递归写法与递归序 了解过二叉树的朋友,最开始肯定是从二叉树的遍历开始的,二叉树遍历的递归写法想必大家都有所了解. public static void process( ...
- cordova第三方插件的创建,修改以及调试指南---真机调试,浏览器调试
cordova使用以及真机调试,浏览器调试 创建插件 点击参考此文-- 超详细手把手教你cordova开发使用指南+自定义插件 插件修改注意事项--很重要 每次对自己代码目录里面任何内容进行修改后 都 ...
- angular+ZORRO中nz-table 大小屏幕自适应、滚动条、点击事件
首先来说屏幕自适应 HTML <div class="container right_table"> <nz-table #basicTable nzBorder ...
- Java 进阶P-5.3+P-5.4
封装 增加可扩展性 可以运行的代码!=良好的代码 对代码做维护的时候最能看出代码的质量 如果想要增加一个方向,如down或up 用封装来降低耦合 Room类和Game类都有大量的代码和出口相关 尤其是 ...
- 读Java8函数式编程笔记04_类库
1. 默认方法 1.1. 接口中定义的包含方法体的方法,方法名有default关键字做前缀 1.1.1. 在任何接口中,无论函数接口还是非函数接口,都可以使用该方法 1.2. Collection接口 ...