本文详细介绍了WebAPI的基础知识，包括DOM操作如选择、修改元素内容和属性，事件监听机制，定时器的使用，以及事件流和事件处理。还涵盖了JavaScript中的变量声明、事件处理、页面加载事件、滚动事件和日期对象等核心概念。
1、Web API 基本认识
变量声明
- 变量声明有三个：
var、let、const - 我们应该用哪个好呢？
- 首先排除
var，老派写法，问题很多，可以淘汰掉… - 建议：
const优先，尽量使用 const，原因是：const语义化更好- 很多变量我们声明后就不会改变了
- 实际开发也是，比如 React 框架，基本
const
const声明的值不能更改，而且const声明变量的时候需要里面进行初始化- 但是对于引用数据类型，
const声明的变量，里面存的不是值，是地址
1.1、作用和分类
- 作用：就是使用 JS 去操作 html 和浏览器
- 分类：DOM（文档对象模型）、BOM（浏览器对象模型）
1.2、什么是DOM
- DOM（Document Object Model — 文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的 API
- 白话文：DOM 是浏览器提供的一套专门用来 操作网页内容 的功能
- DOM 的作用：
- 开发网页内容特效和实现用户交互
1.3、DOM树
- DOM 树是什么
- 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
- 描述网页内容关系的名词
- 作用：文档树直观的体现了标签与标签之间的关系
1.4、DOM对象（重要）
- DOM 对象：浏览器根据 html 标签生成的 JS 对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
- DOM 的核心思想
- 把网页内容当作对象来处理
document对象- 是 DOM 里提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作页面内容的
- 网页所有内容都在
document里面
2、获取 DOM 对象
2.1、根据 css 选择器来获取 DOM 元素
-
选择匹配的第一个元素
-
语法：
document.querySelector('css选择器') -
参数：包含一个或多个有效的 css 选择器字符串
-
返回值：css 选择器匹配的第一个元素，一个
HTMLElement对象。如果没有匹配到，则返回空
-
-
选择匹配的多个元素
-
语法：
document.querySelectorAll('css选择器') -
参数：包含一个或多个有效的 css 选择器字符串
-
返回值：css 选择器匹配的**
NodeList对象集合**（伪数组），需要遍历得到每一个元素
-
2.2、其他获取 DOM 元素方法（了解）
// 根据 id 获取一个元素
document.getElementById('nav')
// 根据 标签 获取一个元素
document.getElementByTagName('div')
// 根据 类名 获取一个元素
document.getElementByClassName('myclass')
3、操作元素内容
3.1、对象 innerText 属性
const info = document.querySelector('.info')
console.log(info.innerText)
info.innerText = 'hello 我是刘德华'
- 将文本内容添加/更新到任意标签位置
- 显示的是纯文本，不解析标签
3.2、对象 innerHtml 属性
const info = document.querySelector('.info')
console.log(info.innerText)
info.innerText = '<h1>hello 我是刘德华</h1>'
- 将文本内容添加/更新到任意标签位置
- 会解析标签，多标签建议使用模板字符
4、操作元素属性
4.1、操作常用元素属性
-
常见的常用属性比如：
href、title、src等等 -
语法：
对象.属性 = 值 -
举例说明：
// 1. 获取元素 const pic = document.querySelector('img') // 2. 操作元素 pic.src = './images/b02.jpg' pic.title = '刘德华 黑马演唱会'
4.2、操作元素样式属性
4.2.1、通过 style 属性操作 css
-
语法：
对象.style.样式属性 = 值 -
举例说明：
const box = document.querySelector('.box') // 修改元素样式 box.style.width = '200px' box.style.marginTop = '15px' box.style.backgroundColor = 'pink' -
注意：
- 修改样式通过
style属性引出 - 如果属性有 - 连接符，需要转换为 小驼峰 命名法
- 赋值的时候，需要的时候不要忘记加 css单位
- 修改样式通过
4.2.2、通过 className 修改样式
-
如果修改的样式比较多，直接通过
style属性修改比较繁琐，我们可以通过借助于 css 类名的形式 -
语法：
// active 是一个css类名 元素.className = 'active' 元素.className = 'nav box' -
注意：
- 由于 class 是关键字，所以使用
className代替 className是使用新值换旧值，如果需要添加一个类，需要保留之前在类名
- 由于 class 是关键字，所以使用
4.2.3、通过 classList 修改样式
-
为了解决 className 容易覆盖以前的类名，我们可以通过 classList 方式追加和删除类名
-
语法：
// 追加一个类 元素.classList.add('类名') // 删除一个类 元素.classList.remove('类名') // 切换一个类 元素.classList.toggle('类名')
4.3、操作表单元素属性
- 获取：DOM对象.属性名
- 设置：DOM对象.属性名 = 新值
表单.value = '用户名'
表单.type = 'password'
- 表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为 true 代表添加了该属性，如果是 false 代表移除了该属性
- 比如：
disabled、checked、selected
4.4、自定义属性
- 标准属性：标签天生自带的属性，比如：
class、id、title等，可以直接使用点语法操作 - 自定义属性：
- 在 html5 中推出来了专门的
data-自定义属性 - 在标签上一律以
data-开头 - 在 DOM 对象上一律以
dataset对象方式获取
- 在 html5 中推出来了专门的
<body>
<div class="box" data-id="10">盒子</div>
<script>
const box = document.querySelector('.box')
console.log(box.dataset.id)
</script>
</body>
5、定时器 - 间歇函数
-
开启定时器
setInterval(函数, 间隔时间)作用：每间隔一段时间就调用这个函数，单位是毫秒
注意：函数名字不需要加括号；定时器返回的是一个 id 数字
-
关闭定时器
let 定时器ID = setInterval(函数, 间隔时间) clearInterval(定时器ID)
6、事件监听
- 什么是事件？
- 事件是在编程时系统内发生的动作或者发生的事情
- 比如用户在网页上单击了一个按钮
- 什么是事件监听？
- 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或注册事件。比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
6.1、事件监听
-
语法
元素对象.addEventListener('事件类型', 要执行的函数) -
事件监听三要素
- 事件源：那个 DOM 元素被事件触发了，要获取 DOM 元素
- 事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等等
- 事件调用的函数：要做什么事
6.2、事件监听版本
- DOM L0：
事件源.on事件 = function(){} - DOM L2：
事件源.addEventListener(事件, 事件处理函数) - 区别：on 方式会被覆盖，
addEventListener方式可以绑定多次，拥有事件更多特性，推荐使用
7、事件类型
| 鼠标事件 - 鼠标触发 | 焦点事件 - 表单获得光标 | 键盘事件 - 键盘触发 | 文本事件 - 表单输入触发 |
|---|---|---|---|
click 鼠标点击 | focus 获得焦点 | keydown 键盘按下触发 | input 用户输入触发 |
mouseenter 鼠标经过 | blur 失去焦点 | keyup 键盘抬起触发 | |
mouseleave 鼠标离开 |
8、事件对象
8.1、获取事件对象
-
事件对象是什么
- 也是个对象，这个对象里有事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就存放了鼠标点在哪个位置等信息
-
使用场景
- 可以判断用户按下了哪个元素，比如按下回车键可以发布新闻
- 可以判断鼠标点击了哪个元素，从而做出相应的操作
-
语法：在事件绑定的回调函数的第一个参数就是事件对象；一般命名为 event / ev / e
元素.addEventListener('click', function (e) { })
8.2、常用部分属性
type：获取当前的事件类型clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置offsetX/offsetY：获取光标相对于当前 DOM 元素左上角的位置key：用户按下的键盘键的值（现在不提倡使用keyCode，已废除）
9、环境对象
环境对象：指的是函数内部特殊变量 this，它代表着当前函数运行时所处的环境
作用：弄清楚 this 的指向，可以让我们的代码更简洁
- 函数的调用方式不同，
this指代的对象也不同 - 【谁调用，
this就是谁】是判断this指向的粗略规则 - 直接调用函数，其实相当于是
window.函数，所以this指代window
10、回调函数
如果将函数 A 作为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数作为参数传递给另外一个函数的时候，这个函数就是回调函数
-
常见使用场景
function fn() { console.log('我是回调函数') } // fn 传递给了 steInterval，fn 就是回调函数 setInterval(fn, 1000)
11、事件流
11.1、事件流的两个阶段说明
- 事件流指的是事件完整执行过程中的流动路径
| 捕获阶段 | –> 1 --> | –> 2 --> | –> 3 --> | ---------------> | -+> |
|---|---|---|---|---|---|
| Document | Element html | Element body | Element div | 4 | |
| 冒泡阶段 | <-- 7 <– | <-- 6 <– | <-- 5 <– | <---------------- | <-+ |
- 说明：假设页面里有个 div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
- 简单来说：捕获阶段时 从父到子，冒泡阶段是 从子到父
11.2、事件捕获
-
概念：从 DOM 的根元素开始去执行对应的事件（从外到里）
-
事件捕获需要写对应的代码才能看到效果
-
代码：
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制) -
说明：
- addEventListener 第三个参数传入 true 代表是捕获阶段触发（很少使用）
- 若传入 false 代表冒泡阶段触发，默认为 false
- 若是用 L0 事件监听，则只有冒泡阶段，没有捕获阶段
11.3、事件冒泡
- 概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。
- 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
- 事件冒泡默认是存在的
- L2 事件监听第三个参数是 false，或者默认都是冒泡
11.4、阻止冒泡
-
问题：因为默认就有冒泡模式的存在，所有容易导致事件影响到父级元素
-
需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
-
前提：阻止事件冒泡需要拿到事件对象
-
语法：
事件对象.stopPropagation() -
注意：此方法可以阻断事件的六点传播，不光在冒泡阶段有效，捕获阶段也有效
11.5、阻止默认行为
我们某些情况下需要阻止默认行为，比如：阻止链接跳转，表单域跳转
-
语法：
事件对象.preventDefault() -
例子
元素.addEventListener('submit', function (e) { e.preventDefault() })
11.6、解绑事件
-
on事件方式，直接使用
null覆盖就可以实现事件的解绑-
语法：
// 绑定事件 btn.onclick = function () { alert('点击了') } // 解绑事件 btn.onclick = null
-
-
addEventListener方式，必须使用
removeEventListener(事件类型，事件处理函数，[获取捕获阶段或冒泡阶段])-
语法：
function fn() { alert('点击了') } // 绑定事件 btn.addEventListener('click', fn) // 解绑事件 btn.removeEventListener('click', fn) -
注意：匿名函数无法被解绑
-
鼠标经过事件的区别
mouseover和mouseout会有冒泡效果mouseenter和mouseleave没有冒泡效果（推荐）
12、事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
- 优点：减少注册次数，可以提高程序性能
- 原理：事件委托其实是利用事件冒泡的特点
- 给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素的事件
- 实现：
事件对象.target.tagName可以获得真正触发元素的事件
13、其他事件
13.1、页面加载事件
13.1.1、load 事件
-
加载外部资源（如图片、外联css、JavaScript等）加载完毕时触发的事件
-
为什么要学？
- 有些时候要等页面资源全部处理完了做一些事情
- 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到，会报错
-
事件名：
load -
监听页面所有的资源加载完毕：
- 给
window添加load事件
// 页面加载事件 window.addEventListener('load', function(){ // 执行的操作 }) - 给
-
注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定
load事件
13.1.2、DOMContentLoaded 事件
-
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
-
事件名：
DOMContentLoaded -
监听页面 DOM 加载完毕：
- 给
document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', function(){ // 执行的操作 }) - 给
13.2、元素滚动事件
13.2.1、scroll 事件
-
滚动条在滚动的时候持续触发的事件
-
为什么要学？
- 很多页面需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
-
事件名：
scroll -
监听这个页面滚动：
- 给
window或document添加scroll事件
window.addEventListener('scroll', function(){ // 页面滚动时，执行的操作 }) - 给
-
监听某个元素的内部滚动直接给某个元素加即可
13.2.2、获取位置
-
使用场景：
- 我们想要页面移动一段距离，比如 100px，就让某些元素显示隐藏。那我们怎么知道页面滚动了 100px 呢？
- 就可以使用
scroll来检测滚动的距离
-
scrollLeft和scrollTop属性- 获取被卷去的大小，不带单位
- 获取元素内容往左、往上滚出去看不到的距离
- 这两个值是可读写的
-
尽量在
scroll事件里面获取被卷去的距离div.addEventListener('scroll', function() { console.log(this.scrollTop) })
获取 html 对象元素的写法：document.documentElement
13.2.3、滚到指定的坐标
-
scrollTo()方法可以把内容滚动到指定的坐标// 让页面滚动到 y 轴 1000px 的位置 window.scrollTo(0, 1000)
13.3、页面尺寸事件
-
会在窗口尺寸改变的时候触发事件
resize
window.addEventListener('resize', function () { // 执行的代码 }) -
检测屏幕宽度
window.addEventListener('resize', function () { let w = document.documentElement.clientWidth console.log(w) }) -
获取宽高：
- 获取元素的可见部分的
宽高（不包含border，margin，滚动条等） clientWidth和clientHeight
- 获取元素的可见部分的
14、元素尺寸与位置
-
使用场景：
- 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事情。
- 简单说，就是通过 JS 的方式，得到元素在页面中的位置
- 这样我们就可以做：页面滚动到这个位置，就可以做某些操作，省去计算了
-
获取宽高：
- 获取元素自身宽高、包含元素自身设置的
宽高、padding、border offsetWidth和offsetHeight- 获取出来的是数值，方便计算
- 注意：获取的是可视宽高，如果盒子隐藏了，获取的结果是0
- 获取元素自身宽高、包含元素自身设置的
-
获取位置：
- 获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop注意是只读属性
总结：
| 属性 | 作用 | 说明 |
|---|---|---|
scrollLeft 和 scrollTop | 被卷去的头部和左侧 | 配合页面滚动来用，可读写 |
clientWidth 和 clientHeight | 获得元素宽度和高度 | 不包含 border margin 滚动条用于 JS 获取元素大小，只读属性 |
offsetWidth 和 offsetHeight | 获得元素宽度和高度 | 包括 border padding 滚动条等等，只读属性 |
offsetLeft 和 offsetTop | 获得元素距离自己定位 父级元素的左、上距离 | 获取元素位置的时候使用，只读属性 |
15、日期对象
- 日期对象：用来表示时间的对象
- 作用：可以得到当前系统的时间
15.1、实例化
-
在代码中发现了 new 关键字时，一般将这个操作称为实例化
-
创建一个时间对象并获取时间
-
获得当前时间
const date = new Date() -
获得指定时间
const date = new Date('2008-8-8') console.log(date)
-
15.2、日期对象的方法
使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
| 方法 | 作用 | 说明 |
|---|---|---|
getFullYear() | 获得年份 | 获取四位年份 |
getMonth() | 获得月份 | 取值为 0-11 |
getDate() | 获得月份中的每一天 | 不同月份取值也不相同 |
getDay() | 获取星期 | 取值为 0-6（第一天是星期天） |
getHours() | 获取小时 | 取值为 0-23 |
getMinutes() | 获取分钟 | 取值为 0-59 |
getSeconds() | 获取秒 | 取值为 0-59 |
15.3、时间戳
-
使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
-
什么是时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
-
算法：
- 将来的时间戳 - 现在的时间戳 = 剩余的毫秒数
- 剩余的毫秒数 转换为 剩余时间的 年月日分秒时 就是倒计时时间
- 比如：将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
- 1000ms 转换为就是 0小时0分1秒
三种方式获取时间戳
-
getTime()const date = new Date() date.getTime() -
+new Date() -
Date.now()- 无需实例化
- 但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
16、节点操作
16.1、DOM 节点
- DOM 节点：DOM 树里面每一个内容都称之为节点
- 节点类型：
- 元素节点：
- 所有的标签，比如：body、div
- html 时根节点
- 属性节点
- 所有的属性，比如：href
- 文本节点
- 所有的文本
- 其他
- 元素节点：
16.2、查找节点
-
重点是元素节点
-
节点关系：针对的找亲戚返回的都是对象 （父节点、子节点、兄弟节点）
16.2.1、父节点查找
parentNode属性- 返回最近一级的父节点，找不到则返回
null
子元素.parentNode
16.2.2、子节点查找
-
childNodes获得所有子节点、包括文本节点(空格、换行)、注释节点等 -
children属性(重点)- 仅获得所有元素节点
- 返回的是一个伪数组
父元素.children
16.2.3、兄弟节点查找
- 下一个兄弟节点
nextElementSibling属性
- 上一个兄弟节点
previousElementSibling属性
16.3、增加节点
- 很多情况下，我需要在页面中增加元素。比如：点击发布按钮，可以新增一条信息
- 一般情况下，我新增节点，按照如下操作：
- 创建一个新的节点
- 把创建的新的节点放入到指定的元素内部
16.3.1、创建节点
- 即创造出一个新的网页元素，再添加到网页内部，一般先创建节点，然后插入节点
- 创建元素节点方法
// 创造一个新的元素节点
document.createElement('标签名')
16.3.2、追加节点
-
要想在界面看到，还得插入到某个父元素中
-
插入到父元素的最后一个子元素：
// 插入到这个父元素的后面 父元素.append(要插入的元素) -
插入到父元素的某个子元素前面：
// 插入到父元素某个子元素的前面 父元素.insertBefore(要插入的元素，在哪个元素前面)
16.4、克隆节点
-
特殊情况下，我们新增节点，按照如下操作：
- 复制一个原有的节点
- 把复制的节点放入到指定的元素内部
-
克隆节点
// 克隆一个已有的元素节点 const 得到的元素 = 元素.cloneNode(布尔值)cloneNode会克隆出一个和原标签一样的元素，括号传入布尔值- 若为
true，则代表克隆时会包含后代节点和内容一起克隆 - 若为
false，则代表克隆时不包含后代节点和内容 - 默认为
false
- 若为
16.5、删除节点
-
若一个节点在页面中已不需要时，可以删除它
-
在 JavaScript 原生 DOM 操作中，要删除元素必须通过父元素删除
-
语法
父元素.removeChild(要删除的元素) -
注意：
- 如不存在父子则删除不成功
- 删除节点和隐藏节点(
display: none)有区别的：隐藏节点还是存在的，但是删除就是在 html 中删除
17、移动端事件
移动端 也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
-
touch对象代表一个触摸点。触摸点可能是一根手指，也可能时一根触摸笔。触屏事件可响应用户手指对屏幕或者触摸板操作。 -
常见的触摸屏事件
触屏touch事件 说明 touchstart手指触摸到一个 DOM 元素时触发 touchmove手指在一个 DOM 元素上滑动时触发 touchend手指从一个 DOM 元素上移开时触发 -
JS 插件
- 插件：就是别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果
- 轮播图插件 swiper（https://www.swiper.com.cn/）
18、Window 对象
18.1、BOM
- BOM(Browser Object Model)是浏览器对象模型
- window 对象是一个全局对象，也可以说是 JavaScript 中的顶级对象
- 像 document、alert()、console.log() 这些都是 window 的属性，基本 BOM 的属性和方法都是 window 的
- 所有通过 var 定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
- window 对象下的属性和方法调用的时候可以省略 window
18.2、定时器-延时函数
-
JavaScript 内置的一个用来让代码延迟执行的函数，叫
setTimeout -
语法：
setTimeout(回调函数, 等待的毫秒数) -
setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略 window -
清除延时函数：
let timer = setTimeout(回调函数, 等待的毫秒数) clearTimeout(timer) -
注意：
- 延时器需要等待，所以后面的代码会先执行
- 每一次调用延时器都会产生一个新的延时器
18.3、JS 执行机制
-
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事情。
- 这是因为 JavaScript 这门脚本语言诞生的使命所致 ---- JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进性添加，之后再删除。
- 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
-
为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。
- 同步：前一个任务结束后再执行后一个任务 ，程序的执行顺序于任务的排列顺序是一致的、同步到。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
- 异步：在做一件事情时，因为这件事情会花费很长的时间，在做这件事情的同时，你还可以去处理其他事情。比如做饭的异步做法：我们在烧水的同时，利用这10分钟，去切菜，炒菜。
- 他们的本质区别：这条流水线上各个流程的执行顺序不同
-
同步任务
-
同步任务都在主线程上执行，形成一个执行栈。
-
-
异步任务
-
JS 的异步任务是通过回调函数实现的。
-
一般而言，异步任务有以下三种类型
- 普通事件：
click、resize等 - 资源事件：
load、error等 - 定时器：
setInterval、setTimeout等
- 普通事件：
-
异步任务相关添加到任务队列中（也称消息队列）
-
执行机制：
- 先执行执行栈中的同步任务
- 异步任务放入任务队列
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（eventloop）
18.4、location 对象
-
location的数据类型是对象，它拆分并且保存了 URL 地址的各个部分 -
常用的属性和方法
-
href属性获取完整的 URL 地址，对其赋值时用于地址的跳转 -
search属性获取地址中携带的参数，符号?后面的部分console.log(location.search) -
hash属性获取地址中的哈希值，符号#后面的部分console.log(location.hash)- 示例：网易云音乐网站
- 后期 vue 路由的铺垫，经常用于不刷新页面，显示不同的页面
-
reload方法用来刷新当前网页，传入参数 true 时表示强制刷新<button>点击刷新</button> <script> let btn = document.querySelector('button') btn.addEventListener('click', function () { location.reload(true) // 强制刷新，类似 Ctrl + F5 }) </script>
-
18.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) { loaction.href = 'http://m.itcast.cn/' } })()
-
18.6、history 对象
-
history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如：前进、后退、历史记录等 -
常用的属性和方法：
history 对象方法 作用 back()后退功能 forward()前进功能 go(参数)前进后退功能。参数：如果是1前进1个页面，如果是-1后退一个页面
19、本地存储
19.1、本地存储介绍
- 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，经常会在本地存储大量的数据，HTML5 规范提出了相关的解决方案。
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大，sessionStorage 和 localStorage 约 5M 左右
- 常见的使用场景：页面刷新数据不丢失
19.2、本地存储分类
19.2.1、localStorage
-
作用：可以将数据永久存储在本地(用户的电脑)，除非手动删除，否则关闭页面也会存在
-
特性：
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
-
语法：
-
存储数据：
localStorage.setItem(key, value) -
获取数据：
localStorage.getItem(key)- 本地存储只能存储字符串，所以获取到的数据都是字符串
-
删除数据：
localStorage.removeItem(key) -
修改数据：
localStorage.setItem(存在的key, 新的value)
-
19.2.2、sessionStorage
- 特性：
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 以键值对的形式存储使用
- 用法和 localStorage 基本相同
19.3、存储复杂数据类型
-
本地只能存储字符串，无法存储复杂数据类型
-
解决：需要将复杂数据类型转换成 JSON 字符串，再存储到本地
-
语法：
-
JSON.stringify(复杂数据类型)
const goods = { name: '小米10', price: 1999 } localStorage.setItem('goods', JSON.stringify(goods))- 将复杂数据类型转换成 JSON 字符串 存储 到本地存储中
-
JSON.parse(字符串对象数据)
const obj = localStorage.getItem('goods') console.log(obj)- 将 JSON 字符串转换成对象 取出 时候使用
-
19.4、数组中的一些方法
19.4.1、map()
-
作用：
map()迭代数组 -
语法：
const arr = ['pink', 'red', 'blue'] arr.map(function (item, index) { console.log(item) // item 得到 数组元素 console.log(index) // index 得到索引号 }) -
使用场景：
-
map 可以处理数据，并且返回新的数组
const arr = ['pink', 'red', 'blue'] const newArr = arr.map(function (item, index) { console.log(item) // item 得到 数组元素 console.log(index) // index 得到索引号 return item + '老师' }) console.log(newArr) // ['pink老师', 'red老师', 'blue老师']
-
19.4.2、join
-
作用：
join()方法用于把数组中的所有元素转换一个字符串 -
语法：
const arr = ['pink老师', 'red老师', 'blue老师'] console.log(arr.join('-')) // 'pink老师-red老师-blue老师' -
参数：数组元素是通过参数里面指定的分隔符进行分割的
20、正则表达式
20.1、介绍
- 正则表达式（Regular Expression）是用于匹配字符串组合的模式。在 JavaScript 中，正则表达式也是对象。
- 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式
- 正则表达式在 JavaScript 中的使用场景
- 例如验证表单：用户名表单只能输入英文字母、数字、下划线，昵称输入框中可以输入中文(匹配)
- 比如用户名：
/^[a-z0-9_-]{3,16}$/
- 比如用户名：
- 过滤掉页面内容的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
- 例如验证表单：用户名表单只能输入英文字母、数字、下划线，昵称输入框中可以输入中文(匹配)
20.2、正则表达式语法
20.2.1、定义
const 变量名 = /表达式/
- 其中
/ /是正则表达式的字面量 - 比如：
const reg = /前端/
20.2.2、查找
test() 方法：用来查看正则表达式与指定的字符串是否匹配
regObj.test(被检测的字符串)
- 比如：
// 要检测的字符串
const str = 'IT培训，前端开发培训，IT培训课程，Web前端培训，Java培训，人工智能培训'
// 1. 定义正则表达式，检测规则
const reg = /前端/
// 2. 检测方法
console.log(reg.test(str)) // true
- 如果正则表达式与指定的字符串匹配，返回
true，否则返回false
20.2.3、检索
exec() 方法：在一个指定的字符串中执行一个搜索匹配
regObj.exec(被检测字符串)
- 比如：
// 要检测的字符串
const str = 'IT培训，前端开发培训，IT培训课程，Web前端培训，Java培训，人工智能培训'
// 1. 定义正则表达式，检测规则
const reg = /前端/
// 2. 检测方法
console.log(reg.exec(str)) // 返回的是数组
- 如果匹配成功，
exec()方法返回一个数组，否则返回null
20.3、元字符
-
普通字符
大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。
-
元字符（特殊字符）
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
- 比如：规定用户只能输入26个英文字母，普通字符的话 abcdefghijklm…
- 但是换成元字符写法：[a-z]
为了方便记忆和学习，对元字符进行了分类：
- 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
- 量词（表示重复次数）
- 字符类（比如：\d 表示 0-9）
20.3.1、边界符
-
正则表达式中边界符（位置符）用来提示字符所处的位置，主要有两个字符
边界符 说明 ^表示匹配行首的文本（以谁开始） $表示匹配行尾的文本（以谁结束） -
如果
^和$在一起，表示必须是精确匹配console.log(/哈/.test('哈')) // true console.log(/二哈/.test('二哈')) // true console.log(/二哈/.test('很二哈哈')) // true // ^ 开头 console.log(/^二哈/.test('很二哈哈')) // false console.log(/^二哈/.test('二哈很傻')) // true // $ 结尾 console.log(/^二哈$/.test('二哈很傻')) // false console.log(/^二哈$/.test('二哈二哈')) // false console.log(/^二哈$/.test('二哈')) // true
20.3.2、量词
-
量词用来设定某个模式出现的次数
量词 说明 *重复 零次或更多次 +重复 一次或更多次 ?重复 零次或一次 {n}重复 n次 {n,}重复 n次或更多次 {n,m}重复 n到m次 逗号两侧千万不要有多余的空格
20.3.3、字符类
-
[]匹配字符集合-
后面的字符串只要包含 abc 中任意一个字符，且只选一个字符，都返回
true// 只要中括号里面的任意字符出现都返回 true console.log(/[abc]/.test('andy')) // true console.log(/[abc]/.test('baby')) // true console.log(/[abc]/.test('cry')) // true console.log(/[abc]/.test('die')) // false -
使用连字符
-表示一个范围console.log(/^[a-z]$/.test('c')) // true比如：
[a-z]表示 a到z 26个英文字母都可以[a-zA-Z]表示大小写都可以[0-9]表示 0~9 的数字都可以
腾讯QQ号：^[1-9][0-9]{4,}$ // 从10000开始 -
在
[]里面加上^表示取反比如：
[^a-z]匹配除了小写字母以外的字符- 注意要写到中括号里面
-
-
.匹配除换行符之外的任何单个字符 -
预定义类：指的是 某些常见模式的简写方式
预定类 说明 \d匹配 0-9 之间的任一数字，相对于 [0-9]\D匹配 所有 0-9 以外的字符，相对于 [^0-9]\w匹配 任意的字母、数字、下划线，相对于 [A-Za-z0-9]\W除所有字母、数字、下划线以外的字符，相对于 [^A-Za-z0-9]\s匹配 空格(包括换行符、制表符、空格符等)，相对于 [\t\r\n\v\f]\S匹配 非空格的字符，相对于 [^\t\r\n\v\f]日期格式：^\d{4}-\d{1,2}-\d{1,2}
20.4、修饰符
-
修饰符约束正则执行过程的某些细节行为，如是否区分大小写、是否支持多行匹配等
-
语法：
/表达式/修饰符i是单词 ignore 的缩写，正则匹配时不区分大小写g是单词 global 的缩写，匹配所有满足正则表达式的结果
console.log(/a/i.test('a')) // true console.log(/a/i.test('A')) // true
20.4.1、替换 replace
const 替换后的字符串 = 字符串.replace(/正则表达式/, '替换的文本')
- `[a-zA-Z]` 表示大小写都可以
- `[0-9]` 表示 0~9 的数字都可以
```JavaScript
腾讯QQ号：^[1-9][0-9]{4,}$ // 从10000开始
```
- 在 `[]` 里面加上 `^` 表示取反
比如：
- `[^a-z]` 匹配除了小写字母以外的字符
- 注意要写到中括号里面
-
.匹配除换行符之外的任何单个字符 -
预定义类：指的是 某些常见模式的简写方式
预定类 说明 \d匹配 0-9 之间的任一数字，相对于 [0-9]\D匹配 所有 0-9 以外的字符，相对于 [^0-9]\w匹配 任意的字母、数字、下划线，相对于 [A-Za-z0-9]\W除所有字母、数字、下划线以外的字符，相对于 [^A-Za-z0-9]\s匹配 空格(包括换行符、制表符、空格符等)，相对于 [\t\r\n\v\f]\S匹配 非空格的字符，相对于 [^\t\r\n\v\f]日期格式：^\d{4}-\d{1,2}-\d{1,2}
20.4、修饰符
-
修饰符约束正则执行过程的某些细节行为，如是否区分大小写、是否支持多行匹配等
-
语法：
/表达式/修饰符i是单词 ignore 的缩写，正则匹配时不区分大小写g是单词 global 的缩写，匹配所有满足正则表达式的结果
console.log(/a/i.test('a')) // true console.log(/a/i.test('A')) // true
20.4.1、替换 replace
const 替换后的字符串 = 字符串.replace(/正则表达式/, '替换的文本')
扫一扫
828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
