WebAPIs

Dom获取&属性操作

Web APIs 第一天 3.29

声明变量

var(变量) let(变量) const(常量)
const 语义化更好一些 优先使用

1.Web APIs基本认知

1.1 作用和分类

作用：使用JS去操作html浏览器
分类：DOM、BOM

1.2 什么是DOM

DOM-文档对象模型：(document object model)用对象的角度去描述页面中的元素

1.3 DOM树

将HTML文档以树状结构直观的表现出来，页面中元素与元素之间的关系
作用：直观的体现了标签与标签之间的关系

1.4 DOM对象

浏览器根据html标签生成的JS对象

• 所有的标签属性都可以在这个对象上面找到
• 修改这个对象的属性会自动映射到标签身上

2.获取DOM元素

document.querySelector(' ')

query:查找
selector:选择器

细节

1.选择器在页面中不存在,结果是null
2.如果有多个元素满足这个选择器,找的都是满足条件的第一个元素
3.如果我们就是想得到所有满足选择器的元素,得到的是所有满足选择器的元素所形成的一个伪数组

let c = document.querySelectorAll('div')
        console.log(c)

1. 所谓的伪数组:具备数组的一般特征,但是不具备数组的所有特征

• 一般特征:可以下标访问, .length 循环遍历
• 其他特征:push pop unshift splice shift …都不能使用

4.如果只有一个元素满足了选择器,通过querySelectorAll得到的依旧是一个数组，这个数字只有一个元素
5.如果没有元素满足选择器，通过querySelectorAll得到的依然是一个数组，只不过这个数组里面一个元素都没有

获取body和html这俩个元素可以使用快捷方式document.body，document.documentElement

3.操作元素内容

所有元素的内容,就是这个标签:开始标签和结束标签所夹着的内容
单标签是没有内容的,只有双标签才有内容
innerText innerHTML
这俩个属性:都要通过元素对象 . 出来

对象.innerText 属性

拿到的只是文本信息
不解析标签

对象.innerHTML属性

拿到的是包括标签在内的所有信息
解析标签
使用会多一点

4.操作元素的属性

4.1 常规的属性

举例：a标签的href属性、img的src属性、input的type属性…
获取: 元素对象.属性
操作：元素对象.属性=值
了解即可

//根据id名获取元素
document.getElementById('ID属性值')
//根据类名获取元素
document.getElementsByClassName('class属性的值')
//根据标签的名字获取元素
document.getElementsByTagName('标签的名字')

4.2 样式的属性

style

style也是元素的属性，也是要通过元素对象 . 出来
元素对象.style 需要继续往下点 .
元素对象.style继续往下点出的样式中，如果样式的名字带有-，我们需要把这个样式的名字变成小驼峰( font-size–> fontSize)
元素对象 . style 获取或者操作的都是这个元素的行内样式

class

操作元素的class属性：本来应该是元素对象.class 但是class是关键字，所以不能用

元素对象.className()

通过元素对象.className 在进行多个class值操作拼接的时候，空格很烦人

元素对象.classList.add('class的值') 在原来的基础上进行添加
				  .remove('class的值') 在原来的基础上进行删除
				  .toggle('class的值')在原来的基础上进行切换   切换：如果有则删除，没有则添加
				  .contains('class的值') 判断有没有这个类名，如果包含是true，没有不包含false

className是针对于字符串的操作，所以我们在进行多个class值的操作的时候，需要考虑空格的问题，所以一般使用classList

不能够去读取null的style属性

注意表单的某些属性：disabled
checked —>false 没有 true 有
selected

4.3 自定义属性

在h5中，对自定义属性有了一些规范 名字必须要以 data- 开头
一个标签可以有多个自定义属性
dataset包含了所有的自定义属性
使用js代码去操作自定义属性：元素对象.dataset.自定义属性的名字
增加：元素对象.dataset.自定义属性的名字=值

5.定时器

5.1一次性的定时器(延迟定时器)

setTimeout(函数，时间) //开启一次性定时器
clearTimeout(定时器的id） //关闭一次性定时器,需要在时间到之前取消才有意义

5.2间歇的定时器

反复的每隔一段时间去执行这段代码

setInterval(函数,时间)//开启一个定时器
clearInterval(定时器的id) //将定时器停止 

如何避免定时器重叠问题
在开启新定时器之前，先把上一次定时器取消掉

第二天

js中的内置对象：Math和Date

Date指的是时间对象
先创建出一个时间对象

const now = new Date() //创建了一个当前时间的对象
//括号中什么都不传递，代表创建的是当前时间
const d=new Date('2023-03-03 00:00:00') //创建指定时间的日期对象
时间对象.getFullYear() //得到这个时间的年份
时间对象.getMonth() +1 //得到这个时间的月份 是从0开始的
时间对象.getDate()  //得到的是这个月的几号
时间对象.getHours()  //得到的是小时
时间对象.getMinutes()  //得到的是分钟
时间对象.getSeconds()  //得到的是秒钟

时间对象.getDay() // 得到星期数  星期天是0
//时间戳对于我们的意义在于：可以帮助我们实现倒计时的效果  (未来时间对象的时间戳-当前时间对象的时间戳)/1000 -->这俩个时间距离多少秒
//再把距离多少秒转换为 小时，分钟，秒钟
时间对象.getTime() //时间戳 当前的时间距离1970-01-01 08:00:00 到底过了多少毫秒

获取时间戳的方法：

1.日期对象.getTime()
2.+日期对象
3.Date.now() (只能得到当前时间的时间戳，不能得到指定时间的时间戳)

操作元素的事件：

**事件：**用户在网页上做出的一些行为，我们要用js代码去监听这些行为，执行某一段js代码 点击 、鼠标相关的行为 、输入框的输入 、页面的滚动…
我们并不是控制用户到底做不做这些行为，我们要做的是：当用户做了某些事情的时候，执行一些js代码

1.1事件监听

什么是事件：
在编程时系统内发生的动作或者发生的事情
什么是事件监听：
就是让程序检测是否事件产生，一旦有事件触发立即调用一个函数做出响应也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
语法：

//事件源 事件类型 事件处理函数
元素对象.addEventLiatener('事件类型',要执行的函数)
//每一种事件类型,都有固定的字符串:点击click

不同绑定事件的方式:

最新版本的绑定代码：元素对象.addEventLiatener('事件类型',要执行的函数)
特点：支持重复的绑定多次，每次都会产生效果

以前的绑定事件的版本：元素对象.on事件类型=function(){}
特点:如果绑定事件多次，只有最后一次绑定才会出效果
重复绑定事件的错误:

1.2 事件类型

焦点事件：不是所有元素都具备焦点事件，只有表单元素才具备
键盘触发：
keydown和keyup是监听键盘的按下和抬起事件
无论哪个键按下或抬起，都会触发这个事件
keydown会持续触发，keyup只会触发一次
文本事件：
不是所有的元素都会触发输入事件，只有表单元素才具备
当文本框通过各种方式输入了东西，就会触发这个事件

//如何去拿到输入框中用户输入的数据?
input元素.value=''
//如何拿到复选框中,用户选择的状态?
复选框元素.checked=''

表单的提交事件：
form中的submit事件

第三天

1.3 事件对象

1. 事件对象是什么？
   也是个对象，这个对象里有事件触发时的相关信息

2. 使用场景：
   可以判断用户按下哪个键
   可以判断鼠标点击了哪个元素，从而做出相应的操作

3. 语法获取：
   在事件绑定的回调函数的第一个参数就是事件对象
   一般命名为event、e

4. 部分常用属性：

• e.type：获取当前的事件类型
• e.clientX / e.clientY：获取光标相对于浏览器可见窗口左上角的位置
• e.offsetX / e.offsetY：获取光标相对于当前DOM元素左上角的位置
• e.key：用户按下的键盘键的值(按下的或者是抬起的是哪个键

1.4 事件的上下文环境

arguments是可以直接在函数内部使用的,包含了所有的实参
this 也是可以直接在函数内部使用的,它代表的意思是,这个fn函数是由谁调用的
window 是一个浏览器的顶级对象
对于普通函数而言，函数体内部的this，就代表了这个函数的调用者
事件处理函数中的 this，其实就是代表了，绑定事件的这个元素
再循环遍历中，为每个元素绑定点击事件的时候，在数件处理函数，有俩种方式可以代表产生当前事件的
方式1：lis[i]
方式2：this
在js代码中，函数的使用非常的灵活：
1.函数可以作为参数
2.将函数作为返回值来传递
回调函数：
把一个函数给别人,由别人调用这个函数,这个函数我们可以称之为 回调函数
小技巧：我们想使用js代码去模拟一个事件的产生

元素对象.事件类型()

阻止默认行为

有些元素是具备默认行为的

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

form表单默认行为的阻止：
对于表单的整体form而言，有一个事件 submit 表单提交的事件

const form = document.querySelector('form')
        form.addEventListener('submit', function (e) {
            e.preventDefault()
        })

事件流

事件流：事件是会流动的
既然事件会流动，流动就会有方向
默认事件流动的方向：从子元素—>父元素（冒泡）
我们是可以修改流动的方向：从父元素—> 子元素（捕获）
怎么改变事件流动的方向：利用addEventListener(参数1，参数2，参数3)，第三个参数 ( true:捕获，false:冒泡 )
元素对象.on事件类型 = function( ){ },这种绑定方式只有一个冒泡方向
事件流在一次事件中，只会有一个方向，要么冒泡，要么捕获

//阻止事件冒泡：
e.stopPropagation()

事件委托

事件委托：委托父元素处理子元素中的事件
事件委托由于委托给了父元素，就造成范围被扩大了，我们在事件处理函数中，需要对元素进行筛选
事件冒泡的原理

//这次真正产生事件的那个元素
e.target
//判断事件是否是li
e.target.tagName === 'LI'

使用场景：
1.当需要绑定事件元素特别多的时候，委托给父元素
2.当我们需要给未来元素(一开始界面没有，后面动态创建出来的元素)绑定事件

第四天

复习

1. 什么时候才有可能需要考虑冒泡
   子元素监听了事件，父元素也监听了事件
2. 事件冒泡是客观存在的，当产生一个事件，这个事件会流动
   从子元素–>父元素
3. 有时候我们很讨厌事件冒泡，所以我们需要在某个地方阻止事件冒泡
   但是事件冒泡有时候帮助我们做以一些事情：事件委托
4. 事件委托：
   1.需要绑定的元素特别多的时候（5个以上）
   2.给动态创建的元素绑定事件的时候
5. 当代码没有出现预期结果的时候
   1.先看看有没有报错
   2.没有报错
   猜想：到底是哪里出了问题，缩小猜想的范围：打印
   我们在解决一个问题的时候，可以随意的打印，但是在解决完的时候，最好把这个问题的打印都去掉
6. mouseenter 和 mouseleave 不具备事件冒泡的特点
7. mouseover (鼠标进入)和 mouseout (鼠标离开)具备冒泡的特点
8. 拿到元素的父结点：parentNode

新的事件

1. 页面加载的事件：给window增加 load事件
   页面的所有元素加载完成，会执行的事件处理函数
   load事件，什么时候才会执行：页面加载完成
   页面加载完成：
   页面的元素结构加载完成 并且 这个页面需要的外部资源（例如：img）加载完成
   DOMContentLoaded:页面的基本结构加载完成，和外部资源没有关系,时机会更早一点

window.addEventListener('load',function(){
	//代码
})

document.addEventListener('DOMContentLoaded',function(){
	//代码
})

2. 元素滚动的事件:scroll事件
   
   稍微滚动一点点，就会触发很好多次 scroll事件
   元素.scrollTop这个元素滚出去了多少距离 scrollTop这个属性是可读可写的

元素的滚动和页面的滚动不是同一件事情
元素内的滚动：
1.元素具备固定的宽度或高度
2.内容会超过这个元素的宽度或高度
3.给这个元素设置overflow : scroll / auto;

页面的滚动：不断地在页面中放置元素，让元素在一屏下展示不出来

让元素产生滚动：
方式1: scrollTop这个属性的可写特点来操作

元素对象.scrollTop = 值
//页面
document.documentElement.scrollTop = 值

方式2: 元素对象.scrollTo(x,y)

//元素滚出去的距离
div.scrollTo(0,100)
//页面滚出去的距离
document.documentElement.scrollTo(0,100)

页面的滚动事件和元素的滚动事件的监听：

元素.addEventListener('scroll',function(){
	console.log(元素.scrollTop)
})
//页面
window.addEventListener('scroll',function(){
	console.log(document.documentElement.scrollTop)
})

3. 窗口大小变化的事件resize事件
   对整个窗口进行大小尺寸变化的监听
   增加给window的

window.addEventListener('resize',function(){
	//代码
})

元素大小和位置相关的信息

width/height

1. scroll系列:scrollWidth/scrollHeight
   代表元素内容的宽度和高度
   包含padding ，包含超出内容的部分，不包含border 不包含滚动条的区域
2. offset系列:offsetWidth/offsetHeight
   代表元素的宽度和高度
   包含padding 包含border 不包含需要滚动的那一部分 不包含滚动条的区域
3. client系列:clientWidth/clientHeight
   代表元素的宽度和高度
   包含padding 不包含border 不包含需要滚动的那一部分 不包含滚动条的区域
   

left/top

1. scroll系列:scrollLeft （横向）/scrollTop （纵向）
   这个元素内容滚出去的距离
2. offset系列:offsetLeft/offsetTop
   距离带定位的父元素的左侧和顶部的距离是多少
3. client系列:clientLeft/clientTop
   元素左边框的宽度和元素上边框的宽度

第五天

复习

1. scrollLeft 和 scrollTop是可读可写的
2. scrollWidth/scrollHeight 、offset系列 和 client系列 是可读不可写的
3. 如何让一个元素的位置发生改变
   1.left样式
   2.margin-left样式
   3.transform : translate (0px,0px) ;

解绑事件

绑定事件：元素对象.addEventListener('click',function( ){ })
解绑事件：元素对象.removeEventListener('click',你绑定事件时的那个函数)
如果一个事件需要解绑，那么这个事件在绑定的时候，不能使用匿名函数

const fn = function () {
      console.log('div被点击了...')
 }
 //绑定
 元素对象.addEventListener('click',fn)
 //解绑
 元素对象.removeEventListener('click',fn)

补充：
元素对象.addEventListener() 可以多次绑定

//只有最后一次才能绑定
绑定事件: 元素对象.on事件类型=function(){} 
解绑事件: 元素对象.on事件类型=null

日期对象

//获取当前时间
const date=new Date()

1.2 日期对象方法

1.3时间戳

时间对象.getTime()
+时间对象
Date.now()//只能得到当下的时间

1.4 目前为止，我们到底学了啥

1. 获取元素

document.querySelector(选择器)
document.querySelectorAll(选择器)[下标]
document.body
document.documentElement
事件对象 e.target
事件处理函数中的this

2. 操作元素

• 操作元素的内容

元素对象.innerHTML //获取
元素对象.innerHTML=值 //修改

• 操作元素的常规属性
  id href value type src checked disabled…

元素对象.属性 //获取
元素对象.属性=值 //设置

• 操作元素的样式属性
  style属性

元素对象.style.样式属性
//样式属性带有-,需要变成驼峰标识

class属性

classList add() remove() toggle()//切换 contains()

• 操作元素的自定义属性

元素对象.dataset.xxx

• 绑定元素的事件

元素对象.addEventListener(事件类型，函数)

• 解绑元素的事件

元素对象.removeEventListener(事件类型，绑定时的那个函数)

3. 事件流
   喜欢就事件委托
   不喜欢就阻止 e.stopPropagation()

其他获取元素的方式

元素节点：1.所有的标签 2.html是根节点
整个页面的根节点是document
利用节点与节点之间的关系来获取元素(不要滥用)
父元素：元素对象.parentNode
子元素：元素对象.children 获得的是伪数组
兄弟元素：上边的：元素对象.previousElementSiblings
下边的：元素对象.nextElementSiblings

动态创建新的元素

1. innerHTML 其实也可以帮助我们创建出新的标签
   针对的是字符串
2. document.createElement(标签名) 创建一个指定标签的元素对象 ，创建出来的元素对象不会在界面中显示出来
   针对的是元素对象

目标元素对象.appendChild(刚刚创建的元素对象)

const newLi = document.createElement('li')
newLi.innerHTML = input.value//给刚刚创建的li添加内容
ul.appendChild(lis) //这行代码才能让刚刚创建出来的元素显示在页面中
//appendChild把一个元素,放在指定目标内部的最末尾处
目标元素对象.insertBefore(刚刚创建出来的元素对象，插入谁的前面)

如何控制一个元素的内容

1.元素对象.innerHTML=值
2.元素对象.appendChild(另外新的元素对象)

克隆节点

元素.cloneNode(布尔值)
//克隆产生一个新的元素
元素.cloneNode(true)
//代表克隆时会包含后代节点一起克隆，深拷贝
元素.cloneNode(false)
//代表克隆时不包含后代节点，浅拷贝

删除节点

真正的把元素在页面结构中，完全的移除

元素对象.remove()
元素对象.parentNode.removeChild(子元素)

第六天

复习

1. 以后针对表单，我们都是非常讨厌表单的默认行为

const form = document.querySelector('form')
	form.addEventListener('submit', function (e) {
		e.preventDefault() //阻止表单默认行为
	})

2. 便捷快速重置表单的方式

form.reset()

M端事件

1. touch相关的事件，是属于移动端的事件
2. 移动端也有自己独特的地方。比如触屏事件 touch (也称触摸事件)，Android 和 IOS 都有。
3. 触屏事件 touch (也称触摸事件)，Android 和 IOS 都有。
4. touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
5. 作用到这个元素的手指对象，是一个伪数组，包含了操作了这个元素的所有手指对象
   

PC点击事件中 e.type  e.target  e.key  e.clientX/e.clientY
e.preventDefault()  e.stopPropagation()

插件

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

重绘和回流

1. 浏览器是如何进行界面渲染的

• 解析 (Parser)HTML，生成DOM树(DOM Tree)
• 同时解析 (Parser) CSS，生成样式规则 (Style Rules)
• 根据DOM树和样式规则，生成渲染树(Render Tree)
• 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息(位置，大小)
• 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
• Display: 展示在页面上

2. html字符串：
   布局部分的字符串–>把每一个元素生成一个DOM对象，再把每一个DOM对象之间的关系连接起来，形成了DOM树
   css部分的字符串–>把所有的css样式，都生成对象的样式规则对象（css规则树）
   js部分的字符串
   
   回流一定会引起重绘，重绘不一定引起回流

回流(重排)

当Rander Tree中部分或者全部元素尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档Render Tree中部分或者全部元素的尺寸的过程称为 回流。
会导致回流(重排)的操作：

• 页面的首次刷新
• 浏览器的窗口大小发生改变元素的大小或位置发生改变
• 改变字体的大小
• 内容的变化(如: input框的输入，图片的大小)
• 激活css伪类 (如: :hover)
• 脚本操作DOM(添加或者删除可见的DOM元素)
  简单理解影响到布局了，就会有回流

重绘：

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如: coor、background-coloroutline等)，称为重绘。(颜色相关)

回顾DOM操作

1. 选择器中null不能继续往下点.如果继续点会报错
2. 元素对象.parentNode 找不到，则为null
3. 元素对象.children 伪数组
4. 在事件委托的时候this(绑定事件的元素)和e.target(产生事件的元素)可能不一样，其他情况一样
5. 操作元素的内容:

• innerHTML=’ ’
• innerText=’ ’
• 父元素,appendChild(元素对象)
• 父元素.insertBefore(元素对象，置于哪个元素前面)
• 父元素.removeChild(元素对象)

6. 自定义属性：
   什么时候使用自定义属性：在标签上存储一些信息的时候
   如何操作自定义属性：元素对象.dataset.xxx
7. 事件类型
   
8. 事件对象e.
   
9. 事件流
   
10. 模拟事件
    
11. 其他知识

• 间歇定时器
  
• 单次定时器
  
• 元素信息
  
• this指向
  

BOM(浏览器对象模型)

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

1.2 定时器-延时函数

语法：

let timer=setTimeout(回调函数,等待的毫秒数)
//清除延时函数
clearTimeout(timer)

注意：

• 延时器需要等待，所以后面的代码先执行
• 每一次调用延时器都会产生一个新的延时器

1.3 js执行机制

1.js代码是单线程(只有一个人来完成js中的所有事情)
进程：理解为程序所需要执行的内存空间
线程：真正干活的那个人

为了保证js代码，不会阻塞页面，js在处理先后顺序的问题的时候，js会把这些事情进行分类：
1.同步的事情
2.异步的事情： 定时器，事件处理函数

js对于同步和异步的代码，有不同的处理策略
同步的代码：立马执行
异步的代码：直接略过
只有当同步的代码全部执行完之后，才会回过头来看看，那些异步的代码，有没有达到执行的时机

1.4 location对象

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

常用属性和方法:

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

location.href //得到当前网页的网址
location.href = 'http://www.itcast.cn' //让当前页面跳转

• search 属性获取地址中携带的参数，符号 ?后面部分

location.search

• hash属性获取地址中的哈希值，符号 # 后面部分

location.hash

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

location.reload(true)//让当前页面强制刷新

1.5 navigator对象

存储了浏览器的版本信息
让我们使用js代码，判断这个浏览器是不是手机端的浏览器

1.6 history对象

当前标签页的历史记录

• forward()
• back()
• go(步长)

1.7 localStorage

数据持久化的存储下来，内存当中存储的变量不会永久的存下来

localStorage.setItem('要存的数据名',数据)//存数据(设置某一项的数据)
localStorage.getItem('要取的数据名')//获取数据
localStorage.removeItem('数据名')//移除数据(将某一项数据移除掉)
localStorage.clear('数据名')//将全部的localStrorage清空

1.8 sessionStorage

把数据临时存储，不是持久化的，当浏览器关闭，数据也会消失不见

sessionStorage.setItem('数据名'，数据)//存储数据
sessionStorage.removeItem('数据名')//移除数据(数据不存在也不会有影响)
sessionStorage.getItem('数据名')//获取数据
sessionStorage.clear('数据名')//将数据全部都清空掉

第七天

复习

存储数据的一些细节问题

给常量赋值

1. localStorage可以存任意类型的数据，不管存什么类型的数据，取出来的都是字符串的类型
2. 存储普通数据类型的时候，取数据的时候，可能需要进行类型的转换
3. 存储的引用数据类型的时候，存进去的数据，可能会丢失

存储复杂数据类型

如果我们在存储复杂数据类型的时候，不想让数据丢失
我们把obj变成字符串之后，把变成字符串之后的数据存储在localStorage中

//把复杂数据类型变成字符串
JSON.stringify(obj)  //将obj这个对象，转变成了json的字符串，这个json字符串将会保留对象中的所有信息
//将字符串转换为复杂数据类型
JSON.parse(字符串)

把arr进行持久化操作
什么时候存? 数据变的时候存
什么时候去? 数据初始化的时候取

字符串的操作

1. 字符串的循环遍历：字符串.length 字符串[下标]
2. 字符串的分割：字符串.split(‘分隔符’)

• 如果分隔符存在，把分隔符左右俩边的部分放到一个数组之中
• 如果分隔符不存在，把整个字符串放到一个数组中
• 如果分隔符是空字符串，把字符串里的每一个字符串都分割出来，放到一个数字中去

let timp='zhangsan'
const arr=timp.split('')
//结果:['z','h','a','n','g','s','a','n']
let str1='zhangsan-lisi-wangwu'
const arr=str1.split('-')
//结果:['zhangsan','lisi','wangwu']
let str1='name:zhangsan'
console.log(str1.split(':')[1])
//结果:zhangsan
let str3='name=zhangsan&age=18&height=178'
const arr=str3.split('&')
const obj={}
//结果:['name=zhangsan','age=18','height=178']
for(let i=0;i<arr.length;i++){
const key=arr[i].split('=')[0]
const value=arr[i].split('=')[1]
obj[key]=value
}
//结果:{name=zhangsan,age=18,height=178}

3. 字符串的查找：字符串.indexOf(‘查找的字符串’)

• 在大字符串中，得到小字符串出现的位置
• 如果说小字符串出现了多次，得到的是第一个出现小字符串的位置
• 如果说小字符串在大字符串中不存在，我们将会得到-1

4. 字符串的替换：字符串.replace(‘目标小字符串’，‘新的小字符串’)

• 如果目标小字符串，在大字符串中出现多次，那么replace方法，一直是替换第一个出现的目标字符串

5. 其他的方法

• 字符串.includes('小字符串')//得到大字符串中是否包含了小字符串(true,false)
• 字符串.startWith('小字符串')//得到大字符串是否是以小字符串开头
• 字符串.endWith('小字符串')//得到大字符串是否是以小字符串结尾
• 字符串.toUpperCase()//转变为大写
• 字符串.toLowerCase()//转变为小写

6. 解决俩个办法

• replace只能替换第一个
• 如何使用字符串去表示一种字符串的范围
• • 手机号的范围
• • 邮箱的范围
• • …

正则表达式

作用:都是对字符串的操作

1. 匹配
2. 替换(全部替换)
3. 提取

什么是正则表达式

就是用一堆乱七八糟的符号，去表示某些范围

如何使用正则表达式

定义正则表达式

使用字面量 /正则表达式的符号/

特殊字符

1. 边界符(表示位置，开头和结尾，必须用什么开头，用什么结尾)
   

let str = 'hello'
let reg = /^he/ //以he开头
let reg = /lo$/ //以lo结尾
let reg = /^he$/ //必须以he当做全部，字符串内容只能是he

2. 量词(表示重复的次数)
   
   这些量词不能单独使用，在这些量词前面一定要有东西，代表这个东西出现次数的规则

let str = 'hello'
let reg = /^hel{2}o/ //l重复俩次
let reg = /^hel{2,5}o/ //l重复2-5次

3. 元字符

• [] 代表从一堆字符中取其一都算满足规则
  [abc] abc中的一个
  [a-zA-Z0-9] 数字大小写字母取其一
  [aef]{3} 三个aef中取其一
  [^abc] 在中括号中的^是取反 只要不是abc都可以
• . 换行符之外的任何单个字符
  

4. | 代表多个规则的连接

整个正则字符串的修饰符

跟在最后一个斜杠后面

• i ignore 忽略大小写
• g global 全局匹配

//把字符串中的所有激情都替换成**
let reg=/激情/g
const replace = str.replaceAll(reg, '**')
console.log(replace)

使用正则表达式

正则表达式对象.test(字符串)

let str = 'hello'
let reg = /he/ //定义了一个正则表达式的对象
const ret = reg.test(str) //用正则表达式去测试字符串
//结果:true
test(被检测的字符串) //用来查看正则表达式与指定的字符串是否匹配

第八天

复习

学生信息表-持久化版本

1. 结构搭好
   
   

2. render()调用
   

3. 添加按钮，渲染页面
   

4. 删除按钮
   

5. 表单重置

form.reset()

6. 非空校验
7. 把arr存到localStorage中
   
8. 取出数据(数据初始化的时候取)
   
9. 代码上的小技巧：
   

小兔鲜儿综合案例

注册页面(register)

把全部的this替换为点出事件的变量名

1. 获取验证码

解决定时器重叠问题

按钮执行频率降低(节流)
节流阀：按钮的点击无论执行的有多快，3s之内就只能执行一次事件处理函数中的代码(标记位)

let flag = true //1.定义一个布尔类型的值
        document.querySelector('button').addEventListener('click', function () {
            if (flag) {
                console.log('aaa')
                flag = false
                setTimeout(function () {//延迟三秒之后才可以再点击
                    flag = true
                }, 3000)
            }
        })

节流版

2. 验证用户名

change事件:失去光标,并且内容改变
input框的事件:focus blur input change(更好的实现验证事件)

3. 验证手机号

4. 验证验证码

5. 验证密码框

6. 确认密码的验证

7. toggle有则删除，无则添加

8. 提交的整体校验

登录页面(login)

2. 提交时判断有没有勾选同意协议

主页面(index)

PC端轮播图

1. 监听界面加载完成事件

2. 鼠标移入显示箭头效果

3.鼠标移出显示箭头效果

4.生成小圆点

5.点击左右箭头切换

6.点击小圆点，切换到对应的图

1. 给ol下动态创建的li加自定义属性
   
2. 切换
   

7.小圆点的高亮状态

1. 给ol第一个li增加高亮状态
   
2. 对应的小圆点增加高亮
   
   给左右箭头点击事件和小圆点的点击事件加函数

8.自动轮播

9.左右箭头点击过快问题(节流)

左右箭头都要设置

无缝滚动

transitionend 过渡结束


鼠标移动事件 mousemove

第九天

重要案例

小兔鲜商品详情

1.滚动相关

监听页面的滚动事件：得到最新滚出去的距离
如果想要页面的滚动，是一种平滑的方式，给html和body在css中设置:

body,html{
scroll-behavior:smooth; //平滑滚动
}

2.tab栏切换

侧边栏图片切换

右侧购物详情tab栏

商品详情和商品评价切换

3.放大相关

遮罩层的移动

大图片的显示

背景图片的变换

大图移动的代码

todoList项目实战

1.使用数据渲染界面

列表的渲染

数量显示的渲染

方法一:

方法二:

方法三:

2.添加功能

.trim() 裁剪(去掉多余的空格)

删除功能

实现切换

数据持久化

什么时候存

什么时候取(初始化)