16.先导片
1.变量声明有三个 var let 和 const
2.我们应该用那个呢?
3.首先var 先排除，老派写法，问题很多，可以淘汰掉…
4.let or const ?
5.建议: const 优先，尽量使用const，原因是:
1.const 语义化更好
2.很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢?
3.实际开发中也是，比如react框架，基本const
6.如果你还在纠结，那么我建议:
有了变量先给const，如果发现它后面是要被修改的，再改为let
7.const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
8.但是对于引用数据类型，const声明的变量，里面存的不是 值，不是值，不是值，是地址
例：const arr=[1，2，3]
9.总结
1.以后声明变量我们优先使用哪个?
1.const
2.有了变量先给const，如果发现它后面是要被修改的，再改为let
2.为什么const声明的对象可以修改里面的属性?
1.因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错
2.建议数组和对象使用 const 来声明
3.什么时候使用let声明变量?
1.如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let
2.比如 一个变量进行加减运算，比如 for循环中的 i++
17.Web API
1.Web API 基本认知
1.作用和分类
作用: 就是使用 JS 去操作 html和浏览器
分类:DOM(文档对象模型)、BOM(浏览器对象模型)
2.什么是DOM
1.DOM(Document Object Model--文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API
2.白话文:DOM是浏览器提供的一套专门用来 操作网页内容 的功能
3.DOM作用：开发网页内容特效和实现用户交互
3.小结
1.Web API阶段我们学习那两部分?
1.DOM
2.BOM
2.DOM 是什么?有什么作用?
1.DOM 是文档对象模型
2.操作网页内容，可以开发网页内容特效和实现用户交互
4.DOM树:描述网页内容关系的名词,将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
1.作用:文档树直观的体现了标签与标签之间的关系
2.DOM对象(重要)
1.DOM对象:浏览器根据html标签生成的J5对象
1.所有的标签属性都可以在这个对象上面找到
2.修改这个对象的属性会自动映射到标签身上
2.DOM的核心思想
把网页内容当做对象来处理
3.document 对象:是 DOM 里提供的一个对象
1.所以它提供的属性和方法都是用来访问和操作网页内容的
2.例:document.write()
3.网页所有内容都在document里面
5.小结
1.DOM 树是什么?
1.将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
2.作用:文档树直观的体现了标签与标签之间的关系
2.DOM对象怎么创建的?
1.浏览器根据html标签生成的JS对象(DOM对象)
2.DOM的核心就是把内容当对象来处理
3.document 是什么?
1.是 DOM 里提供的一个对象
2.网页所有内容都在document里面
2.获取DOM对象
1.目标:能查找/获取DOM对象
2.提问:我们想要操作某个标签首先做什么?
肯定首先选中这个标签，跟CSS选择器类似，选中标签才能操作
3.查找元素DOM元素就是利用J5 选择页面中标签元素
4.学习路径:
1.根据CSS选择器来获取DOM元素(重点) //第6点
2.其他获取DOM元素方法(了解) //第8点
5.小结
1.获取一个DOM元素我们使用谁?能直接操作修改吗?
1.queryselector() //获取第一个元素
2.可以
2.获取多个DOM元素我们使用谁?能直接修改吗?如果不能可以怎么做到修改？
1.querySelectorAll()
2.不可以，只能通过遍历的方式一次给里面的元素做修改
6.根据CSS选择器来获取DOM元素(重点)
1.选择匹配的多个元素
2.语法:
document.querySelectorAll('css选择器')
3.参数:
包含一个或多个有效的CSS选择器 字符串
4.返回值:
CSS选择器匹配的NodeList 对象集合
5.例如:
document.querySelectorA1l('ul li')
6.document.querySelectorAll('css选择器')
1.得到的是一个伪数组:
1.有长度有索引号的数组
2.但是没有 pop() push()等数组方法
2.想要得到里面的每一个对象，则需要遍历(for)的方式获得
3.注意事项:
哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已
7.小结
1.获取页面中的标签我们最终常用那两种方式?
1.queryselectorAll()
2.queryselector()
2.他们两者的区别是什么?
1.querySelector()只能选择一个元素，可以直接操作
2.querySelectorAll()可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
3.他们两者小括号里面的参数有神马注意事项?
1.里面写css选择器
2.必须是字符串，也就是必须加引号
8. 其他获取DOM元素方法(了解)
1.根据id获取一个元素
document.getElementById('nav')
2.根据 标签获取一类元素 获取页面 所有div
document.getElementsByTagName('div')
3.根据类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')
3.操作元素内容
1.目标:能够修改元素的文本更换内容
2.DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象
3.就是操作对象使用的点语法
4.如果想要修改标签元素的里面的内容，则可以使用如下几种方式:学习路径:
1.对象.innerText 属性 //第5点
2.对象.innerHTML属性 //第6点
5.元素 innerText 属性
1.将文本内容添加/更新到任意标签位置
2.显示纯文本，不解析标签
3.举例说明
const info = document.querySelector('.info')
console.log(info.innerText) //获取标签内部的文字
info.innerText ='嗨喽,俺是刘德华~ //添加/修改标签内部文字内容
6.元素 innerHTML 属性
1.将文本内容添加/更新到任意标签位置
2.会解析标签，多标签建议使用模板字符
3.举例说明
const info = document.querySelector('.info')
console.log(info.innerHTML) // 获取标签内部的文字
info.innerHTML ='嗨喽,俺是<strong>刘德华</strong>~ //添加/修改标签内部文字内容
7.小结
1.设置/修改DOM元素内容有哪2种方式?
1.元素.innerText属性
2.元素.innerHTML属性
2.二者的区别是什么?
1.元素.innerText属性 只识别文本，不能解析标签
2.元素.innerHTML属性能识别文本，能够解析标签
3.如果还在纠结到底用谁，你可以选择innerHTML
4.操作元素属性
1.操作元素常用属性
1.还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
2.最常见的属性比如:href、title、src等
3.语法:对象.属性 = 值
4.举例说明：
onst pic = document.querySelector('img') //获取元素
pic.src='./images/b02.jpg //操作元素
pic.title ='刘德华黑马演唱会
2.操作元素样式属性
1.还可以通过 JS 设置/修改标签元素的样式属性
1.比如通过 轮播图小圆点自动更换颜色样式
2.点击按钮可以滚动图片，这是移动的图片的位置 left 等等
2.学习路径:
1.通过 style 属性操作CSS //第3点
2.操作类名(className)操作CSS //第4点
3.通过 classList 操作类控制CSS //第5点
3.通过 style 属性操作CSS
1.语法:对象.style.样式属性 = 值
2.举例说明:
const box = document.querySelector('.box')
box.style.width ='200px'
box.style.marginTop ='15px
box.style.backgroundcolor ='pink'
3.注意:
1.修改样式通过style属性引出
2.如果属性有 - 连接符，需要转换为小驼峰命名法
3.赋值的时候，需要的时候不要忘记加css单位
4.小结
1.设置/修改元素样式属性通过 style 属性引出来
2.如果需要修改一个div盒子的样式，比如 padding-left,如何写?>
1.element.style.paddingLeft='300px
2.小驼峰命名法
3.因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位
4.操作类名（className）操作CSS
1.如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
2.语法: 元素.className ='active' // active 是一个css类名 里面包含了各种想要修改的属性值 白话：就是在头部style标签内的 css 盒子
3.注意:1.由于class是关键字,所以使用className去代替
2.className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名。新类名和旧类名用空格隔开，如果不保留旧类名，会被新类名覆盖
4.小结
1.使用 className 有什么好处?
可以同时修改多个样式
2.使用 className 有什么注意事项?
直接使用 className 赋值会覆盖以前的类名
5.通过 classList 操作类控制CSS
1.为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
2.语法:
元素.classList.add('类名') //追加一个类
元素.classList.remove('类名') //删除一个类
元素.classList.toggle('类名') //切换一个类
3.小结
1.使用 style、className 和classList的区别?
1.后两者修改大量样式更方便，日常写法中更推荐classList
2.修改少量样式的时候style更方便，且生成的是行内样式，权重更高
3.classList 是追加和删除不影响以前类名
3.操作表单元素属性
1.表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
2.正常的有属性有取值的 跟其他的标签属性没有任何区别
1.获取:DOM对象.属性名
2.设置密码:DOM对象.属性名=新值
表单.value ='用户名' //获取表单框中的值（用户输入的值，innertHTML 得不到表单的内容,但button是特殊）
表单.type ='password' //把类别改成password，就看不见输入的内容了
3.表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如:disabled、checked、selected
input.checked = true //默认选中复选框
input.checked='true' // 会选中 不提倡 因为有隐式转换 才有上面的效果
console.log(button.disabled) //默认false 不禁用
button.disabled = true //禁用按钮
4.自定义属性
1.标准属性: 标签天生自带的属性 比如class id title等,可以直接使用点语法操作比如: disabled、checked、selected
2.自定义属性:
1.在html5中推出来了专门的data-自定义属性
2.在标签上一律以 data- 开头
3.在DOM对象上一律以dataset对象方式获取
例：
<div class="box" data-id="10">盒子</div> //自定义属性
<script>
const box = document.querySelector('.box')
console.log(box.dataset.id) //获取自定义属性，如果不加.id 就是获取全部自定义属性合集 加了 就是获取特定的自定义属性
5.定时器-间歇函数
目标:1.能够说出定时器函数在开发中的使用场景
2.能够使用定时器函数重复执行代码
1.网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如:网页中的倒计时。
2.要实现这种需求，需要定时器函数
3.定时器函数有两种，今天我先讲间歇函数
4.定时器函数可以开启和关闭定时器
1.开启定时器
setInterval(函数/函数名（不用带括号），间隔时间（ms单位）)
作用:每隔一段时间调用这个函数间隔时间单位是毫秒
举例说明
function repeat(){
console.1og('前端程序员，就是头发多咋滴~~')
}
setInterval(repeat,1000) //每间隔一秒调用repeat函数
注意:
1.函数名字不需要加括号
2.定时器返回的是一个id数字：console.log(repeat) //2(这个数字是随便取的，帮助理解)
2.关闭定时器
let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)
一般不会刚创建就停止，而是满足一定条件再停止
let timer = setInterval(function(){
console.log('hi~~')
}，1000)
clearInterval(timer)
5.小结
1.定时器函数有什么作用?
可以根据时间自动重复执行某些代码
2.定时器函数如何开启?
setInterval(函数名,时间)
3.定时器函数如何关闭?
let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)
18.事件监听
1.事件监听
目标:能够给 DOM元素添加事件监听
1.什么是事件?
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
2.什么是事件监听?
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
3.语法:
元素对象.addEventListener('事件类型'，要执行的函数)
4.事件监听三要素:
1.事件源: 那个dom元素被事件触发了，要获取dom元素
2.事件类型:用什么方式触发，比如鼠标单击click、鼠标经过 mouseover 等
3.事件调用的函数:要做什么事
举例说明
<button>按钮</button>
<script>
const btn = document.querySelector('.btn')
btn.addEventListener（'click',function(){alert('点击了~')
}）
</script>
注意:
1.事件类型要加引号
2.函数是点击之后再去执行，每次2点击都会执行一次
5.小结
1.什么是事件监听?
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
2.事件监听三要素是什么?
1.事件源(谁被触发了)
2.事件类型(用什么方式触发，点击还是鼠标经过等)
3.事件处理程序 (要做什么事情)
6.拓展-事件监听版本
1.DOM LO：事件源.on事件=function(){}
2.DOM L2：事件源.addEventListener(事件，事件处理函数)
3.区别:on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
4.发展史:1.DOM LO :是 DOM 的发展的第一个版本: L:level
2.DOML1:DOM级别1于1998年10月1日成为W3C推荐标准
3.DOM L2:使用addEventListener注册事件
4.DOM L3: DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
2.事件类型
1.鼠标事件：鼠标触发
1.click 鼠标点击
2.mouseenter 鼠标经过
3.mouseleave 鼠标离开
2.焦点事件：表单获得光标
1.获得焦点focus
2.失去焦点blur
3.键盘事件：键盘触发
1.Keydown 键盘按下触发
2.Keyup 键盘抬起触发
4.文本事件：表单输入触发
input 用户输入事件
3.事件对象
1.获取事件对象
目标:能说出什么是事件对象
1.事件对象是什么
1.也是个对象，这个对象里有事件触发时的相关信息
2.例如:鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
2.使用场景
1.可以判断用户按下哪个键，比如按下回车键可以发布新闻
2.可以判断鼠标点击了哪个元素，从而做相应的操作
3.语法:如何获取
1.在事件绑定的回调函数的第一个参数就是事件对象
2.一般命名为event、ev、e
例：元素.addEventListener('click',function(e){ }) //e是事件对象
4.小结
1.事件对象是什么?
也是个对象，这个对象里有事件触发时的相关信息
2.事件对象在哪里?
在事件绑定的回调函数的第一个参数就是事件对象
2.事件对象常用属性
目标:能够使用常见事件对象属性
1.部分常用属性
1.type
获取当前的事件类型
2.clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置
3.offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
4.key
1.用户按下的键盘键的值
2.现在不提倡使用keyCode
4.环境对象
1.目标:能够分析判断函数运行在不同环境中 this 所指代的对象
2.环境对象:指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
3.作用:弄清楚this的指向，可以让我们代码更简洁
1.函数的调用方式不同，this 指代的对象也不同
2.[谁调用， this 就是谁] 是判断 this 指向的粗略规则
3.直接调用函数，其实相当于是 window.函数，所以 this 指代 window
4.小结
1.环境对象this是什么?
它代表着当前函数运行时所处的环境
2.判断 this 指向的粗略规则是什么?
[谁调用， this 就是谁]
5.回调函数
目标:能够说出什么是回调函数
1.如果将函数 A 做为参数传递给函数 B 时，我们称函数 A为回调函数
2.简单理解: 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
3.常见的使用场景:
1. function fn(){
console.log('我是回调函数...')}
setInterval(fn，1000) //fn传递给了setInterval，fn就是回调函数
2. box.addEventListener('click',function(){
console.log('我也是回调函数')
})
4.小结
1.把函数当做另外一个函数的参数传递，这个函数就叫回调函数
2.回调函数本质还是函数，只不过把它当成参数使用
3.使用匿名函数做为回调函数比较常见
19.事件流
1.事件流
1. 事件流和两个阶段说明
目标:能够说出事件流经过的2个阶段
2.事件流指的是事件完整执行过程中的流动路径
1.捕获阶段：document -> html -> body -> div
2.冒泡阶段：div -> body -> html -> document
3.说明:1.假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
2.简单来说:捕获阶段是 从父到子 冒泡阶段是从子到父
3.实际工作都是使用事件冒泡为主
3.事件捕获
目标:简单了解事件捕获执行过程
1.事件捕获概念:
从DOM的根元素开始去执行对应的事件(从外到里)
2.事件捕获需要写对应代码才能看到效果
3.代码:DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制（这里填true，就会捕获）)
4.说明:1.addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用)
2.若传入false代表冒泡阶段触发，默认就是false
3.若是用 L0 事件监听，则只有冒泡阶段，没有捕获
4.事件冒泡
目标:能够说出事件冒泡的执行过程
1.事件冒泡概念:当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
2.简单理解:当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件(事件类型都一样，可以看19.1.3&4案例，都是点击事件)
3.事件冒泡是默认存在的
4.L2事件监听第三个参数是 false，或者默认都是冒泡
5.阻止冒泡
目标:能够写出阻止冒泡的代码
1.问题:因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
2.需求:若想把事件就限制在当前元素内，就需要阻止事件冒泡
3.前提:阻止事件冒泡需要拿到事件对象
4.语法:事件对象.stopPropagation()
5.注意:此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
6.阻止元素冒泡行为
我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转
1.语法:e.preventDefault()
2.小结：
1.阻止冒泡如何做?
事件对象.stopPropagation()
2.阻止元素默认行为如何做?
e.preventDefault()
7.解绑事件
1.addEventListener方式，必须使用:removeEventListener(事件类型,事件处理函数，[获取捕获或者冒泡阶段])
例如:function fn(){
alert('点击了')
} //绑定事件
btn.addEventListener('click',fn)
btn.removeEventListener('click',fn) //解绑事件
注意:匿名函数无法被解绑
2.拓展-鼠标经过事件的区别
1.mouseover和 mouseout 会有冒泡效果
2.mouseenter 和 mouseleave 没有冒泡效果(推荐)
3.两种注册事件的区别
1.传统on注册(L0)
1.同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
2.直接使用nul覆盖偶就可以实现事件的解绑
3.都是冒泡阶段执行的
2.事件监听注册(L2)
1.语法: addEventListener(事件类型,事件处理函数,是否使用捕获)
2.后面注册的事件不会覆盖前面注册的事件(同一个事件)
3.可以通过第三个参数去确定是在冒泡或者捕获阶段执行>
4.必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
5.匿名函数无法被解绑
2.事件委托
目标:能够说出事件委托的好处
1.事件委托是利用事件流的特征解决一些开发需求的知识技巧
1.优点:减少注册次数，可以提高程序性能
2.原理:事件委托其实是利用事件冒泡的特点
3.给 父元素注册事件 ，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
4.实现:事件对象.target.tagName 可以获得真正触发事件的元素
5.小结
1.事件委托的好处是什么?
减少注册次数，提高了程序性能
2.事件委托是委托给了谁?父元素还是子元素?
父元素
3.如何找到真正触发的元素?
事件对象.target.tagName
3.其他事件
目标：掌握新的事件，做更强交互
1.页面加载事件（可以实现页面加载事件速度优化）
1.加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
1..为什么要学?
1.有些时候需要等页面资源全部处理完了做一些事情
2.老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
2.事件名:load
3.监听页面所有资源加载完毕:
给 window 添加 load 事件
window.addEventListener('load',function(){
//执行的操作
})
4.注意:不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
2.当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
1.事件名:DOMContentLoaded
2.监听页面DOM加载完毕:
给document 添加 DOMContentLoaded 事件
document.addEventListener('DoMcontentLoaded',function(){
//执行的操作
})
3.小结
页面加载事件有哪两个?如何添加?
1.load 事件
监听整个页面资源给 window 加
2.DOMContentLoaded
1.给 document 加
2.无需等待样式表、图像等完全加载
2.元素滚动事件
1.滚动条在滚动的时候持续触发的事件
1.为什么要学?
很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
2.事件名:scroll
3.监听整个页面滚动:
window.addEventListener('scroll'function(){
// 执行的操作
})
给window 或 document 添加 scroll 事件
4.监听某个元素的内部滚动直接给某个元素加即可
2.页面滚动事件-获取位置
1.scrollLeft和scrollTop (属性)
1.获取被卷去的大小
2.获取元素内容往左、往上滚出去看不到的距离
3.这两个值是可读写的
2.尽量在scroll事件里面获取被卷去的距离
div.addEventListener('scroll',function(){
console.log(this.scrollTop)
})
3.开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
window.addEventListener('scroll',function(){
const n= document.documentElement.scrollTop //document.documentElement 是html元表获取方式
console.log(n)
})
注意事项:document.documentElement HTML文档返回对象为HTML元素
4.小结
1.被卷去的头部或者左侧用那个属性?是否可以读取和修改?
1.scrollTop /scrollLeft
2.可以读取，也可以修改(赋值)
2.检测页面滚动的头部距离(被卷去的头部)用那个属性?
document.documentElement.scrollTop
5.页面滚动事件-滚动到指定的坐标（了解）
1.scrollTo()方法可把内容滚动到指定的坐标
2.语法:元素.scrollTo(xy)
window.scrollTo(0，1000) //让页面滚动到y 轴1000像素的位置
3.页面尺寸事件(没太理解，112集前13分钟)
1.会在窗口尺寸改变的时候触发事件:
1.resize
window.addEventListener('resize,function(){
//执行的代码
})
2.检测屏幕宽度 :
window.addEventListener('resize',function(){
let w= document.documentElement.clientWidth
console.log(w)
})
2.页面尺寸事件-获取元素宽高
1.获取宽高:
1.获取元素的可见部分宽高(不包含边框，margin，滚动条等)
2.clientWidth和clientHeight
4.元素尺寸与位置
1.使用场景:
1.前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事
2.简单说，就是通过is的方式，得到元素在页面中的位置
3.这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了
2.元素尺寸于位置-尺寸
1.获取宽高:
1.获取元素的自身宽高、包含元素自身设置的宽高、padding、bordel
2.offsetWidth和offsetHeight
3.获取出来的是数值,方便计算
4.注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0
2.获取位置:
1.获取元素距离自己定位父级元素的左、上距离
2.offsetLeft和offsetTop 注意是只读属性
3.小结
1.offsetWidth和offsetHeight是得到元素什么的宽高?
内容+padding+ border
2.offsetTop和offsetLeft 得到位置以谁为准?
1.带有定位的父级
2.如果都没有则以 文档左上角 为准
5.补充
1.获取位置:
2.语法：element.getBoundingclientRect()
返回元素的大小及其相对于视口的位置
5.总结
属性 作用 说明
scrollLeft和scrollTop 被卷去的头部和左侧 配合页面滚动来用，可读写
clientWidth 和 clientHeight 获得元素宽度和高度 不包含border,margin，滚动条用于is获取元素大小，只读属性
offsetWidth和offsetHeight 获得元素宽度和高度 包含border、padding，滚动条等，只读
offsetLeft和offsetTop 获取元素距离自己定位父级元素的左、上距离 获取元素位置的时候使用，只读属性
20.
1.日期对象
目标:掌握日期对象，可以让网页显示日期
1.日期对象:用来表示时间的对象
2.作用:可以得到当前系统时间睿
3.学习路径:
1.实例化
2.日期对象方法
3.时间戳
1.实例化
目标:能够实例化日期对象
1.在代码中发现了 new 关键字时,一般将这个操作称为实例化
2.创建一个时间对象并获取时间
3.获得当前时间
const date = new Date()
4.获得指定时间
const date = new Date('2008-8-8')
2.时间对象方法
目标:能够使用日期对象中的方法写出常见日期
使用场景:因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
方法 作用 说明
getFullYear() 获得年份 获取四位年份
getMonth() 获得月份 取值为 0~11
getDate() 获取月份中的每一天 不同月份取值也不相同
getDay() 获取星期 取值为 0~6
getHours() 获取小时 取值为 0~23
getMinutes() 获取分钟 取值为0~59
getseconds() 获取秒 取值为0~59
//当对时间格式没有特殊要求时 可以下面这样写
const div = document.querySelector('div')
const date = new Date()
div.innerHTML = date.toLocaleString() //2024/2/14 15:12:00
div.innerHTML = date.toLocaleDateString() //2024/2/14
div.innerHTML = date.toLocaleTimeString() //15:12:00
// 我要根据日期 getDay() 0 ~ 6 返回的是星期几
// const arr =['星期天','星期一','星期二','星期三','星期四','星期五','星期六','星期天']
// console.log(arr[new Date().getDay()])
具体看20.2.页面显示时间案例
3.时间戳
1.目标:能够获得当前时间戳
2.使用场景: 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
3.什么是时间戳:是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
4.算法:1.将来的时间戳 -现在的时间戳 =剩余时间毫秒数
2.剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
3.比如 将来时间戳 2000ms-现在时间戳1000ms=1000ms
4.1000ms转换为就是 0小时0分1秒
5.转换公式
d=parseInt(总秒数/ 60/60 /24) // 计算天数
h=parseInt(总秒数/ 60/60 %24) //计算小时
m=parseInt(总秒数/60 %60) // 计算分数
s=parselnt(总秒数%60) //计算当前秒数
需要注意的是 时间戳得到是毫秒 需要 /1000 来得到秒数
6.三种方式获取时间戳:
1.使用 getTime()方法
const date = new Date()
console.log(date.getTime())
2.简写 +new Date()
无需实例化
console.log(+new Date())
3.使用 Date.now()
无需实例化
但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
console.log(Date.now())
更推荐方法2
7.总结
1.实例化日期对象怎么写?
new Date()
2.日期对象方法里面月份和星期有什么注意的?
月份是0~11,星期是 0~6
3.获取时间戳有哪三种方式?重点记住那个?
1.date.getTime()
2.+new Date()
3.Date.now()
4.重点记住 +new Date()因为可以返回当前时间戳或者指定的时间戳
2.节点操作
1.DOM节点
目标:能说出DOM节点的类型
1.DOM节点：DOM树里每一个内容都称之为节点
2.节点类型
1.元素节点
所有的标签 比如 body、 div
html 是根节点
2.属性节点
所有的属性 比如 href
3.文本节点
所有的文本
4.其他
3.总结
1.什么是DOM 节点?
DOM树里每一个内容都称之为节点
2.DOM节点的分类?
1.元素节点 比如 div标签
2.属性节点 比如 class属性
3.文本节点 比如标签里面的文字
3.我们重点记住那个节点?
元素节点，可以更好的让我们理清标签元素之间的关系
2.查找节点
目标:能够具备根据节点关系查找目标节点的能力
1.关闭二维码案例:
点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子
2.思考: 关闭按钮 和 erweima 是什么关系呢?
1.父子关系
2.所以，我们完全可以这样做:
3.点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了
3.节点关系:针对的找亲戚返回的都是对象
1.父节点
2.子节点
3.兄弟节点
4.父节点查找:
1.parentNode 属性
2.返回最近一级的父节点 找不到返回为null
3.语法：子元素.parentNode
5.子节点查找:
1.childNodes
获得所有子节点、包括文本节点(空格、换行)、注释节点等
2.children 属性 (重点)
1.仅获得所有元素节点
2.返回的还是一个伪数组
3.语法：父元素.children
6.兄弟关系查找:
1.下一个兄弟节点
nextElementSibling 属性
2.上一个兄弟节点
previousElementsibling 属性
7.总结
1.查找父节点用那个属性?
parentNode
2.查找所有子节点用那个属性?
children
3.查找兄弟节点用那个属性?
nextElementSibling
previousElementSibling
3.增加节点
目标:能够具备根据需求新增节点的能力
1.很多情况下，我们需要在页面中增加元素
比如，点击发布按钮，可以新增一条信息
2.一般情况下，我们新增节点，按照如下操作:
1.创建一个新的节点
2.把创建的新的节点放入到指定的元素内部
3.学习路线:
1.创建节点
2.追加节点
4.创建节点
1.即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
2.创建元素节点方法:
document.createElement('标签名') //创造一个新的元素节点
5.追加节点
1.要想在界面看到，还得插入到某个父元素中
2.插入到父元素的最后一个子元素
父元素.appendchild(要插入的元素) //插入到这个父元素的最后
3.插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面) //插入到某个子元素的前面
6.补充
1.特殊情况下，我们新增节点，按照如下操作:
1.复制一个原有的节点
2.把复制的节点放入到指定的元素内部
2.克隆节点
元素.cloneNode(布尔值) //克隆一个已有的元素节点
3.cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
1.若为true，则代表克隆时会包含后代节点一起克隆
2.若为false，则代表克隆时不包含后代节点
3.默认为false
4.删除节点
目标:能够具备根据需求删除节点的能力
1.若一个节点在页面中已不需要时，可以删除它
2.在 javaScript 原生DOM操作中，要删除元素必须通过父元素删除
3.语法：父元素.removeChild(要删除的元素)
4.注:1.如不存在父子关系则删除不成功
2.删除节点和隐藏节点(display:none)有区别的: 隐藏节点还是存在的，但是删除，则从html中删除节点
3.M端事件
1.目标:了解M端常见的事件
移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件)，Android 和 IOS 都有
2.触屏事件 touch(也称触摸事件)，Android 和IOS 都有
3.touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
4.常见的触屏事件如下:
触屏touch事件 说明
touchstart 手指触摸到一个 DOM 元素时触发
touchmove 手指在一个 DOM 元素上滑动时触发
touchend 手指从一个 DOM 元素上移开时触发
4.JS插件（看123集）
1.插件:就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
2.学习插件的基本过程
1.熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/
2.看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
3.查看基本使用流程 https://www.swiper.com.cn/usage/index.html
4.查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html
5.注意:多个swiper同时使用的时候,类名需要注意区分
3.下载之后 css和js文件都在 本地文件里面的 packag文件夹里面
21.
1.window对象
目标：学习window对象的常见属性，知道各个BOM对象的功能含义
1.BOM（浏览器对象模型）
BOM(Browser Object Model)是浏览器对象模型
1.window对象是一个全局对象，也可以说是JavaScript中的顶级对象
2.像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
3.所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
4.window对象下的属性和方法调用的时候可以省略window
2.定时器-延时函数
JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
1.语法:
setTimeout(回调函数，等待的毫秒数)
setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行,平时省略window
2.清除延时函数:
let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)
3.注意点
1.延时器需要等待,所以后面的代码先执行
2.每一次调用延时器都会产生心个新的延时器
4.两种定时器对比:执行的次数
1.延时函数:执行一次
2.间歇函数:每隔一段时间就执行一次,除非手动清除
3.JS执行机制
1.JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
这是因为 lavascript 这门脚本语言诞生的使命所致--lavaScript 是为处理页面中用户的交互，以及操作DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是: 如果 IS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
2.为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步
3.同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭，等水开了(10分钟之后)，再去切菜，炒菜
4.异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
5.他们的本质区别: 这条流水线上各个流程的执行顺序不同。
6.同步任务
同步任务都在主线程上执行，形成一个执行栈
7.异步任务
1.JS 的异步是通过回调函数实现的
2.一般而言，异步任务有以下三种类型:
1、普通事件，如 click、resize 等
2、资源加载，如 load、error等
3、定时器，包括 setInterval、setTimeout等
3.异步任务相关添加到任务队列中(任务队列也称为消息队列)
8.J5 执行机制
1.先执行执行栈中的同步任务
2.异步任务放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
4.location对象
1.location 的数据类型是对象，它拆分并保存了URL地址的各个组成部分
2.常用属性和方法:
1.href属性获取完整的 URL地址，对其赋值时用于地址的跳转
例如：
console.log(location.href) //可以得到当前文件URL地址
location.href = 'http://www.baidu.com' //可以通过js方式跳转到目
2.hash属性获取地址中的哈希值，符号#后面部分
console.log(location.hash)
后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如 网易云音乐
3.reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
例如：
<button>点击刷新</button>
<script>
let btn = document.queryselector('button')
btn.addEventListener('click'，function(){
location.reload(true) //强制刷新 类似 ctrl + f5
})
</script>
3.总结
1.location.href 属性获取完整的 URL地址，对其赋值时用于地址的跳转
2.search 属性获取地址中携带的参数，符号?后面部分
3.hash属性获取地址中的啥希值，符号#后面部分
4.reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
5.navigator对象
1.navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
2.常用属性和方法:
通过 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.history对象
1.history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
2.常用属性和方法:
history对象方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能 参数如果是1 前进1个页面 如果是-1 后退1个页面
例如：
<body>
<button>后退</button>
<button>前进</button>
<script>
const back = document.querySelector('button:first-child')
const forward = back.nextElementSibling
back.addEventListener('click',function(){
history.back() //后退一步
history.go(-1) //后退一步 前者后者是一样的
})
forward.addEventListener('click',function(){
history.forward() //前进一步
history.go(1) //前进一步 前者后者是一样的
})
</script>
</body>
3.使用场景：history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。
2.本地存储
目标：学习window对象的常见属性，知道各个BOM 对象的功能含义
1.本地存储介绍
1.以前我们页面写的数据一刷新页面就没有了，是不是?
2.随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案
3.数据存储在用户浏览器中
4.设置、读取方便、甚至页面刷新不丢失数据
5.容量较大，sessionStorage和localStorage约 5M 左右
6.常见的使用场景:https://todomvc.com/examples/vanila-es6/ 页面刷新数据不丢失
2.本地存储分类 //本地存储只能存储字符串数据类型
1.本地存储分类-localstorage
1.目标:能够使用localStorage 把数据存储的浏览器中
2.作用:可以将数据永久存储在本地(用户的电脑),除非手动删除，否则关闭页面也会存在
3.特性:1.可以多窗口(页面)共享(同一浏览器可以共享)
2.以键值对的形式存储使用
4.语法:
1.存储数据:
localStorage.setltem('key', 'value')
2.获取数据:
localStorage.getltem('key')
3.删除数据:
localStorage.removeltem('key')
5.浏览器查看本地数据:F12 -> Application（控制台顶部） -> Local Storage(左侧)
2.本地存储分类-sessionStorage
特性:1.生命周期为关闭浏览器窗口
2.在同一个窗口(页面)下数据可以共享
3.以键值对的形式存储使用
4.用法跟localstorage 基本相同
3.总结
1.localstorage 作用是什么?
可以将数据永久存储在本地(用户的电脑)，除非手动删除，否则关闭页面也会存在
2.localStorage 存储，获取，删除的语法是什么?
存储:localStorage.setltem('key','value')
获取:localStorage.getltem('key')
删除:localStorage.removeltem('key')
3.存储复杂数据类型
目标: 能够存储复杂数据类型以及取出数据
1.问题一：本地只能存储字符串,无法存储复杂数据类型
2.解决:需要将复杂数据类型转换成ISON字符串,在存储到本地
语法:JSON.stringify(复杂数据类型)
const goods = {
name: '小米10',
price: 1999
}
localStorage.setItem('goods',JSON.stringify(goods))
3.问题二:因为本地存储里面取出来的是字符串，不是对象，无法直接使用
const obj= localStorage.getItem('goods')
console.log(obj) //字符串
4.解决:把取出来的字符串转换为对象
语法:JSON.parse(JSON字符串)
const obj=JSON.parse(localstorage.getItem('goods'))
console.log(obj) //对象
将JSON字符串转换成对象取出时候使用
22.正则表达式
目标：学习正则表达式概念及语法，编写简单的正则表达式实现字符的查找或检测
1.介绍
1.正则表达式是用于匹配字符串中字符组合的模式。在Javascript中，正则表达式也是对象
2.通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式
3.例如：请在图中找出【戴帽子和眼镜的男人】
戴帽子、戴眼镜、男人都是描述信息，通过这些信息能够在人群中查找到确定的某个人，那么这些用于查找的描述信息编写一个模式，对应到计算机中就是所谓的正则表达式。
4.正则表达式在 JavaScript中的使用场景:
1.例如验证表单:用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)
比如用户名: /^[a-z0-9_-]{3,16}$/
2.过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
5.总结
1.正则表达式是什么?
是用于匹配字符串中字符组合的模式
2.正则表达式有什么作用?
1.表单验证(匹配)
2.过滤敏感词(替换)
3.字符串中提取我们想要的部分(提取)
2.语法
1.我们想要查找是否有戴眼镜的人，怎么做呢?
1.定义规则: 戴眼镜的1.
2.根据规则去查找:找到则返回2.
2.正则同样道理，我们分为两步:
1.定义规则
2.查找
3.比如:查找下面文本中是否包含字符串'前端'
let str ='IT培训,前端开发培训,web前端,软件测试培训,产品经理培训'
4.JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法:
1.定义正则表达式语法:
const 变量名 = /表达式/
其中//是正则表达式字面量
比如: const reg = /前端/
2.判断是否有符合规则的字符串:
test() 方法 用来查看正则表达式与指定的字符串是否匹配
1.语法:regObj.test(被检测的字符串)
2.比如:
//要检测的字符串
const str ='IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训'
//1.定义正则表达式，检测规则
const reg = /前端/
//2.检测方法
console.log(reg.test(str)) // true
如果正则表达式与指定的字符串匹配，返回true，否则false
3.总结
正则表达式使用分为几步?
1.定义正则表达式
2.检测查找是否匹配
4.检索(查找)符合规则的字符串:
exec()方法 在一个指定字符串中执行一个搜索匹配
1.语法:
regObj.exec(被检测字符串)
2.比如:
//要检测的字符串
const str ='IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训'
//1.定义正则表达式，检测规则
const reg =/前端/
//2.检测方法
console.log(reg.exec(str)) //返回的是数组
如果匹配成功，exec()方法返回一个数组，否则返回null
5.总结
正则表达式检测查找 test方法和exec方法有什么区别?
1.test方法 用于判断是否有符合规则的字符串，返回的是布尔值 找到返回true，否则false
2.exec方法用于检索(查找)符合规则的字符串，找到返回数组，否则为 null
3.元字符
目标:能说出什么是元字符以及它的好处
1.普通字符
1.大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
2.也就是说普通字符只能够匹配字符串中与它们相同的字符。
2.元字符(特殊字符)
1.是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
1.比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..
2.但是换成元字符写法:[a-z]
2.参考文档:
MDN: https://developer.mozilla.org/zh-CN/docs/Web/javaScript/Guide/Regular_Expressions
正则测试工具: http://tool.oschina.net/regex
3.小结
什么是元字符以及它的好处是什么?
1.是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能
2.比如英文26个英文字母，我们使用元字符[a-z]简介和灵活
3.为了方便记忆和学习，我们对众多的元字符进行了分类:
1.边界符(表示位置，开头和结尾，必须用什么开头，用什么结尾)
2.量词 (表示重复次数)
3.字符类 (比如 \d 表示 0~9)
1.边界符
1.正则表达式中的边界符(位置符)用来提示字符所处的位置，主要有两个字符
边界符 说明
^ 表示匹配行首的文本(以谁开始)
$ 表示匹配行尾的文本(以谁结束)
如果^和$在一起，表示必须是精确匹配
2.例如：
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
2.量词
1.量词用来 设定某个模式出现的次数
量词 说明
* 重复零次或更多次 >=0
+ 重复一次或更多次 >=1
? 重复零次或一次 0 || 1
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
2.小结
1.+ 表示重复至少1次
2.表示重复0次或1次
3.表示重复 0次或多次
4.{m,n} 表示复 m 到n次
3.字符类
1.[]匹配字符集合
1.只要中括号里面的任意字符出现都返回为true
2.例如：后面的字符串只要包含 abc 中任意一个字符，都返回 true
console.log(/[abc]/.test('a')) // true
console.log(/[abc]/.test('baby')) // true
console.log(/[abc]/.test('cry')) // true
console.log(/[abc]/.test('die')) // false
2.[]里面加上-连字符
1.使用连字符 - 表示一个范围
console.log(/^[a-z]$/.test('c')) // true
2.比如:
[a-z]表示a到z26个英文字母都可以
[a-zA-Z]表示大小写都可以
[0-9] 表示 0~9 的数字都可以
3.[]里面加上^取反符号
比如:
[^a-z]匹配除了小写字母以外的字符
注意要写到中括号里面
4. . 匹配除换行符之外的任何单个字符
5.总结
1.字符类.(点)代表什么意思?
匹配除换行符之外的任何单个字符
2.字符类 [] 有若干代表什么意思?
1.[abc] 匹配abc其中的任何单个字符
2.[a-z]匹配26个小写英文字母其中的任何单个字符
3.[^a-z]匹配除了26个小写英文字母之外的其他任何单个字符
6.预定义:指的是 某些常见模式的简写方式。
预定类 说明
\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]
4.修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
1.语法: /表达式/修饰符
1.i是单词 ignore 的缩写，正则匹配时字母不区分大小写
2.g 是单词 global的缩写，匹配所有满足正则表达式的结果
2.例如：
console.log(/a/i.test('a')) // true
console.log(/a/i.test('A')) // true
3.替换 replace 替换
语法: 字符串.replace(/正则表达式/，'替换的文本')
