1、Window对象

1、BOM(浏览器对象模型)

【图解】

【解释说明】：

window 是浏览器内置中的全局对象。
window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM
document 是实现 DOM 的基础，它其实是依附于 window 的属性

2、定时器-延时函数

【解释】： JavaScript 内置的一个用来让代码延迟执行的函数

【语法】：

setTimeout(回调函数,等待毫秒数)

【清除语法】：

let timer = setTimeout(回调函数,等待毫秒数)
clearTimeout(timer)

【注意事项】：

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

【案例】：5秒钟之后消失的广告

<body><img src="./images/ad.png" alt=""><script>let img = document.querySelector('img')setTimeout(function () {img.style.display = 'none'}, 3000)</script>
</body>

【两种定时器对比】

setInterval 的特征是重复执行，首次执行会延时
setTimeout 的特征是延时执行，只执行 1 次
setTimeout 结合递归函数，能模拟 setInterval 重复执行
clearTimeout 清除由 setTimeout 创建的定时任务

3、JS执行机制

【JS 是单线程】： JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

**【后果】：**单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

【JS 执行机制】

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。
同步任务：同步任务都在主线程上执行，形成一个执行栈。
异步任务：JS 的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型:
1、普通事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等

4、location对象

【解释】： location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分。

【常用属性和方法】：

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
search 属性获取地址中携带的参数，符号？后面部分
hash 属性获取地址中的啥希值，符号 # 后面部分
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

5、navigator对象

【解释】： navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

【常用属性和方法】

通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
!(function () {const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {location.href = 'http://m.itcast.cn'
}
})()

6、histroy对象

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

【常用属性和方法】：

2、本地存储

【解释】：

1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage和localStorage约 5M 左右

【localStorage】：

1、生命周期永久生效，除非手动删除否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3、以键值对的形式存储使用

【语法】

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

存储复杂数据类型存储：本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
将复杂数据转换成JSON字符串

JSON.stringify(复杂数据类型)

将JSON字符串转换成对象

JSON.parse(JSON字符串)

3、综合案例

需求：改为本地存储版本的学习信息表

代码：

* {margin: 0;padding: 0;
}a {text-decoration: none;color:#721c24;
}
h1 {text-align: center;color:#333;margin: 20px 0;}
table {margin:0 auto;width: 800px;border-collapse: collapse;color:#004085;
}
th {padding: 10px;background: #cfe5ff;font-size: 20px;font-weight: 400;
}
td,th {border:1px solid #b8daff;
}
td {padding:10px;color:#666;text-align: center;font-size: 16px;
}
tbody tr {background: #fff;
}
tbody tr:hover {background: #e1ecf8;
}
.info {width: 900px;margin: 50px auto;text-align: center;
}
.info  input {width: 80px;height: 25px;outline: none;border-radius: 5px;border:1px solid #b8daff;padding-left: 5px;
}
.info button {width: 60px;height: 25px;background-color: #004085;outline: none;border: 0;color: #fff;cursor: pointer;border-radius: 5px;
}
.info .age {width: 50px;
}

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/user.css">
</head><body><h1>新增学员</h1><div class="info">姓名：<input type="text" class="uname">年龄：<input type="text" class="age">性别: <select name="gender" id="" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资：<input type="text" class="salary">就业城市：<select name="city" id="" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></div><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody></tbody></table><script>// 读取本都存储的数据，封装为函数function getLocalDate() {let data = localStorage.getItem('data');console.log(data);// 如果有数据if (data) {// 返回对象类型的数据return JSON.parse(data);} else {//准备默认的数据let arr = [{ stuId: 1001, uname: '欧阳霸天', age: 19, gender: '男', salary: '20000', city: '上海' },{ stuId: 1002, uname: '令狐霸天', age: 29, gender: '男', salary: '30000', city: '北京' },{ stuId: 1003, uname: '诸葛霸天', age: 39, gender: '男', salary: '2000', city: '北京' },]// 默认写入三条数据localStorage.setItem('data', JSON.stringify(arr))}}// 调用获取数据模块getLocalDate();// 获取元素let tbody = document.querySelector('tbody');// 获取录入按钮let add = document.querySelector('.add');// 获取表单元素let uname = document.querySelector('.uname')let age = document.querySelector('.age')let gender = document.querySelector('.gender')let salary = document.querySelector('.salary')let city = document.querySelector('.city')// 封装渲染数据的函数function render() {// 接受返回的数据值let arr = getLocalDate()tbody.innerHTML = '';for (let i = 0; i < arr.length; i++) {// 创建trlet tr = document.createElement('tr');// 添加数据tr.innerHTML = `<td>${arr[i].stuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:" data-id=${i}>删除</a></td>`tbody.appendChild(tr)}}// 页面加载函数调用render()// 添加数据操作add.addEventListener('click', function () {// 获取表单的数据 添加到数组let arr = getLocalDate()arr.push({stuId: arr[arr.length - 1].stuId + 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value})// 存储数据localStorage.setItem('data', JSON.stringify(arr))render();uname.value = age.value = salary.value = ''gender.value = '男'city.value = '北京'})// 删除操作tbody.addEventListener('click', function (e) {// 读取本地存储的数据let arr = getLocalDate()if (e.target.tagName === 'A') {if (e.target.dataset.id === '0') {alert('当前数据不允许删除');return}arr.splice(e.target.dataset.id, 1)// 存储本地数据localStorage.setItem('data', JSON.stringify(arr))render()}})</script>
</body></html>

【效果】

15、JavaScript BOM-操作浏览器相关推荐

Web APIs五、BOM操作浏览器
零.文章目录 Web APIs五.BOM操作浏览器 1.Window对象 (1)BOM(浏览器对象模型) BOM(Browser Object Model ) 是浏览器对象模型 window对象是一个 ...
BOM(操作浏览器相关内容)
目录简介 BOM的三大对象顶级对象 window对象三大对象 location history navigator BOM的三大系列属性 client系列 offset系列 scroll系列 B ...
JavaScript BOM操作
什么是 BOM BOM (Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window. BOM 由一系列相关的对象构成,并且 ...
javascript的DOM、BOM操作
首先,网页是由一个一个xml的节点构成,页面加载成一刻树状.所以我们通过js操作元素的节点,对元素的增.删.改.查,对元素的属性.值.事件等操作属于DOM操作( document object mod ...
JavaScript中BOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
黑马JavaScript核心操作BOM与DOM课程笔记1-DOM
一.Web APIs 简介此部分的目标:能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性: 能够说出什么是 API: 能够说出什么是 Web API. 1. Web API ...
JavaScript核心 DOM 和 BOM操作
JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...
JavaScript BOM浏览器对象模型
什么是BOM浏览器对象模型? 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话 BOM:浏览器对象模型 //宿主对象 BOM 提供了很多对象,用 ...
JavaScript之BOM操作
目录一.前言二.常用的BOM操作 1. location 2. location.reload() 3. History 4.Navigator 5. Screen 6.innerHight/in ...
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
文章目录什么是BOM(浏览器对象模型) BOM中的window对象(顶级对象) window对象常见事件窗口加载事件 window.onload(等待文档内容全部加载完成才会触发,这样可以把js代 ...

15、JavaScript BOM-操作浏览器