Javascript Web APIs

变量声明

建议const优先，原因是

const语义化更好
很多变量我们声明的时候就知道它不会改变了
实际开发种也是，比如react框架，基本const

有了变量先给const，如果发现它后面是要被修改的，再改为let

作用和分类

作用：使用js取操作html和浏览器
分类：
- DOM(文档对象模型)
- BOM(浏览器对象模型)

1.定时器

定时器函数可以开启和关闭定时器

1.1间歇函数

开启定时器

setInterval

setInterval(函数,间隔时间)

setInterval(函数,间隔时间)

作用：每隔一段时间调用这个函数
间隔时间单位为毫秒

匿名函数调用

setInterval(function() {
  console.log("lr-sama")
},1000)

setInterval(function() {
  console.log("lr-sama")
},1000)

具名函数调用

WARNING

注意具名函数调用只需要传函数名，不需要加()

function fu() {
  console.log("lr-sama")
}
//setInterval(函数名,间隔时间)
setInterval(fu,1000)

function fu() {
  console.log("lr-sama")
}
//setInterval(函数名,间隔时间)
setInterval(fu,1000)

WARNING

非要加()的话需要给函数加上引号

function fu() {
  console.log("lr-sama")
}
setInterval('fu()',1000)

function fu() {
  console.log("lr-sama")
}
setInterval('fu()',1000)

关闭定时器

clearInterval

let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

let lrsm = setInterval(function() {
  console.log("lr-sama")
},1000)
clearInterval(lrsm)

let lrsm = setInterval(function() {
  console.log("lr-sama")
},1000)
clearInterval(lrsm)

注意事项
WARNING
再次开启定时器是方法是:
js
```
lrsm = setInterval(fu,1000)
```
```
lrsm = setInterval(fu,1000)
```
1
所以我们需要使用let来接收定时器变量，不能使用const

案例例子

html

<body>
    <button class="btn" disabled>我已经阅读用户协议(5)</button>
    <script>
        const button = document.querySelector('.btn');
        time = 5
        let settime = setInterval(function () {
            time--
            button.innerHTML = `我已经阅读用户协议(${time})`
            if (time === 0) {
                clearInterval(settime)
                button.innerHTML = `我已经阅读用户协议`
                button.disabled = false
            } else {
            }
        }, 1000)
    </script>
</body>

<body>
    <button class="btn" disabled>我已经阅读用户协议(5)</button>
    <script>
        const button = document.querySelector('.btn');
        time = 5
        let settime = setInterval(function () {
            time--
            button.innerHTML = `我已经阅读用户协议(${time})`
            if (time === 0) {
                clearInterval(settime)
                button.innerHTML = `我已经阅读用户协议`
                button.disabled = false
            } else {
            }
        }, 1000)
    </script>
</body>

1.2延时函数

JavaScript内置的一个用来让代码延迟的函数，叫setTimeout

语法:

setTimeout(回调函数，等待的毫秒数)

setTimeout(回调函数，等待的毫秒数)

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

html

<body>
  <script>
    setTimeout(function(){
      console.log("时间到了");
    },2000)
  </script>
</body>

<body>
  <script>
    setTimeout(function(){
      console.log("时间到了");
    },2000)
  </script>
</body>

1.2.1清除延时函数

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

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

1.3两种定时器的对比

延时函数：执行一次
间歇函数：每隔一段时间就执行一次，除非手动清除

2.日期对象

用来表示时间的对象
作用：可以得到当前系统的时间

2.1实例化

在代码中发现了new关键字，一般将这个操作称为实例化

创建一个时间对象并获取时间

获取当前时间

const date new Date()

const date new Date()

获取指定时间

const date = new Date('2023-8-8')
console.log(date)

const date = new Date('2023-8-8')
console.log(date)

2.2时间对象方法

因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

2.3时间戳

是指1970年01月01日00时00分00秒起至至现在的毫秒数，它是一种特殊的计量时间的方式

算法：
- 将来的时间戳-现在的时间戳=剩余时间毫秒数
- 剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
- 比如将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
- 1000ms 转换为就是 0时0分1秒

2.3.1时间戳的获取方式

getTime()方法

const date = new Date()
console.log(date.getTime())

const date = new Date()
console.log(date.getTime())

简写+new Date()

无需实例化

console.log(+new Date())

console.log(+new Date())

使用Date.now()
无需实例化
但是只能得到当前时间戳，前面两种可以返回指定时间的时间戳

3.节点操作

3.1DOM节点

DOM树里的每一个内容都称之为节点

节点类型:

元素节点
- 所有的标签，比如body,div
- html是根节点
属性节点
- 所有的属性比如hred
文本节点
- 所有的文本
其它

3.2查找节点

节点关系：针对的找亲戚返回的都是对象
- 父节点
- 子节点
- 兄弟节点

3.2.1父节点查找

parentNode属性
返回最近一级的父节点，找不到返回null

3.2.2子节点查找

childNodes：获取所有子节点、包括文本节点(空格，换行)、注释节点
children属性(重点)
- 仅仅获得所有元素节点
- 返回的还是一个伪数组
js
```
父元素.children
```
```
父元素.children
```
1

3.2.3兄弟关系查找

下一个兄弟
nextElementSibling属性
上一个兄弟
previousElementSibling属性

3.3`增加节点`

3.3.1创建节点

即创造一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

创建元素节点方法

document.createElement('标签名')
document.createElement('div')

document.createElement('标签名')
document.createElement('div')

3.3.2追加节点

要想在界面种看到，还得插入到某个父元素种

插入到父元素的最后一个子元素:

appendChild

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

html

<body>
  <ul></ul>

  <script>
    const li1 = document.createElement('li')
    const li2 = document.createElement('li')
    const ul = document.querySelector('ul')

    ul.appendChild(li1)
    ul.appendChild(li2)
  </script>
</body>

<body>
  <ul></ul>

  <script>
    const li1 = document.createElement('li')
    const li2 = document.createElement('li')
    const ul = document.querySelector('ul')

    ul.appendChild(li1)
    ul.appendChild(li2)
  </script>
</body>

插入到父元素种某个子元素的前面

insertBefore

//插入到某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)

//插入到某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)

html

<body>
  <ul></ul>

  <script>
    const li1 = document.createElement('li')
    const li2 = document.createElement('li')
    const ul = document.querySelector('ul')

    li1.innerHTML='我是li1'

    ul.insertBefore(li1,ul.children[0])


  </script>
</body>

<body>
  <ul></ul>

  <script>
    const li1 = document.createElement('li')
    const li2 = document.createElement('li')
    const ul = document.querySelector('ul')

    li1.innerHTML='我是li1'

    ul.insertBefore(li1,ul.children[0])


  </script>
</body>

3.3.3克隆节点

元素.cloneNode(布尔值)

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值

若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为flase

html

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <script>
    const ul = document.querySelector('ul')
    let li1 = ul.children[0].cloneNode(true)
    ul.appendChild(li1)
  </script>
</body>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <script>
    const ul = document.querySelector('ul')
    let li1 = ul.children[0].cloneNode(true)
    ul.appendChild(li1)
  </script>
</body>

3.3.4删除节点

若一个节点在页面种已不需要时，可以删除它
在JavaScript原生DOM操作种，要删除的元素必须通过父元素删除

语法:

父元素.removeChild(要删除的元素)

父元素.removeChild(要删除的元素)

WARNING

如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none)有区别：隐藏节点还是存在的，但是删除，则从html种删除节点

4.M端(移动端)事件

触屏事件touch(也称触摸事件),安卓和苹果都有
touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触摸屏可响应用户手指(或者触控笔)对屏幕或者触控板进行操作
常见的触屏事件如下:

5.JS插件

插件：就是别人写好的代码，我们只需要赋值对应的代码，就可以直接实现对应的效果

6.JS执行机制

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

这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为页面处理种用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除
单线程意味着，所有的任务都需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果js执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

为了解决这个问题，利用多核cpu的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步

同步：

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的

异步：

在做一件失去的时候，因为这件事情会花费很长时间，在做这件事情的同时，还可以去处理其它的失去

6.1JS执行机制

先执行执行栈中的同步任务
异步任务放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环(event loop)

7.DOM

DOM(Document Object Model——文档对象模型)是用来呈现以及与任意html或xml文档交互的api
DOM是浏览器提供的一套专门用来操作网页内容的功能

7.1DOM树

将html文档以树状结构直观的表现出来，称之为文档树或DOM树
描述网页内容关系的名词
作用：文档树直观体现了标签与标签之间的关系

7.2DOM对象

DOM对象:
- 浏览器根据html标签生成的js对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
DOM的核心思想:
- 把网页内容当作对象来处理
- 所以它提供的属性和方法都是用来访问和操作网页内容的
  例:
  js
```
document.write()
```
```
document.write()
```
  1
- 网页所有内容都在doucment里面

7.2.1获取DOM对象

查找元素DOM元素就是利用js选择页面种的标签元素

根据css选择器获取DOM对象

选择匹配的第一个元素

只选择一个

语法：

document.querySelector('css选择器')

document.querySelector('css选择器')

参数:

包含一个或多个有效的css选择器字符串

返回值:

css选择器匹配的第一个元素，一个htmlelement对象

测试：

html

  <div class="box">23</div>
  <div class="box">123</div>
  <p id="nav">你好</p>

  <div class="box">23</div>
  <div class="box">123</div>
  <p id="nav">你好</p>

css

.box{
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 10px;
}

.box{
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 10px;
}

  const box = document.querySelector('div')
  const nav =  document.querySelector('#nav')
  console.dir(box)
  console.dir(nav)

  const box = document.querySelector('div')
  const nav =  document.querySelector('#nav')
  console.dir(box)
  console.dir(nav)

获取第一个小li

html

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

const li = document.querSelector('ul li:first-child')
console.dir(li)

const li = document.querSelector('ul li:first-child')
console.dir(li)

选择匹配的多个元素语法:
js
```
document.querySelectorAll('css选择器')
```
```
document.querySelectorAll('css选择器')
```
1
得到的是一个伪数组:
- 有长度有索引号的数组
- 但是没有pop()、push()等数组方法
- 想要得到里面的每一个对象，需要遍历for的方式获得
参数:
包含一个或者多个有效的css选择器字符串
返回值:
css选择器匹配的NodeList对象集合
例子:
js
```
 consi lists = document.querySelectorAll('ul li')
 console.dir(lists)
```
```
 consi lists = document.querySelectorAll('ul li')
 console.dir(lists)
```
1
2

其它获取DOM元素的方式(了解)

//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素 获取页面所有div
document.getElementByTagName('div')
//根据类名获取元素 获取页面 所有类名为w的
document.getElementByClassName('w')

//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素 获取页面所有div
document.getElementByTagName('div')
//根据类名获取元素 获取页面 所有类名为w的
document.getElementByClassName('w')

7.2.2操作元素内容

DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象
就是操作对象使用的点语法`
如果想要修改标签元素的里面的内容，则可以使用如下几种方式:
- 对象.innerText 属性
- 对象.innerHTML 属性

innerText

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

html

<div class="box">你好</div>

<div class="box">你好</div>

const box = document.querySelector(".box")
console.log(box.innerText)//获取文字内容
box.innerText ='你好 你好'//修改文字内容
box.innerText ='<strong>box.innerText</strong>'//不解析标签

const box = document.querySelector(".box")
console.log(box.innerText)//获取文字内容
box.innerText ='你好 你好'//修改文字内容
box.innerText ='<strong>box.innerText</strong>'//不解析标签

innerHTML 与innerText的区别就是能解析标签

html

<div class="box">你好</div>

<div class="box">你好</div>

const box = document.querySelector(".box")
console.log(box.innerText)//获取文字内容
box.innerHTML ='<strong>box.innerText</strong>'//解析标签

const box = document.querySelector(".box")
console.log(box.innerText)//获取文字内容
box.innerHTML ='<strong>box.innerText</strong>'//解析标签

7.2.3操作元素属性

操作元素常用属性

通过js设置/修改标签元素属性，比如通过src更换图片
最常见的属性比如：href、title、src等
语法:
js
```
  对象.属性=值
```
```
  对象.属性=值
```
1

操作元素样式属性

通过js设置/修改标签元素的样式属性

比如通过轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置left等等

路径:

通过style属性操作css
操作类名(className)操作css
通过classList操作类控制css

7.2.3.1通过style属性操作css

css

.box{
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 10px;
  background-color:pink;
}

.box{
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 10px;
  background-color:pink;
}

WARNING

多组单词的采用小驼峰命名法

const box = document.querySelector('.box')
box.style.width = '60px'//不要忘记加上px,并且记得是字符串
//多组单词的采用小驼峰命名法
box.style.backgroundColor='green'

const box = document.querySelector('.box')
box.style.width = '60px'//不要忘记加上px,并且记得是字符串
//多组单词的采用小驼峰命名法
box.style.backgroundColor='green'

7.2.3.2 操作类名(className)操作css

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

语法:

///active是一个类名
元素.className = 'active'

///active是一个类名
元素.className = 'active'

注意:

由于class是关键字，所以使用className去代替

html

<div>你好</div>

<div>你好</div>

css

.box {
  width: 300px;
  height: 300px;
  border: 1px solid #6b0b0b;
  margin: 10px;
  background-color: rgb(240, 240, 240);
  padding: 10px;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  color: #fff;  
}   
div {
  width: 200px;
  height: 200px;
  background-color: rgb(207, 42, 69);
}

.box {
  width: 300px;
  height: 300px;
  border: 1px solid #6b0b0b;
  margin: 10px;
  background-color: rgb(240, 240, 240);
  padding: 10px;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  color: #fff;  
}   
div {
  width: 200px;
  height: 200px;
  background-color: rgb(207, 42, 69);
}

const box = document.querySelector('div')
box.className='box'

const box = document.querySelector('div')
box.className='box'

添加多个class类

box.className='类1 类2 类n'

html

<div class='nav'>添加多个class类</div>

<div class='nav'>添加多个class类</div>

css

div {
  width: 200px;
  height: 200px;
  background-color: rgb(207, 42, 69);
}  
.box {
  width: 300px;
  height: 300px;
  border: 1px solid #6b0b0b;
  margin: 10px;
  background-color: rgb(240, 240, 240);
  padding: 10px;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
}  
.nav {
  background-color: green;
  color: red;
}

div {
  width: 200px;
  height: 200px;
  background-color: rgb(207, 42, 69);
}  
.box {
  width: 300px;
  height: 300px;
  border: 1px solid #6b0b0b;
  margin: 10px;
  background-color: rgb(240, 240, 240);
  padding: 10px;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
}  
.nav {
  background-color: green;
  color: red;
}

const box = document.querySelector('div')
box.className='nav box'

const box = document.querySelector('div')
box.className='nav box'

className是使用新值换旧值，会覆盖原有的class如果需要添加一个类，需要保留之前的类名

7.2.3.3通过classList操作控制css

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法:

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

追加一个类

const box = document.querySelector(".box")
box.classList.add("active")//类名不加点，并且是字符串

const box = document.querySelector(".box")
box.classList.add("active")//类名不加点，并且是字符串

删除一个类

const box = document.querySelector(".box")
box.classList.remote("active")//类名不加点，并且是字符串

const box = document.querySelector(".box")
box.classList.remote("active")//类名不加点，并且是字符串

切换一个类

WARNING

如果存在这个类则删除这个类，否则则添加上

const box = document.querySelector(".box")
//如果存在active这个类，就删除，不存在则加上
box.classList.toogle("active")//类名不加点，并且是字符串

const box = document.querySelector(".box")
//如果存在active这个类，就删除，不存在则加上
box.classList.toogle("active")//类名不加点，并且是字符串

7.2.4操作表单元素属性

表单有很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的，跟其他的标签属性没有任何区别

获取：DOM对象.属性名

设置：DOM对象.属性名=新值

innerHTML得不到表单的内容

//示例
表单.value
表单.type

//示例
表单.value
表单.type

const uname = document.querySelector('input')
//获取表单中的值
console.log(uname.value)
uname.type ='password'

const uname = document.querySelector('input')
//获取表单中的值
console.log(uname.value)
uname.type ='password'

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示,也只接收布尔值如果true代表添加了该属性，如果是false就代表移除了该属性
比如:disabled、checked、selected

const ipt = document.querySelector('input')
//获取表单中的值
console.log(ipt.checked)
ipt.checked=false

const ipt = document.querySelector('input')
//获取表单中的值
console.log(ipt.checked)
ipt.checked=false

const button = document.querySelector('botton')
//获取表单中的值
console.log(button.checked) //默认为false不禁用
button.disabled = true //禁用按钮

const button = document.querySelector('botton')
//获取表单中的值
console.log(button.checked) //默认为false不禁用
button.disabled = true //禁用按钮

7.2.5自定义属性

标准属性：标签天生自带的属性，比如class id title等可以直接使用点语法操作，比如： desabled、checked
自定义属性:
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取

html

<body>
  <div data-id="10" class="box" data-sm='大人'>盒子</div>
  <script>
    const box = document.querySelector('.box');
    //拿到标签对象中的所有自定义属性
    console.log(box.dataset)
    console.log(box.dataset.id)
  </script>
</body>

<body>
  <div data-id="10" class="box" data-sm='大人'>盒子</div>
  <script>
    const box = document.querySelector('.box');
    //拿到标签对象中的所有自定义属性
    console.log(box.dataset)
    console.log(box.dataset.id)
  </script>
</body>

7.3事件

事件：

是在编程时系统内发生的动作胡总和发生的事情

7.3.1事件监听

就是让程序监测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件

语法：

元素对象.addEventListener('事件类型',要执行的函数)

元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素：

事件源：那个dom元素被事件触发了，要虎丘dom元素
事件类型：用什么方式触发，比如鼠标点击click，鼠标经过mouseover等等
事件调用函数：事件触发要调用的函数(要做什么)

例子：按钮点击

html

<button>
    按钮
</button>
<script>
    const btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        alert('被点击了')
    })
</script>

<button>
    按钮
</button>
<script>
    const btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        alert('被点击了')
    })
</script>

例子：关闭弹窗

html

<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
      background-color: #df2a2a;
      display: inline-block;
      margin: auto;
    }

    .button {
      width: 100px;
      height: 30px;
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
      background-color: #3f0808;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="button">x</div>
  </div>
  <script>
    const btn = document.querySelector('.button')
    const box = document.querySelector('.box')
    btn.addEventListener('click', function () {
      box.style.display = 'none'
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
      background-color: #df2a2a;
      display: inline-block;
      margin: auto;
    }

    .button {
      width: 100px;
      height: 30px;
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
      background-color: #3f0808;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="button">x</div>
  </div>
  <script>
    const btn = document.querySelector('.button')
    const box = document.querySelector('.box')
    btn.addEventListener('click', function () {
      box.style.display = 'none'
    })
  </script>
</body>
</html>

WARNING

事件类型要加引号
函数是点击之后执行，每次点击都会执行一次

7.3.1.1事件监听版本

DOM L0
事件源.on事件=function(){}
js
1
DOM L2
事件源.addEvnetListener(事件,事件处理函数)
区别:
on方式会被覆盖，addEventListener方式可以绑定多次，拥有事件更多特性

7.3.2事件类型

7.3.2.1鼠标事件

html

<!DOCTYPE html>
<html lang="zh_CN">
<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>轮播图点击切换</title>
</head>
<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = []

    //获取盒子slider-wrapper
    const img = document.querySelector('.slider-wrapper img')
    //获取盒子slider-footer>p
    const p = document.querySelector('.slider-footer>p')
    // //获取盒子slider-footer
    // const footer = document.querySelector('.slider-footer')

    let num = 0
    function update() {
      num = num % sliderData.length
      img.src = sliderData[num].url
      p.innerHTML = sliderData[num].title
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${num + 1})`).classList.add('active')
    }
    function lunBo() {
      num++
      update()
    }
    let lun = setInterval(lunBo, 1000)
    const slider = document.querySelector('.slider')
    const prev = document.querySelector('.prev')
    const next = document.querySelector('.next')
    //在移入大盒子的时候停止lun轮播
    slider.addEventListener('mouseenter', function () {
      clearInterval(lun)
    })
    //移出的时候开始轮播
    slider.addEventListener('mouseleave', function () {
      clearInterval(lun)
      lun = setInterval(lunBo, 1000)
    })
    //点击prev的时候让num--
    prev.addEventListener('click', function () {
      num--
      if (num < 0) {
        num = 7
      }
      update()
    })
    //点击next的时候让num++
    next.addEventListener('click', function () {
      num++
      update()
    })
    console.log(-1 % 8)
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh_CN">
<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>轮播图点击切换</title>
</head>
<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = []

    //获取盒子slider-wrapper
    const img = document.querySelector('.slider-wrapper img')
    //获取盒子slider-footer>p
    const p = document.querySelector('.slider-footer>p')
    // //获取盒子slider-footer
    // const footer = document.querySelector('.slider-footer')

    let num = 0
    function update() {
      num = num % sliderData.length
      img.src = sliderData[num].url
      p.innerHTML = sliderData[num].title
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${num + 1})`).classList.add('active')
    }
    function lunBo() {
      num++
      update()
    }
    let lun = setInterval(lunBo, 1000)
    const slider = document.querySelector('.slider')
    const prev = document.querySelector('.prev')
    const next = document.querySelector('.next')
    //在移入大盒子的时候停止lun轮播
    slider.addEventListener('mouseenter', function () {
      clearInterval(lun)
    })
    //移出的时候开始轮播
    slider.addEventListener('mouseleave', function () {
      clearInterval(lun)
      lun = setInterval(lunBo, 1000)
    })
    //点击prev的时候让num--
    prev.addEventListener('click', function () {
      num--
      if (num < 0) {
        num = 7
      }
      update()
    })
    //点击next的时候让num++
    next.addEventListener('click', function () {
      num++
      update()
    })
    console.log(-1 % 8)
  </script>
</body>
</html>

7.3.2.2焦点事件

用法示例:

html

<body>

  <input type="text">
  <script>
    const input = document.querySelector('input');
    input.addEventListener('focus',function(){
      console.log('获得焦点');
    })

    input.addEventListener('blur',function(){
      console.log('失去焦点');
    })
  </script>
</body>

<body>

  <input type="text">
  <script>
    const input = document.querySelector('input');
    input.addEventListener('focus',function(){
      console.log('获得焦点');
    })

    input.addEventListener('blur',function(){
      console.log('失去焦点');
    })
  </script>
</body>

下拉框案例:

html

<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
    <script>

        const input = document.querySelector('input');
        const resultList = document.querySelector('.result-list');

        input.addEventListener('focus', function(){
            resultList.style.display = 'inline-block'
        })

        input.addEventListener('blur', function(){
            resultList.style.display = 'none'
        })

    </script>
</body>

<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
    <script>

        const input = document.querySelector('input');
        const resultList = document.querySelector('.result-list');

        input.addEventListener('focus', function(){
            resultList.style.display = 'inline-block'
        })

        input.addEventListener('blur', function(){
            resultList.style.display = 'none'
        })

    </script>
</body>

7.3.2.3键盘事件

使用案例:

html

<body>
  <script>
    const body = document.querySelector('body');
    body.addEventListener('keydown',function(){
      console.log('被按下');
    })

    body.addEventListener('keyup',function(){
      console.log('弹起了');
    })
  </script>
</body>

<body>
  <script>
    const body = document.querySelector('body');
    body.addEventListener('keydown',function(){
      console.log('被按下');
    })

    body.addEventListener('keyup',function(){
      console.log('弹起了');
    })
  </script>
</body>

7.3.2.4文本事件

使用案例:

html

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input');
    input.addEventListener('input',function(){
      console.log(input.value);
    })
  </script>
</body>

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input');
    input.addEventListener('input',function(){
      console.log(input.value);
    })
  </script>
</body>

7.3.3事件对象

事件对象是什么:
事件对象也是个对象，这个对象里面有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景:
可以判断用户按下了哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作

7.3.3.1获取事件对象

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e

元素.addEventListener('click',function(event){
    
})

元素.addEventListener('click',function(event){
    
})

7.3.3.2事件对象常用属性

部分常用属性:

type:
获取当前的事件类型
clientX/ClientY
获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
key
用户按下的键盘键的值
现在不提倡使用keyCode

使用案例

html

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input');
    input.addEventListener('keyup',function(e){
      if(e.key === 'Enter'){
        console.log('enter');
      }
    })
  </script>
</body>

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input');
    input.addEventListener('keyup',function(e){
      if(e.key === 'Enter'){
        console.log('enter');
      }
    })
  </script>
</body>

案例：发布信息内容

html

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
  </div>
  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  <div class="list">
    <div class="item" style="display: none;">
      <i class="avatar"></i>
      <div class="info">
        <p class="name">哥们</p>
        <p class="text">大家都辛苦啦</p>
        <p class="time">2023</p>
      </div>
    </div>
  </div>
  <script>
    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    const item = document.querySelector('.item')
    const text = document.querySelector('.text')
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
      total.innerHTML = `${tx.innerHTML.length}/200字`
    })

    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })

    tx.addEventListener('input', function () {
      total.innerHTML = `${tx.value.length}/200字`
    })

    //按下回车发布评论
    tx.addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        if (tx.value.trim() !== '') {
          text.innerHTML = tx.value
          item.style.display = 'block'
        }
        tx.value = ''
        total.innerHTML = '0/200字'
      }
    })
  </script>
</body>

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
  </div>
  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  <div class="list">
    <div class="item" style="display: none;">
      <i class="avatar"></i>
      <div class="info">
        <p class="name">哥们</p>
        <p class="text">大家都辛苦啦</p>
        <p class="time">2023</p>
      </div>
    </div>
  </div>
  <script>
    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    const item = document.querySelector('.item')
    const text = document.querySelector('.text')
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
      total.innerHTML = `${tx.innerHTML.length}/200字`
    })

    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })

    tx.addEventListener('input', function () {
      total.innerHTML = `${tx.value.length}/200字`
    })

    //按下回车发布评论
    tx.addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        if (tx.value.trim() !== '') {
          text.innerHTML = tx.value
          item.style.display = 'block'
        }
        tx.value = ''
        total.innerHTML = '0/200字'
      }
    })
  </script>
</body>

7.3.4环境对象

环境对象this:它代表着当前函数运行时所处的环境

指的是函数内部特殊的变量this，它代表当前函数运行时所处的环境

作用：弄清楚this的指向，可以让我们代码更加简洁

函数的调用方式不同，this指代的对象也不同
[谁调用，this就是谁] 是判断this指向的粗略规则(this指向的是调用者的地址值)
例如:
- 直接调用函数，其实相对于是windows.函数,所以this代指window

7.3.5回调函数

如果将函数A作为参数传递给函数B时，我们称函数A为回调函数

理解：当一个函数作为参数传递给另一个函数的时候，这个函数就是回调函数

常见场景:

function fn(){
    console.log("回调")
}
//此时fn传递给了setInterval函数，fn就是回调函数
setInterval(fn,100)

function fn(){
    console.log("回调")
}
//此时fn传递给了setInterval函数，fn就是回调函数
setInterval(fn,100)

box.addEventListener('click',function(){
    console.log("我是回调")
})

box.addEventListener('click',function(){
    console.log("我是回调")
})

7.3.6其它事件

7.3.6.1页面加载事件

事件名称:load

加载外部资源(如图片、外联css和js等)加载完毕时触发的事件

监听页面所有资源加载完毕：

给windows添加load事件

window.addEventListener('load',function(){
    //需要执行的操作
})

window.addEventListener('load',function(){
    //需要执行的操作
})

WARNING

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

img.addEventListener('load',function(){
    //等待图片资源加载完毕，再执行里面的代码
})

img.addEventListener('load',function(){
    //等待图片资源加载完毕，再执行里面的代码
})

事件名称:DOMContentLoaded

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无等待样式表、图像等完全加载
事件名：DOMContentLoaded

监听页面DOM加载完毕:

给document添加DOMContentLoaded事件

document.addEventListener('DOMContentLoaded',function(){
    //需要执行的操作
})

document.addEventListener('DOMContentLoaded',function(){
    //需要执行的操作
})

7.3.6.2页面滚动事件

事件名称:scroll

滚动条在滚动的时候持续触发的事件
事件名称:scroll

监听整个页面滚动:

window.addEventListener('scroll',function(){
    //执行的操作
})

window.addEventListener('scroll',function(){
    //执行的操作
})

监听某个元素的内部滚动直接给某个元素加即可
scrollLeft和scrollTop(属性)
- 获取被卷去的大小
- 获取元素内容往左、往上滚出去看不到的距离
- 这两个值是可读写的

我们经常监测页面滚动距离，比如滚动100像素，就显示一个元素

window.addEventListener('scroll',function(){
      const n = document.documentElement.scrollTop
      console.log(n);
})

window.addEventListener('scroll',function(){
      const n = document.documentElement.scrollTop
      console.log(n);
})

WARNING

document.documentElement.scrollTop HTML文档返回对象为HTML元素

示例:

html

  <script>
    const div = document.querySelector('div')

    window.addEventListener('scroll',function(){
      const n = document.documentElement.scrollTop
      console.log(n);
      if (n>=100){
        console.log("我出现了");
        div.style.display='block'
      }else{
        console.log("我消失了");
        div.style.display='none'

      }
    })
  </script>

  <script>
    const div = document.querySelector('div')

    window.addEventListener('scroll',function(){
      const n = document.documentElement.scrollTop
      console.log(n);
      if (n>=100){
        console.log("我出现了");
        div.style.display='block'
      }else{
        console.log("我消失了");
        div.style.display='none'

      }
    })
  </script>

scrollTo()方法可以把内容滚动到指定坐标

//让页面指定滚动到y轴1000像素的位置
window.scrlllTo(0,1000)

//让页面指定滚动到y轴1000像素的位置
window.scrlllTo(0,1000)

7.3.6.3页面尺寸事件

会在窗口尺寸改变时候触发事件:

resize

window.addEventListener('resize',function(){
    //执行的代码
    console.log(1)
})

window.addEventListener('resize',function(){
    //执行的代码
    console.log(1)
})

检测屏幕宽度:

window.addEventListener('resize',function(){
    //执行的代码
    let w = document.documentElement.clientWidth
    console.log(w)
})

window.addEventListener('resize',function(){
    //执行的代码
    let w = document.documentElement.clientWidth
    console.log(w)
})

获取宽和高
- 获取元素的可见部分宽高(不包含边框，margin,滚动条等)
- clientWidth和clientHeight

7.4事件流

事件流指的是事件完整执行过程中的流动途径包括捕获阶段和冒泡阶段
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单说：捕获阶段是从父到子，冒泡阶段是从子到父

7.4.1事件捕获

概念：

从DOM的根元素开始去执行对应的事件(从外到里)
事件捕获需要写对应代码才能看到效果

代码:

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

说明:
- addEventListener第三个参数传入true代表的是捕获阶段触发
- 若传入false代表冒泡阶段触发

7.4.2事件冒泡

概念: 当一个元素的事件被触发的时候，同样的事件将会在该元素的所有祖先元素()中依次触发。这一过程称为事件冒泡

简单理解:当一个元素被触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡默认存在
L2事件监听第三个参数是false，或者默认都是冒泡

TIP

鼠标经过事件:

mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果(推荐)

7.4.3阻止冒泡

问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
前提：阻止事件冒泡需要拿到事件对象

语法：

事件对象.stopPropagation()

事件对象.stopPropagation()

WARNING

注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

示例:

document.addEventListener('click',function(){
  alert('我是你爷爷')
})
fa.addEventListener('click',function(){
  alert('我是你爸爸')
})
son.addEventListener('click',function(e){
  alert('我是你儿子')
  //停止事件流动
  e.stopPropagation()
})

document.addEventListener('click',function(){
  alert('我是你爷爷')
})
fa.addEventListener('click',function(){
  alert('我是你爸爸')
})
son.addEventListener('click',function(e){
  alert('我是你儿子')
  //停止事件流动
  e.stopPropagation()
})

7.4.4阻止事件行为

我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转

语法:

//阻止默认行为
e.preventDefault()

//阻止默认行为
e.preventDefault()

html

<body>
  <form action="#">
    <input type="submit" value="提交">
  </form>

  <script>
    const form = document.querySelector('form')
    form.addEventListener('click',function(e){
      //阻止表单默认提交行为
      e.preventDefault()
    })
  </script>
</body>

<body>
  <form action="#">
    <input type="submit" value="提交">
  </form>

  <script>
    const form = document.querySelector('form')
    form.addEventListener('click',function(e){
      //阻止表单默认提交行为
      e.preventDefault()
    })
  </script>
</body>

7.4.5解绑事件

on事件方式,直接使用null覆盖偶就可以实现事件的解绑

btn.onclick = function(){
  alert('n')
}
//解绑事件
btn.onclick =null

btn.onclick = function(){
  alert('n')
}
//解绑事件
btn.onclick =null

addEventListener方式，必须使用： removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])

function fn() {
  alert('你好')
}
//绑定事件
btn.addEventListener('click', fn)
//解绑事件
btn.removeEventListener('click', fn)

function fn() {
  alert('你好')
}
//绑定事件
btn.addEventListener('click', fn)
//解绑事件
btn.removeEventListener('click', fn)

WARNING

注意：匿名函数无法解绑

7.4.6事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧：

优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点
- 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现:事件对象.target.tagName可以获得真正触发事件的元素

案例示例：

让ul下的所有li在不适用for循环的情况下实现监听

html

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <p>你好</p>
  </ul>

  <script>
    //为ul添加点击事件
    const ul = document.querySelector('ul')
    ul.addEventListener('click',function(event){
      //如果点击的标签为li，则变色
      if(event.target.tagName==='LI'){
        event.target.style.color='green'
      }
    })
  </script>
</body>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <p>你好</p>
  </ul>

  <script>
    //为ul添加点击事件
    const ul = document.querySelector('ul')
    ul.addEventListener('click',function(event){
      //如果点击的标签为li，则变色
      if(event.target.tagName==='LI'){
        event.target.style.color='green'
      }
    })
  </script>
</body>

7.5元素尺寸与位置

通过js的方式，得到元素在页面种的位置

获取宽高:
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- offsetWidth和offsetHeight
  offsetWidth和offsetHeight获取的宽高包含边框长度border
- 获取出来的是数值，方便计算
- 注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
获取位置:
- 获取元素距离自己定位父元素的左、上距离
- offsetLeft和offsetTop注意是只读属性
WARNING
注意：一定需要有带定位的父元素，否则以文档左上角为准
- element.getBoundingClientRect()
  方法返回元素的大小及其相对于视口的位置
  简单来说就是相对于可视区窗口的位置

8.BOM

BOM(Browser Object Model)是浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

8.1location对象

localtion的数据类型是对象，它拆分并保存了URL地址的各个组成部分
常用属性和方法：

href属性获取完整的url地址，对其赋值时用于地址的跳转

console.log(location.href)
//可以通过js方式跳转到目标地址
location.href='http://www.baidu.com'

console.log(location.href)
//可以通过js方式跳转到目标地址
location.href='http://www.baidu.com'

search属性获取地址中携带的参数，符号?后面部分
js
```
console.log(location.search)
```
```
console.log(location.search)
```
1
hash属性获取地址中的哈希值，符号#后面部分
js
```
console.log(location.hash)
```
```
console.log(location.hash)
```
1
后期vue路由的铺垫，经常用于不刷新页面，显示不同页面

reload方法用来刷新当前页面，传入参数true时表示强制刷新

html

<body>
  <button>点击刷新</button>

  <script>
    let btn = document.querySelector('button')
    btn.addEventListener('click',function(){
      location.reload(true)
      //强制刷新，类似ctrl + f5
    })
  </script>
</body>

<body>
  <button>点击刷新</button>

  <script>
    let btn = document.querySelector('button')
    btn.addEventListener('click',function(){
      location.reload(true)
      //强制刷新，类似ctrl + f5
    })
  </script>
</body>

8.2navigator对象

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

常用属性和方法:

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

//监测useAgent(浏览器信息)
!(function () {
  const userAgent = navigator.userAgent
  //验证是否为Android或iPhone
  const android = userAgent.match(/(Android);?[￥s￥/+([￥d.]+)?a/)
  const iphone = userAgent.match(/(iPhone￥sOS)￥s([￥d_]+)/)
  //如果是Android或者Iphone，则跳转至移动站点
  if(android || iphone){
    location.href='http://www.baidu.com'
  }
})()

//监测useAgent(浏览器信息)
!(function () {
  const userAgent = navigator.userAgent
  //验证是否为Android或iPhone
  const android = userAgent.match(/(Android);?[￥s￥/+([￥d.]+)?a/)
  const iphone = userAgent.match(/(iPhone￥sOS)￥s([￥d_]+)/)
  //如果是Android或者Iphone，则跳转至移动站点
  if(android || iphone){
    location.href='http://www.baidu.com'
  }
})()

8.3history对象

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性方法:

9.本地存储

以前我们页面写的数据一刷新页面就没有了
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关的解决方案
1. 数据存储在用户浏览器中
2. 设置、读取方便、甚至页面刷新不丢失数据
3. 容量较大，sessionStorage和localStorage越5M左右
常见使用场景
https://todomvc.com/examples/vanilla-es6 刷新页面不丢失

9.1localStorage

能够使用localStorage把数据存储到浏览器中

作用：可以将数据永久存储在本地(用户的电脑),除非手动删除，否则关闭页面也会存在
特性：
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用

语法:

存储数据:

localStorage.setItem(key, value)
localStorage.setItem('username', 'xixi')

localStorage.setItem(key, value)
localStorage.setItem('username', 'xixi')

获取数据:

localStorage.getItem(key)
console.log(localStorage.getItem('username'))

localStorage.getItem(key)
console.log(localStorage.getItem('username'))

删除数据:

localStorage.removeItem(key)
localStorage.removeItem('username')

localStorage.removeItem(key)
localStorage.removeItem('username')

9.2sessionStorage

特性：

生命周期为关闭浏览器窗口-
在同一个窗口(页面)下数据可以共享-
以键值对的形式存储使用 -
用法跟localStorage 基本相

9.3复杂类型数据存储

解决：需要将复杂数据类型转换成JSON字符串,在存储到本地
语法：JSON.stringify(复杂数据类型)

const goods = {
    name:'小米',
    price:1999
}
localStorage.setItem('goods',JSON.stringify(goods))

const goods = {
    name:'小米',
    price:1999
}
localStorage.setItem('goods',JSON.stringify(goods))

解决：把取出来的字符串转换为对象
语法：JSON.parse(JSON字符串)

const obj = JSON.parse(localStorage.getItem('goods'))
console.log(obj)

const obj = JSON.parse(localStorage.getItem('goods'))
console.log(obj)

10.正则表达式

10.1介绍

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式
正则表达式在 JavaScript中的使用场景：
- 例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)
- 比如用户名: /^[a-z0-9_-]{3,16}$/`
- 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等

10.2语法

JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法:

定义正则表达式语法:

const 变量名 = /表达式/

const 变量名 = /表达式/

其中 / /是正则表达式字面量

比如:

const reg = /前端/

const reg = /前端/

判断是否有符合规则的字符串:

test()方法用来查看正则表达式与指定的字符串是否匹配

语法:

reg.test(被监测的字符串)

reg.test(被监测的字符串)

比如:

//要检测的字符串
const str = "你好吗，我是你的dad"
//定义正则表达式
const reg = /你好/
//检测方法
console.log(reg.test('str'))

//要检测的字符串
const str = "你好吗，我是你的dad"
//定义正则表达式
const reg = /你好/
//检测方法
console.log(reg.test('str'))

检索（查找）符合规则的字符串：

exec()方法在一个指定字符串中执行一个搜索匹配

语法

reg.exec(被检测的字符串)

reg.exec(被检测的字符串)

比如:

//要检测的字符串
const str = "你好吗，我是你的dad"
//定义正则表达式
const reg = /你好/
//检测方法
console.log(reg.exec('str'))

//要检测的字符串
const str = "你好吗，我是你的dad"
//定义正则表达式
const reg = /你好/
//检测方法
console.log(reg.exec('str'))

如果匹配成功，exec()方法返回一个数组，否则返回null

正则表达式检测查找 test方法和exec方法区别

test方法 用于判断是否有符合规则的字符串，返回的是布尔值找到返回true，否则false
exec方法 用于检索（查找）符合规则的字符串，找到返回数组，否则为 nul

10.3元字符

普通字符: 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。
元字符(特殊字符) 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
- 比如，规定用户只能输入英文 26 个英文字母，普通字符的话 abcdefghijklm.....
- 但是换成元字符写法： [a-z]
参考文档：
- MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- 正则测试工具: http://tool.oschina.net/regex

为了方便记忆，我们对众多元字符进行了分类:

边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
量词（表示重复次数）
字符类（比如 \d 表示 0 ~ 9 ）

10.3.1边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符如果 ^ 和 $ 在一起，表示必须是精确匹配。

^ 匹配输入字符串的开头，在方括号内表示不匹配

$ 匹配输入字符串的结尾，在方括号内表示不匹配比如：

const reg = /^[a-z]+$/
console.log(reg.test('abc')) //true
console.log(reg.test('123')) //false

const reg = /^[a-z]+$/
console.log(reg.test('abc')) //true
console.log(reg.test('123')) //false

10.3.2量词

量词用来 设定某个模式出现的次数 注意：逗号左右两侧千万不要出现空格

{n} 表示出现 n 次
{n,} 表示至少出现 n 次
{n,m} 表示至少出现 n 次，最多出现 m 次
* 表示出现 0 次或多次
+ 表示出现 1 次或多次
? 表示出现 0 次或 1 次
?? 表示出现 0 次或 1 次，非贪婪模式
+? 表示出现 1 次或多次，非贪婪模式
*? 表示出现 0 次或多次，非贪婪模式
{n}? 表示出现 n 次，非贪婪模式
{n,}? 表示至少出现 n 次，非贪婪模式
{n,m}? 表示至少出现 n 次，最多出现 m 次，非贪婪模式

比如:

//演示一下上面量词的使用方式
const reg = /^[a-z]{3,9}$/
console.log(reg.test('abc')) //true
console.log(reg.test('123')) //false
console.log(reg.test('abc123')) //false
console.log(reg.test('abc123456789')) //false
console.log(reg.test('abc1234567890')) //false

//演示一下上面量词的使用方式
const reg = /^[a-z]{3,9}$/
console.log(reg.test('abc')) //true
console.log(reg.test('123')) //false
console.log(reg.test('abc123')) //false
console.log(reg.test('abc123456789')) //false
console.log(reg.test('abc1234567890')) //false

10.3.3字符类

[ ] 匹配字符集合

后面的字符串只要包含 abc 中任意一个字符，都返回 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(/[abc]/.test('andy')) //true
console.log(/[abc]/.test('baby')) //true
console.log(/[abc]/.test('cry')) //true
console.log(/[abc]/.test('die')) //false

字符类还可以用来表示范围，比如 [a-z] 表示小写字母， [A-Z] 表示大

DANGER

^号在[ ]中表示非，在[ ]外表示以什么开头

预定义：指的是某些常见模式的简写方式

预定义类	说明
`\d`	匹配0-9之间的任意数字，相对于`[0-9]`
`\D`	匹配任意非数字的字符，相当于`[^0-9]`
`\w`	匹配任意字母、数字、下划线、中文，相当于`[A-Za-z0-9_]`
`\W`	匹配任意非字母、数字、下划线、中文，相当于`[^A-Za-z0-9_]`
`\s`	匹配任意空白字符，相当于`[\t\n\v\f\r]`
`\S`	匹配任意非空白字符，相当于`[^\t\n\v\f\r]`

10.4修饰符

正则表达式中的修饰符用于控制正则表达式的执行细节。修饰符包括：

i: 忽略大小写。
g: 全局匹配，匹配所有满足正则表达式的结果。
m: 多行匹配，将正则表达式应用于多行文本。

语法：/表达式/i

示例：

console.log(/a/i.test('a')); // true
console.log(/a/i.test('A')); // true

console.log(/a/i.test('a')); // true
console.log(/a/i.test('A')); // true

10.5替换

替换是在字符串中用一个字符或字符串替换另一个字符或字符串的过程。在正则表达式中，可以使用 replace() 方法进行替换操作。

语法：str.replace(/正则表达式/, 替换的内容)

示例：

const str = 'andy Andy andy';
// ig，忽略大小写并全部替换
console.log(str.replace(/andy/ig, 'baby'));

const str = 'andy Andy andy';
// ig，忽略大小写并全部替换
console.log(str.replace(/andy/ig, 'baby'));

Javascript Web APIs ​

变量声明 ​

作用和分类 ​

1.定时器 ​

1.1间歇函数 ​

1.2延时函数 ​

1.2.1清除延时函数 ​

1.3两种定时器的对比 ​

2.日期对象 ​

2.1实例化 ​

2.2时间对象方法 ​

2.3时间戳 ​

2.3.1时间戳的获取方式 ​

3.节点操作 ​

3.1DOM节点 ​

3.2查找节点 ​

3.2.1父节点查找 ​

3.2.2子节点查找 ​

3.2.3兄弟关系查找 ​

3.3增加节点 ​

3.3.1创建节点 ​

3.3.2追加节点 ​

3.3.3克隆节点 ​

3.3.4删除节点 ​

4.M端(移动端)事件 ​

5.JS插件 ​

6.JS执行机制 ​

6.1JS执行机制 ​

7.DOM ​

7.1DOM树 ​

7.2DOM对象 ​

7.2.1获取DOM对象 ​

7.2.2操作元素内容 ​

7.2.3操作元素属性 ​

7.2.3.1通过style属性操作css ​

7.2.3.2 操作类名(className)操作css ​

7.2.3.3通过classList操作控制css ​

7.2.4操作表单元素属性 ​

7.2.5自定义属性 ​

7.3事件 ​

7.3.1事件监听 ​

7.3.1.1事件监听版本 ​

7.3.2事件类型 ​

7.3.2.1鼠标事件 ​

7.3.2.2焦点事件 ​

7.3.2.3键盘事件 ​

7.3.2.4文本事件 ​

7.3.3事件对象 ​

7.3.3.1获取事件对象 ​

7.3.3.2事件对象常用属性 ​

7.3.4环境对象 ​

7.3.5回调函数 ​

7.3.6其它事件 ​

7.3.6.1页面加载事件 ​

7.3.6.2页面滚动事件 ​

7.3.6.3页面尺寸事件 ​

7.4事件流 ​

7.4.1事件捕获 ​

7.4.2事件冒泡 ​

7.4.3阻止冒泡 ​

7.4.4阻止事件行为 ​

7.4.5解绑事件 ​

7.4.6事件委托 ​

7.5元素尺寸与位置 ​

8.BOM ​

8.1location对象 ​

8.2navigator对象 ​

8.3history对象 ​

9.本地存储 ​

9.1localStorage ​

9.2sessionStorage ​

9.3复杂类型数据存储 ​

10.正则表达式 ​

10.1介绍 ​

10.2语法 ​

10.3元字符 ​

10.3.1边界符 ​

10.3.2量词 ​

10.3.3字符类 ​

10.4修饰符 ​

Javascript Web APIs

变量声明

作用和分类

1.定时器

1.1间歇函数

1.2延时函数

1.2.1清除延时函数

1.3两种定时器的对比

2.日期对象

2.1实例化

2.2时间对象方法

2.3时间戳

2.3.1时间戳的获取方式

3.节点操作

3.1DOM节点

3.2查找节点

3.2.1父节点查找

3.2.2子节点查找

3.2.3兄弟关系查找

3.3`增加节点`

3.3.1创建节点

3.3.2追加节点

3.3.3克隆节点

3.3.4删除节点

4.M端(移动端)事件

5.JS插件

6.JS执行机制

6.1JS执行机制

7.DOM

7.1DOM树

7.2DOM对象

7.2.1获取DOM对象

7.2.2操作元素内容

7.2.3操作元素属性

7.2.3.1通过style属性操作css

7.2.3.2 操作类名(className)操作css

7.2.3.3通过classList操作控制css

7.2.4操作表单元素属性

7.2.5自定义属性

7.3事件

7.3.1事件监听

7.3.1.1事件监听版本

7.3.2事件类型

7.3.2.1鼠标事件

7.3.2.2焦点事件

7.3.2.3键盘事件

7.3.2.4文本事件

7.3.3事件对象

7.3.3.1获取事件对象

7.3.3.2事件对象常用属性

7.3.4环境对象

7.3.5回调函数

7.3.6其它事件

7.3.6.1页面加载事件

7.3.6.2页面滚动事件

7.3.6.3页面尺寸事件

7.4事件流

7.4.1事件捕获

7.4.2事件冒泡

7.4.3阻止冒泡

7.4.4阻止事件行为

7.4.5解绑事件

7.4.6事件委托

7.5元素尺寸与位置

8.BOM

8.1location对象

8.2navigator对象

8.3history对象

9.本地存储

9.1localStorage

9.2sessionStorage

9.3复杂类型数据存储

10.正则表达式

10.1介绍

10.2语法

10.3元字符

10.3.1边界符

10.3.2量词

10.3.3字符类

10.4修饰符