目录
Window对象
1.BOM(浏览器对象模型)
// BOM
// BOM(Browser Object Model ) 是浏览器对象模型
// window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
// window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模 型）
//document 是实现 DOM 的基础，它其实是依附于 window 的属性。
// 注：依附于 window 对象的所有属性和方法，使用时可以省略 window
// 如:window.scroll
// window.alert()
// window是最大对象
var a=19;//使用var声明的变量其实就是相当于给window对象添加属性
2. 定时器-延时函数
// 定时器-延时函数
// 🏆 JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
// 语法：
// setTimeout();
// let id = setTimeout(function () { alert('1秒到了') }, 1000)
//只执行一次
// 这个方法有两个参数,
// 第一个参数是一条或一组js语句,并用引号括住他们,
// 第二个参数是要等待的时间以毫秒为单位.
// setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window,在延时函数中的this是window
// 🏆清除延时函数：
clearTimeout()
// 用clearTimeout()方法来停止计时,括号中写指定要停止的定时器的标识符.
<!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>
<style>
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<button>解除定时器</button>
<img src="../素材/images/ad.png" alt="">
<script>
// 定时器-延时函数
// 🏆 JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
// 语法：
// setTimeout();
// let id = setTimeout(function () { alert('1秒到了') }, 1000)
let id = setTimeout(function () {
// alert('2秒到了')
// display之前一定要加style
console.log(this);//window
document.querySelector('button').disabled = true
document.querySelector('img').style.display = 'none'
}, 2000)
//只执行一次
// 这个方法有两个参数,
// 第一个参数是一条或一组js语句,并用引号括住他们,
// 第二个参数是要等待的时间以毫秒为单位.
// setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
// 🏆清除延时函数：
document.querySelector('button').addEventListener('click',
function () {
clearTimeout(id)
})
// 用clearTimeout()方法来停止计时,括号中写指定要停止的定时器的标识符.
</script>
</body>
</html>
4.递归实现setinterval
// 递归函数:自己调用自己的函数
let num = 0
function fn() {
console.log('加载中~~~~');
num++
if (num > 100) {
console.log('加载失败');
return
}
fn()
}
fn()// 用settimeout递归实现setinterval
<!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>
// 递归实现setinterval
let div=document.querySelector('div')
function fn(){
// 输出时间
div.innerHTML=new Date().toLocaleString()
// 递归
setTimeout(fn,1000)
}
fn()
// 两种定时器对比：
// setInterval 的特征是重复执行，首次执行会延时
// setTimeout 的特征是延时执行，只执行 1 次 setTimeout 结合递归函数，能模拟 setInterval 重复执行
// clearTimeout 清除由 setTimeout 创建的定时任务
</script>
</body>
</html>5.JS执行机制
// 🏆 JS 是单线程
// JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比
// 如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
// 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
// 🏆同步和异步
// 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许
// JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。
// 同步任务
// 同步任务都在主线程上执行，形成一个执行栈。
// 异步任务
// JS 的异步是通过回调函数实现的。
// 一般而言，
// 异步任务有以下三种类型:
// 1、普通事件，如 click、resize 等 2、资源加载，如 load、error 等 3、定时器，包括 setInterval、setTimeout 等
// 异步任务相关添加到任务队列中（任务队列也称为消息队列）。
// 🏆JS 执行机制
// 1. 先执行执行栈中的同步任务。 2. 异步任务放入任务队列中。
// 3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务
// 结束等待状态，进入执行栈，开始执行。
6.local对象
// location对象
// location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
// 常用属性和方法：
// href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
// search 属性获取地址中携带的参数，符号 ？后面部分
// hash 属性获取地址中的啥希值，符号 # 后面部分
// reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
<!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>
<a href="/#/one">第一个</a>
<button>刷新</button>
<a href="http://www.hao123.com" class="load">支付成功,5秒后自动跳转</a>
<script>
// location对象
// location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
// 常用属性和方法：
// href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
// search 属性获取地址中携带的参数，符号 ？后面部分
// hash 属性获取地址中的啥希值，符号 # 后面部分
// reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
console.log(location.href);//得到url地址
// location.href = 'http://www.hao123.com'//跳转到hao123
let num = 5
let id = setInterval(function () {
num--
document.querySelector('.load').innerHTML = `支付成功,${num}秒后自动跳转`
if (num <= 0) {
clearInterval(id)
location.href = 'http://www.hao123.com'
}
}, 1000)
// 完整地址：https://www.baidu.com/s?tn=50000021_hao_pg&ie=utf-8&sc=UWd1pgw-pA7EnHc1FMfqnHmvnjDYnH61nHf4rauW5y99U1Dznzu9m1YdnHT3rHT4rj6&ssl_sample=normal&srcqid=6625912385234129344&H123Tmp=nunew7&word=%E6%92%92%E5%A4%A7%E5%A4%A7
console.log(location.search);
// search获取的是？之后的tn=50000021_hao_pg&ie=utf-8&sc=UWd1pgw-pA7EnHc1FMfqnHmvnjDYnH61nHf4rauW5y99U1Dznzu9m1YdnHT3rHT4rj6&ssl_sample=normal&srcqid=6625912385234129344&H123Tmp=nunew7&word=%E6%92%92%E5%A4%A7%E5%A4%A7
console.log(location.hash);
// 完整:https://music.163.com/#/download
// hash:#/download
document.querySelector('button').addEventListener('click', function () {
location.reload(true)//加true是强制刷新
})
// 重新加载reload()
//强制刷新ctrL+f5 只接更新最新内容
</script>
</body>
</html>7.navigeter对象
// navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
console.log(navigator.userAgent);
8.history对象
// history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
history.forward()前进
history.back()后退
history.go(1)//1是前进一个页面 里面放数字正负决定前进与后退,数字决定前进后退几个页面
document.querySelector('.forward').addEventListener('click', function () {
history.forward()
})
document.querySelector('.back').addEventListener('click', function () {
history.back()
})
document.querySelector('.go').addEventListener('click', function () {
history.go(1)//1是前进一个页面
})本地存储
localStorage
// 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在
// 本地存储大量的数据，HTML5规范提出了相关解决方案。
// 1、数据存储在用户浏览器中
// 2、设置、读取方便、甚至页面刷新不丢失数据
// 3、容量较大，sessionStorage和localStorage约5M 左右
// 🏆localStorage
// 1、生命周期永久生效，除非手动删除 否则关闭页面也会存在
// 2、可以多窗口（页面）共享（同一浏览器可以共享）
// 3. 以键值对的形式存储使用
// 💎存储数据：
// localStorage.setItem('键', '值')
localStorage.setItem('uname', '别无人员')// 💎 获取数据：
localStorage.getItem('uname')
console.log(localStorage.getItem('uname'));//💎 删除数据：
// localStorage.removeItem('uname')
localStorage.clear()// 删除所有的 localstorage
// 🎁 存储复杂数据类型存储
// 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
// JSON.stringify(复杂数据类型) 将复杂数据转换成JSON字符串 存储 本地存储中
// JSON.parse(JSON字符串) 将JSON字符串转换成对象 取出 时候使用
//JSON属性和值都是双引号进行包含
// 很多人搞不清楚 JSON和JS对象的关系，其至连谁是谁都不清楚。其实，可以这么理解:JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。
// JSON.stringify()//一定要将复杂数据(引用数据类型)转换成JSON字符串
// JSON.parse()// 将JSON字符串转换成对象 取出 时候使用
// 🎁 存储复杂数据类型存储
// 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
// JSON.stringify(复杂数据类型) 将复杂数据转换成JSON字符串 存储 本地存储中
// JSON.parse(JSON字符串) 将JSON字符串转换成对象 取出 时候使用
let obj = [
{
name: '彭廷伟',
age: 23,
salary: "$40000"
}
, {
name: '刘进强',
age: 23,
salary: "$40000"
}
]
//JSON属性和值都是双引号进行包含
// 很多人搞不清楚 JSON和JS对象的关系，其至连谁是谁都不清楚。其实，可以这么理解:JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。
// JSON.stringify()//一定要将复杂数据(引用数据类型)转换成JSON字符串
obj = JSON.stringify(obj)
localStorage.setItem('obj', obj)
// JSON.parse()// 将JSON字符串转换成对象 取出 时候使用
console.log(
JSON.parse(localStorage.getItem('obj'))
);sessionStorage
// sessionStorage（了解）
// 1、生命周期为关闭浏览器窗口
// 2、在同一个窗口(页面)下数据可以共享
// 3. 以键值对的形式存储使用
// 4. 用法跟localStorage 基本相同