变量声明
const声明的值不能更改，而且const声明变量的时候需要里面举行初始化，但对于引用数据类型，const声明的变量，里面存的自己值，是地址
DOM
DOM（document object model——文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API,是浏览器提供的一套专门用来操作网页内容的功能，用来开发网页内容和实现用户交互
DOM树
将HTML文档以树状结构直观的体现出来，我们称之为文档树或DOM树，文档树直观的体现了标签与标签之间的关系
DOM对象
浏览器根据html标签天生的JS对象，所有的标签属性都可以在这个对象上找到，修改这个对象的属性会自动映射到标签身上
DOM的核心思绪：把网页内容当做对象来处理
document对象是DOM里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页的例如：document.write(),网页所有内容都在document里面
获取DOM元素
1.根据css选择器来获取DOM元素（重点）
选择匹配的第一个元素
获取一个DOM元素可以直接操作修改
语法：document.querySelector('css选择器')
参数：包罗一个或多个有用的css选择器字符串
返回值：css选择器匹配的第一个元素，一个HTMLElement对象
选择匹配的多个元素
获取多个DOM元素不能直接修改，只能通过遍历的方式依次给里面的元素做修稿
语法：document.querySelectorAll('css选择器')
参数：包罗一个或多个有用的css选择器字符串
返回值：css选择器匹配的NodeList对象聚集
document.querySelectorAll('css选择器')
得到的是一个伪数组：
有长度有索引号的数组，但是没有pop() push()等数组方法，想要得到里面的每一个对象，则需要遍历（for）的方式获得
操作元素内容
1. 对象.innerText属性
修改之后的控制台
将文本内容添加/更新到任意标签位置，显示纯文本，不分析标签
2. 对象.innerHTML属性
将文本内容添加/更新到任意标签位置，会分析标签，多标签发起使用模板字符
修改元素常见的属性
随机天生图片案例（每革新一次显示一张不同的图片）：
1.通过style属性操作css
语法：
对象.style.样式属性=值
注意：
修改样式通过style属性引出，如果属性有-连接符（如：background-color）,需要转换为小驼峰定名法，赋值的时候，需要时不要忘记加css单位
2.操作类名（className）操作css
如果修改的样式比力多，直接通过style属性修改比力繁琐，我们可以通过借助于css类名的形式
语法：
元素.className='active' //active是一个css类名
注意：由于class是关键字，所以使用className去代替，className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
直接在style里面修改多个样式比用style修改更简便，直接使用className赋值会覆盖以前的类名
3.通过classList操作类控制css
为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
操作表单属性
表单许多环境下也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框，正常的有属性的取值跟其他的标签属性没有任何区别
获取：DOM对象.属性名
设置：DOM对象.属性名=新值
表单属性中添加就有用果，移除就没有用果，一律使用布尔值表示如果是true代表添加了该属性如果是false代表移除了该属性 比如：disabled,checked
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取（set聚集的意思）
定时器—间歇函数
要实现每隔一段时间自动实行一段代码，不需要我们手动去触发 例如：网页中的倒计时 要实现这种需求，需要定时器函数
定时器函数可以开启和关闭定时器
1.开启定时器
setInterval(函数，间隔时间)
作用：每隔一段时间调用这个函数，间隔时间单位是毫秒
这里用的是匿名函数
当调用非匿名函数时逗号前只写函数名不要加括号
定时器返回的是一个id数字
关闭定时器
语法：
这里不能用const而用let关闭定时器后再次开启相称于重新赋值即n=setInterval(fn,1000),用const会报错
button比力特殊虽然是表单标签但不消value而用innerHTML来获取，它是一个双标签
事件监听
语法：
元素对象.addEventListener('事件类型'，要实行的函数)
事件监听的三要素：
事件源：那个dom元素被触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击click，鼠标经过mouseover等
事件调用的函数：要做什么事
核心事件
focus 获得核心
blur 失去核心
键盘事件
用户输入文本事件
获取事件对象
事件对象也是个对象，这个对象里有事件触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景：可以判断用户按下了哪个键，比如按下回车键可以发布消息，可以判断鼠标点击了那个元素，从而做相应的操作
语法：如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般定名为event,ev,e
元素.addEventListener('click',function(e){ })
事件对象的常见属性：
type:获取当前的事件类型
clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
key:用户按下的键盘键的值，如今不提倡使用keycode
trim:
环境对象
指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们的代码更简便。函数的调用方式不同，this指代的对象也不同 ‘谁调用，this就是谁’ 是判断this指向的大抵规则
回调函数
如果将函数A作为参数通报给函数B，我们称函数A为回调函数，简朴来说就是当一个函数当做参数来通报给另外一个函数的时候，这个函数就是回调函数
tab栏切换案例
事件流
事件流指的是事件完整实行过程中的活动路径
假设页面里有一个div，当触发事件时，会经历两个阶段，分别是捕获阶段，冒泡阶段。简朴来说：捕获阶段是从父到子 冒泡阶段是从子到父，现实工作都是使用事件冒泡为主
事件捕获：
从DOM的根元素开始去实行对应的事件（从外到里），事件捕获需要写对应代码才能看到效果
代码：
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
说明：
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
如果用L0事件监听，则只有冒泡阶段，没有捕获
事件冒泡
当一个元素的事件被触发时，同样的事件将会在该元素的所有先人元素中依次触发。这一过程被称为事件冒泡。简朴明白：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件（这里的同名指的是同一种类型，比如说都是点击‘click’）
事件冒泡是默认存在的
L2事件监听第三个参数是false,或者默认都是冒泡
阻止冒泡
由于默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，若想把事件就限制在当前元素内，就要阻止冒泡但前提是要拿到事件对象
语法：
事件对象.stopPropagation( )
此方法可以阻止事件活动传播，不光在冒泡阶段有用，捕获阶段也有用
解绑事件
on事件方法，直接使用null覆盖就可以实现事件的解绑
addEventListener方式，必须使用：
removeEventListener（事件类型，事件处理函数，[获取捕获或者冒泡阶段]）
注意：匿名函数无法被解绑
鼠标经过事件：
mouseover和mouseout会有冒泡效果（当鼠标经过子盒子时也会打印鼠标经过由于mouseover和mouseout有冒泡效果）
mouseenter和mouseleave没有冒泡效果（推荐）
两种注册事件的区别：
传统on注册（L0）
同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
直接使用null覆盖就可以实现事件的解绑
都是冒泡阶段实行的
事件监听注册（L2）
语法：addevent Listener（事件类型，事件处理函数，是否使用捕获）
后面注册的事件不会覆盖前面注册的事件（同一个事件）
可以通过第三个参数去确定是在冒泡或者捕获阶段实行
必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)
匿名函数无法被解绑
事件委托
事件委托是使用事件流的特征解决一些开发需求的只是技巧
优点：减少注册次数，可以提高程序性能
原理：使用事件冒泡的特点
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
事件委托给父元素，使用事件对象.target.tagName来找到真正触发的元素
阻止元素默认举动
其他事件
1.页面加载事件
加载外部资源（如图片，外联css和javascript等）加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事变，老代码喜好把script写在head中，这时候直接找dom元素找不到
事件名：load
监听页面所有资源加载完毕：
给window添加load事件
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
当初始的HTML文档被完全加载和分析完成之后，DOMContentLoaded事件被触发，而无需等待样式表，图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完成：
给document添加DOMContentLoaded事件
load事件监听整个页面资源给window加
DOMContentLoaded给document加，无需等待样式表、图像等完全加载
2.页面滚动事件
滚动条在滚动的时候触发的事件，许多网页需要检测用户把页面滚动到某个地区后做一些处理，比如固定导航栏·，比如返回顶部
事件名：scroll
监听整个页面滚动
给window或document添加scroll事件，监听某个元素的内部直接给某过热元素即可
页面滚动事件-获取位置
scrollLeft和scollTop(属性)
获取被卷去的巨细，获取元素内容网左、往上滚出去看不到的间隔，这两个值是可读写的
页面滚动事件-滚动到指定的坐标
scrollTo()方法可以把内容滚动到指定的坐标
语法：
元素.scollTo(x,y)
页面尺寸事件
会在窗口尺寸改变的时候触发事件：resize
检测屏幕宽度
获取宽高
获取元素的可见部分宽高（不包罗边框，margin,滚动条等）
clientWidth和clientHeight
offsetWidth和offsetHeight
获取元素的自身宽高、包罗元素滋生设置的宽高、padding、border（即内容+padding+border），获取出来的是数值，方便盘算 ,得到的位置以带有定位的父级为准 如果都没有则以文档左上角为准
注意：获取的是可视宽高，如果盒子是隐蔽的，获取的效果是0
获取位置：
获取元素间隔自己定位父级元素的左，上间隔
offsetLeft和offerTop注意是只读属性
element.getBoundingClientRect(),方法返回元素的巨细及其相对于视口的位置
日期对象：
实例化
目的：可以或许实例化日期对象
在代码中发现了new关键字时，一般将这个操作称为实例化，创建一个时间对象并获取时间
获得当前时间
const data = new Date()
获得指定时间
日期对象方法
目的：可以或许使用日期对象中的方法写出常见日期
使用场景：由于日期对象返回的数据我们不能直接使用，所以需要转换为现实开发中的常用格式
| 方法 | 作用 | 说明 | | getFullYear() | 获得年份 | 获取四位年份 | | getMonth() | 获得月份 | 取值为0~11 | | getDate() | 获取月份中的每一天 | 不同月份取值也不相同 | | getDay() | 获取星期 | 取值为0~6 | | getHours() | 获取小时 | 取值为0~23 | | getMinutes() | 获取分钟 | 取值为0~59 | | getSeconds() | 获取秒 | 取值为0~59 |
时间戳
目的：可以或许获得当前时间戳
使用场景：如果盘算倒计时效果，前面方法无法直接盘算，需要借助于时间戳完成
时间戳是指1970年01月01日00时00分00秒起至如今的毫秒数，它是一种特殊的计量时间的方式
算法：
未来的时间戳 - 如今的时间戳 = 剩余时间的毫秒数
剩余时间的毫秒数转换为剩余时间的 年 月 日 时 分 秒就是倒计时时间
三种方法获取时间戳：
1.使用getTime()方法
2.简写+new Date()
无需实例化
3.使用Date.now()
无需实例化
但是只能得到当前的时间戳，前面两种可以返回指定时间的时间戳
节点操作
DOM节点
DOM树里每一个内容都称之为节点
节点类型
元素节点
所有的标签比如body,div
html是根节点
属性节点
所有的属性比如href，class
文本节点
所有的文本
查找节点
父节点查找：
parentNode属性，返回最近一级的父节点找不到返回null
查找节点
子节点查找：childNodes,获得所有子节点包罗文本节点（空格，换行），解释节点
children属性（重点）
仅获得所有元素节点
返回的还是一个伪数组
查找兄弟节点
增加节点
创建一个新的节点，把创建的新的节点放入到指定的元素内部
创建节点即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后再插入节点
追加节点
要想在界面看到，还得插入到某个父元素中
1.插入到父元素的最后一个子元素：
2.插入到父元素中某个子元素的前面：
特殊环境下我们新增节点按照一下操作：
复制一个原有的节点，把复制的节点放入到指定的元素内部
克隆节点
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true则代表克隆时会包罗子女节点一起克隆；若为false，则代表克隆时不包罗子女节点。默认为false(只克隆标签)
删除节点：
在js原生DOM操作中，要删除元素必须通过父元素删除
语法：
注意：如不存在父子关系则删除不成功，删除节点和隐蔽节点（display:none）是有区别的;隐蔽节点还是存在的，但是删除即从html中删除节点
M端事件
移动端也有自己独特的地方，比如触屏事件touch(也称触摸事件)，touch对象代表一个触摸点。触摸点可能是一根手指，也可以是一根触摸笔。触屏事件可相应用户手指（或触控笔）对屏幕或者触控板操作
常见的触屏事件如下：
| 触屏touch事件 | 说明 | | touchmove | 手指触摸到一个DOM元素时触发 | | touchmove | 手指在一个DOM元素上滑动时触发 | | touchend | 手指从一个DOM元素上移开时触发 |
window对象
1.1 BOM
BOM是浏览器对象模型，window对象是一个全局对象，也可以说是js中的顶级对象，所有通过var定义在全局作用域中的变量(let 和 const作用域是块级)、函数都会酿成window的属性和方法，window对象下的属性和方法调用的时候可以省略window
定时器-延时函数
语法：
js内置的一个用来让代码延迟实行的函数，叫setTimeout，setTimeout仅仅只实行一次，所以可明白为把一段代码延迟实行，平时省略window
扫除延时函数：
延时器需要等待，所以后面的代码先实行，每一次调用延时器都会产生一个新的延时器
五秒自动关闭的广告：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- img {
- position: fixed;
- left: 0;
- bottom: 0;
- }
- </style>
- </head>
- <body>
- <img src="./images/ad.png" alt="">
- <script>
- //1.获取元素
- const img = document.querySelector('img')
- setTimeout(function () {
- img.style.display = 'none'
- }, 3000)
- </script>
- </body>
- </html>
先实行实行栈中的同步任务，异步任务放入任务队列中去
一旦实行栈中的所有同步任务实行完毕，体系就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入实行栈，开始实行
js语言的一大特点就是单线程，也就是说，同一个时间只能做一件事
同步：前一个任务结束后再实行后一个任务，程序的实行顺序与任务的排列顺序是同等的、同步的。比如说做饭的同步：我们要烧水煮饭，等水开了（非常钟后）再去洗菜切菜
异步：在做一件事的时候，我们可以去处理其他事变
它们的本质区别是：这条流水线上各个流程的实行顺序不同
同步任务都在主线程上实行，形成一个实行栈；异步任务，异步是通过回调函数实现的
异步任务：
一般而言，异步任务有一下三种类型：
1.普通事件，如click,resize等
2.资源加载，如load,error等
3.定时器，包罗setInterval,setTimeout等
异步任务相关添加到任务队列中（任务队列也称为消息队列）
由于主线程不断的重复获得任务、实行任务、在获取任务、在实行任务，所以这种机制被称为事件循环（event loop）
location对象
location的数据类型是对象，它拆分并保存了URL地址的各个注册部分
常见的属性和方法：
search属性获取地址中携带的参数，符号？后面部分
hash属性获取地址中的哈希值，符号#后面部分
console.log(location.hash)
reload方法用来革新当前界面，传入参数true时表示逼迫革新
navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
常用的属性和方法：
通过userAgent检测浏览器的版本及平台
history对象
history的数据类型是对象，主要管理汗青记录，该对象与浏览器地址栏的操作相对应，如前进、后退、汗青记录等
常用属性和方法：
当地存储分类-localStorage
可以将数据永世存储在当地（用户的电脑），除非手动删除，否则关闭页面也会存在
特性：可以多窗口(页面)共享（同一浏览器可以共享），以键值对的形式存储使用
存储数据：localStorage.setltem(key,value)
获取数据：localStorage.getltem(key)
当地存储分类-sessionStorage
特性：
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
用法和localStorage根本相同
存储复杂数据类型
解决：需要将复杂数据类型转换成JSON字符串，再存储到当地
语法：JSON.stringify(复杂数据类型)
数组中的map方法 迭代数组
使用场景：map可以遍历数组处理数据，并且返回新的数组
map也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系
map重点在于有返回值，forEach没有返回值
join()方法用于把数组中的所有元素转换成一个字符串
数组元素是通过参数里面指定的分隔符举行分隔的，空字符串（‘’），则所有元素之间都没有任何字符
正则表达式
正则表达式是用于匹配字符串中字符组合的模式。在js中 正则表达式也是对象 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式
1.定义规则
定义正则表达式语法
const 变量名= /表达式/ （其中/ /是正则表达式字面量）
2.查找
判断是否有符合规则的正则表达式
test()方法 用来检察正则表达式与指定的字符串是否匹配
语法：
reObj.test(被检测的字符串)
如果正则表达式与指定的字符串匹配，返回true,否则false
exec()方法用于检索（查找）符合规则的字符串
exec()方法 在一个指定字符串中实行一个搜刮匹配
语法：
regObj.exec(被检测字符串)
如果匹配成功，exec()方法返回一个数组，否则返回null
元字符
元字符（特殊字符）：是一些具有特殊寄义的字符，可以极大提高灵活性和强大的匹配功能。比如，规定用户只能输入英文26个字母，用普通字符abcdefghijk……，但是换成元字符写法：[a-z]
为了方便记忆和学习，我们对众多的元字符举行了分类：
1.界限符
表示位置，开头和结尾，必须用什么开头，用什么结尾
正则表达式中的界限符（位置符）用来提示字符所处的位置，主要有两个字符
| 界限符 | 说明 | | ^ | 表示匹配行首的文本（以谁开始） | | $ | 表示匹配行尾的文本（以谁结束） |
如果^和$在一起，表示必须是准确匹配
2.量词
表示重复次数
量词用来设定某个模式出现的次数
量词{n,m} 逗号左右两侧千万不能有空格
| 量词 | 说明 | | * | 重复零次或更多次 | | + | 重复一次或更多次 | | ？ | 重复零次或一次 | | {n} | 重复n次 | | {n,} | 重复n次或更多次 | | {n,m} | 重复n到m次 |
3.字符类
比如 \d 表示0~9
[ ]匹配字符集聚集
后面的字符串只要包罗abc中任意一个字符，都返回true
[ ]里面加上-连字符
使用连字符-表示一个范围
比如：[a-z]表示a到z26个英笔墨母都可以；[a-zA-Z]表示巨细写都可以；[0-9]表示0~9的数字都可以
eg:腾讯QQ号: ^[1-9][0-9]{4,}$ (腾讯QQ号从10000开始)
[ ]里面加上^取反符号，比如[^a-z]匹配除了小写字母以外的字符，注意要写到中括号里面
.匹配除换行符之外等待任何单个字符
预定义
预定义指的是某些常见模式的简写方式
日期格式：^\d{4}-\d{1,2}-\d{1,2}
| 预定类 | 说明 | | \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] |
修饰符
修饰符约束正则实行的某些细节举动，如是否区分巨细写，是否支持多行匹配等
语法：/表达式/修饰符
i是单词ignore的缩写，正则匹配时字母不区分巨细写（只能替换一个，替换多个时要用全局）
g是单词global的缩写，匹配所有满足正则表达式的效果
替换replace
语法：字符串.replace(/正则表达式/ , '替换的文本' )
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
