变量声明
const 优先，尽量使用 const
优点：语义化更好
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oWj9xsEO-1662117420191)(assets/1659334591377.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1fzjGKjl-1662117420192)(assets/1659334662391.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uUQFg03C-1662117420192)(assets/1659334730418.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Xqld1D2-1662117420192)(assets/1659335957756.png)]
提议：
以后数组以及对象，用const 声明
Web API 基本认知
作用： 就是使用JS去操作html和浏览器
分类： DOM （文档对象模型）、 BOM（浏览器对象模型）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCg9whWL-1662117420192)(assets/1659336607056.png)]
DOM
Document Object Model —— 文档对象模型
是用来呈现以及与任意HTML 或 XML 文档交互的 API
简单说： DOM 是浏览器提供的一套专门用来 操作网页内容 的功能
作用： 开发网页内容特效和实现用户交互
DOM树
将HTML 文档以树状结构直观的表现出来
作用： 文档树直观的体现了标签与标签之间的关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqqtDTrk-1662117420193)(assets/1659610504174.png)]
DOM对象
：浏览器根据html标签生成的 JS 对象
- 所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
核心思想： 把网页内容当作 对象 来处理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9fXWeZ6f-1662117420193)(assets/1659338383121.png)]
获取DOM对象
根据css选择器来获取
- 选择匹配的第一个元素
语法：
document.querySelector('css选择器')
参数： 包含一个或者多个有效的CSS选择器 字符串
返回值：
css选择器匹配的第一个元素，一个HTMLElement对象
如果没有匹配到，则返回null
// 可以直接修改样式
box.style.color = 'red' // 必须有引号
- 选择匹配的多个元素
语法：
document.querySelectorAll('css选择器')
参数：包含一个或者多个有效的CSS选择器 字符串
返回值：
css选择器匹配的NodeList 对象集合
获取来的是数组，不可以直接修改，只能通过遍历的方式一次性给里面的元素修改
伪数组
document.querySelectorAll('css选择器')
得到的是一个 伪数组
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每个对象，需要遍历（for）的方式获得
const nav = document.querySelectorAll('.nav li')
for (let i = 0; i < nav.length; i++) {
console.dir(nav[i]);
}
注意：哪怕只有一个约束，通过 document.querySelectorAll(‘css选择器’) 获取过来的也是一个伪数组，里面只有一个元素而已
其他获取DOM元素方法（了解）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8pmfIDy-1662117420193)(assets/1659344996921.png)]
操作元素内容
DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象
就是操作对象使用的点语法
如果想要改变标签元素里面的内容，则可以使用如下几种方法
1、对象.innerText 属性
2、对象.innerHTML 属性
对象.innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签
cosnt box = document.querySelector('.box')
console.log(box.innerText) // 会出现div标签里面的文字，获取标签内部的文字
box.innerText = '改变对象里面属性的值' // 添加/修改标签内部文字内容
box.innerText = '<strong>innerText不解析标签</strong>' // 此时里面的strong标签不会生效
对象.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符
cosnt box = document.querySelector('.box')
console.log(box.innerHTML) // 会出现div标签里面的文字，获取标签内部的文字
box.innerHTML = '改变对象里面属性的值' // 添加/修改标签内部文字内容
box.innerHTML = '<strong>innerHTML解析标签</strong>' // 此时里面的strong标签会生效
操作元素属性
操作元素常用属性
还可以通过JS设置/修改标签元素属性，比如通过src更换图片
最常见的属性比如： href 、 title 、 src 等
语法：
对象.属性 = 值
操控元素样式属性
比如通过 轮播图 小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置 left 等等
学习路径：
通过 style 属性操作css
操作类名（className）操作css
通过 classList 操作类控制css
通过 style 属性操作css
生成的是行内样式，权重比较高
cosnt box = document.querySelector('.box') // 先获取样式
box.style.width = '200px' // 要有引号，且要加单位
box.style.backGround = 'blue' // 多组单词的采取， 去掉中间- , 使用小驼峰命名法
box.style.boderLeft = '1px solid red'
缺点：代码比较长
操作类名（className）操作css
适用于 修改的样式比较多
语法：
元素.className = 'active'
注意点：
由于class是关键字，所以使用className 去代替
className 是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
通过 classList 操作类控制css
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名') // 有就删掉，没有就加上
注意：类名不加点，且是字符串
操作表单元素属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yMLtblEJ-1662117420194)(assets/1659615663407.png)]
获取设置表单的值
const uname = document.querySelector('input')
// 获取表单里面的值，用 value
console.log(uname.value)
// 设置表单里的值
uname.value = '黄黄'
// 修改表单的属性
uname.type = 'password'
button 还是用 .innerHTML 来获取
修改表单选中和禁用
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移 除了该属性
比如： disabled 、checked 、selected
默认是： false
<input type="checkbox">
<script>
const ipt = document.querySelector('input')
// 想要多选被选中
ipt.checked = true // 只能接收布尔值
</script>
自定义属性
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
<body>
<div class="box" data-id="10">盒子</div>
<script>
const box = document.querySelector('.box')
console.log(box.dataset.id)
</script>
</body>
定时器——间歇函数
- 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
- 例如：网页中的倒计时
- 要实现这种需求，需要定时器函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WRPjmIwt-1662117420194)(assets/1659664251756.png)]
基本使用
定时器函数可以开启和关闭定时器
开启定时器
setInterval(函数,间隔时间)
例如：
function fn() {
console.log('一秒执行一次')
}
setInterval(fn,1000) // 注意：这里函数后面不可以加（），因为 fn() 代表的是调用函数，加上去定时器无效
setInterval(
function () {
console.log('一秒执行一次')}
,1000)
作用：每个一段时间调用这个函数
间隔时间单位是毫秒
关闭间歇函数
每个定时器都有自己的id数字
定时器返回的是一个id数字
let timer = setInterval(
function () {
console.log('黄')
},1000
) // 这里需要用let ，因为后面开关定时器，需要给其来来回回赋值
clearInterval(timer) // 关闭的代码
事件监听
什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
什么是时间监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件 比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
语法：
元素对象.addEventListener('事件类型',要执行的函数)
事件监听三要素：
- 事件源： 哪个dom元素被事件触发了，要获取dom元素
- 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数： 要做什么事
注意：
- 事件类型要加引号
- 函数是点击之后再去执行，每次点击都会执行一次
演示：点击鼠标弹出对话框
const btn = document.querySelector('button')
btn.addEventListener('click',function () {
alert('弹出')
})
事件监听版本（了解）
-
DOM L0
事件源.on事件 = function() { }
btn.onclick = function(){ alert(11) } btn.onclick = function(){ alert(22) } // 此时下面的会覆盖前面的，赋值过程
DOM L2
事件源.addEventListener(事件， 事件处理函数)
区别： on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QVUCvkX-1662117420194)(assets/1659690640237.png)]
鼠标事件类型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qVIeEzPj-1662117420194)(assets/1659783407804.png)]
事件对象
事件对象是什么？
也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景：
可以判断用户按下哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作
如何获取？
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eQpy7eyc-1662117420194)(assets/1659874832039.png)]
事件对象常用属性
| type | 获取当前的事件类型 |
|---|---|
| clientX/clientY | 获取光标相对于浏览器可见窗口左上角的位置 |
| offsetX/offsetY | 获取光标相对于当前DOM元素左上角的位置 |
| key | **用户按下的键盘键的值 ** 现在不提倡使用keyCode |
// 键盘按 Enter 才会生效
const input = document.querySelector('input')
input.addEventListener('keyup',function (e) {
if (e.key === 'Enter') {
console.log('传输')
}
})
去除左右空格
const str = ' pink in'
console.log(str.trim()) // pink in
// 注意：不去除中间的空格
环境对象
指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：
- 函数的调用方式不同，this 指代的对象也不同
- 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qn5650V5-1662117420195)(assets/1659955349103.png)]
伪类选择器： 选择勾选的复选框
.ck:checked {
width: 20px;
height: 20px;
} // .ck 是多选框，这个代码表达的意思是，当这个多选框被选中的时候，里面的代码生效
事件流
事件流指的是事件完整执行过程中的流动路径
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ImMqNhLq-1662117420195)(assets/1660091293430.png)]
事件捕获
从DOM的根元素开始去执行对应的事件 (从外到里)
事件捕获需要写对应代码才能看到效果
代码：
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
说明：
- addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
- 若传入false代表冒泡阶段触发，默认就是false
- 若是用 L0 事件监听，则只有冒泡阶段，没有捕获
事件冒泡
概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
事件冒泡是默认存在的
L2事件监听第三个参数是 false，或者默认都是冒泡
阻止冒泡
语法：
事件对象.stopPropagation()
son.addEventListener('click', function (e) {
alert('我是儿子')
e.stopPropagation()
})
注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
解绑事件
on事件方式，直接使用null覆盖偶就可以实现事件的解绑
btn.onclick = function () {
alert('点击了')
}
btn.onclick = null
addEventListener方式
必须使用： removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段]) // 用中括号括起来的，代表可以省略
function fn() {
alert('点击了')
}
btn.addEventListener('click', fn) // 绑定事件
btn.removeEventListener('click', fn) // 解绑事件
注意：匿名函数没法解绑
mouseover 和 mouseenter 的区别
[效果演示](APIS链接/第三天/mouseover 和 mouseenter 之间区别.html)
鼠标经过事件：
- mouseover 和 mouseout 会有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果 (推荐)
俩种注册事件的区别
传统on注册（L0） ：
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖偶就可以实现事件的解绑
- 都是冒泡阶段执行的
事件监听注册（L2）
- 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件(同一个事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
- 匿名函数无法被解绑
事件委托
原先如果同时给多个元素注册事件，我们怎么做的？
for循环注册事件
现在用事件委托
- 优点：减少注册次数，可以提高程序性能
- 原理：事件委托其实是利用事件冒泡的特点
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
- 实现：事件对象.target. tagName 可以获得真正触发事件的元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bpJdyNrD-1662117420195)(assets/1660099101013.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MCwx8yR5-1662117420195)(assets/1660101133580.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lYiJ5DUA-1662117420195)(assets/1660101335911.png)]
阻止元素默认行为
我们某些情况下需要阻止默认行为的发生， 不如 阻止 链接的跳转，表单域跳转
语法：
e.preventDefault()
演示：
<body>
<form action="http://www.itacast.cn">
<input type="submit" value="免费注册">
</form>
<a href="http://www.baidu.com">百度一下</a>
<script>
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
e.preventDefault() // 阻止默认行为 提交
})
const a = document.querySelector('a')
a.addEventListener('click', function (e) {
e.preventDefault() // 阻止默认行为
})
</script>
</body>
其他事件
页面加载事件
-
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
-
为什么要学？
有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
-
事件名：load
-
监听页面所有资源加载完毕：
给 window 添加 load 事件
/ 当js代码写在元素上面的时候，可以通过此代码，外部资源全部加载完毕才会生效
window.addEventListener('load', function (e) {
// 执行的操作
})
注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
-
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完 全加载
-
事件名：DOMContentLoaded
-
监听页面DOM加载完毕：
给 document 添加 DOMContentLoaded 事件
/ 这个比上面那个效果更快，无需等待样式表、图像等完全加载，元素加载完就生效
document.addEventListener('DOMContentLoaded', function (e) {
// 执行的操作
})
页面滚动事件
-
滚动条在滚动的时候持续触发的事件
-
为什么要学？
很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
-
事件名：scroll
-
监听整个页面滚动：
/ 给 window 或 document 添加 scroll 事件 window.addEventListener('scroll', function (e) { // 执行的操作 }) // 监听某个元素的内部滚动直接给某个元素加即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bsm8M4CH-1662117420196)(assets/1660137495818.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RjsfYda4-1662117420196)(assets/1660137697108.png)]
页面滚动事件—— 获取位置
-
scrollLeft和scrollTop （属性）
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的
-
尽量在scroll事件里面获取被卷去的距离
// 页面滚动事件
window.addEventListener('scroll',function () {
// document.documentElement 是 html元素获取方式
const n = document.documentElement.scrollTop
console.log(n)
})
注意：获得的是数字型 ，不带单位
可读写的意思就是可以赋值
/ 想要让页面打开就是滚动到某个位子
document.documentElement.scrollTop = 800
// 不带单位
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z905dk54-1662117420196)(assets/1660179229961.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y7Q6XhMS-1662117420196)(assets/1660179599104.png)]
页面滚动事件——滚动到指定位置
-
scrollTo() 方法可把内容滚动到指定的坐标
语法：
元素.scrollTo(x,y)
/ 让页面滚动到顶部
btn.addEventListener('click', function () {
// 方法一 window.scrollTo(0,0)
// 方法二 document.documentElement.scrollTop = 0
})
页面尺寸事件
-
会在窗口尺寸改变的时候触发事件：
resize
window.addEventListener('resize', function () {
// 执行的代码
})
- 检测屏幕宽度
window.addEventListener('resize', function () {
let w = document.documentElement.clientWidth
console.log(w)
})
-
获取宽高
获取元素的可见部分宽高（不包含边框，margin，滚动条等）
clientWidth和clientHeight
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9p2v69ss-1662117420196)(assets/1660200217052.png)]
分析 flexible.js 源码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zzxW7nE6-1662117420196)(assets/1660200242593.png)]
元素尺寸与位置
可以通过JS的方式，得到元素在页面中的位置
方法一 ：offsetWidth
-
获取宽高：
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值,方便计算
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
const div = document.querySelector('div')
console.log(div.offsetWidth)
-
获取位置：
获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wvp9SzeQ-1662117420197)(assets/1660206672647.png)]
方法二： getBoundingClientRect()
element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ghBLHRD5-1662117420197)(assets/1660218358922.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LXHs3TJQ-1662117420197)(assets/1660218368648.png)]
日期对象
目标：掌握日期对象，可以让网页显示日期
日期对象：用来表示时间的对象
实例化
- 在代码中发现了 new 关键字时，一般将这个操作称为实例化
- 创建一个时间对象并获取时间
/ 获得当前时间
const date = new Date()
/ 获得指定时间
const date = new Date('2022-10-01')
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FGoJDxHK-1662117420197)(assets/1660287904494.png)]
日期对象方法
目标：能够使用日期对象中的方法写出常见日期
使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
/ 使用 日期对象 需要先 实例化
案例： 打印当前时间
<script>
function getDate() {
const date = new Date()
let h = date.getHours()
let m = date.getMinutes()
let s = date.getSeconds()
h = h >= 10 ? h : '0' + h
m = m >= 10 ? m : '0' + m
s = s >= 10 ? s : '0' + s
return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`
}
const p = document.querySelector('p')
p.innerHTML = getDate()
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FEVU7aUf-1662117420197)(assets/1660289497451.png)]
获取时间的另外写法
const date = new Date()
p.innerHTML = date.toLocaleString() // 2022/8/12 15:55:37
p.innerHTML = date.toLocaleTimeString() // 15:53:57
p.innerHTML = date.toLocaleDateString() // 2022/8/12
p.innerHTML = date.toDateString() // Fri Aug 12 2022
时间戳
-
使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
-
什么是时间戳:
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
-
算法：
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
1000ms 转换为就是 0小时0分1秒
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vlnTre4D-1662117420197)(assets/1660291500971.png)]
获取时间戳的三种方法
1、使用 getTime() 方法
const date = new Date()
console.log(date.getTime())
2、简写 +new Date()
console.log(+new Date()) // 当前的时间戳
console.log(+new Date(2022-8-22 18:33:33)) // 设定的时间戳
3、使用 Date.now()
无需实例化
但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳
console.log(Date.now())
实用方法
利用 getDay 获取 星期几
const arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]
console.log(arr[new Date().getDay()])
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCLrlemb-1662117420198)(assets/1660294573734.png)]
DOM节点
DOM树里每一个内容都称之为节点
节点类型：
-
元素节点
所有的标签 比如 body 、div
html 是根节点
-
属性节点
所有的属性 比如 href
-
文本节点
所有文本
-
其他
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XwjHwHsz-1662117420198)(assets/1660352378334.png)]
查找结点
查找父节点
-
parentNode 属性
-
返回最近一级的父节点 找不到返回null
/ 大盒子 box 小盒子 smallbox smallbox.parentNode // 父元素对象
子节点查找
-
childNodes
获得所有子节点、包括文本节点（空格、换行）、注释节点等
-
children 属性 （重点）
仅获得所有元素节点
返回的还是一个伪数组
父元素.children // 得到的是伪数组，类似于 querySelectorAll
兄弟关系
/ 下一个兄弟节点
nextElementSibling 属性
// 上一个兄弟节点
previousElementSibling 属性
增加节点
-
创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：
document.createElement('标签名') -
追加节点（插到最后面）
要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素:
/ 插到父元素的最后
父元素.appendChild(div)
- 追加节点（插到父元素中某个子元素的前面）
// 插到某元素前面
父元素.insertBefore(插入的元素, 放到哪个元素的前面)
/ 演示： 往 ul 标签 下面 子元素的最前面插入 一个li
const ul = document.querySelector('ul') // 调取 ul 标签
const li = document.createElement('li') // 创建个 li标签
ul.insertBefore(li, ul.children[0]) // 插入 li标签到最前面
克隆节点
-
特殊情况下，我们新增节点，按照如下操作：
复制一个原有的节点
把复制的节点放入到指定的元素内部
-
克隆节点
// 克隆一个已有的元素的节点
要克隆的元素.cloneNode(布尔值)
// 克隆一个节点， 然后可以追加
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为true，则代表克隆时会包含后代节点一起克隆
- 若为false，则代表克隆时不包含后代节点
- 默认为false
删除节点
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法：
父元素.removeChild(要删除的元素)
注意：
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
M端事件
触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔 ）对屏幕或者触控板操作。
| 触屏 touch 事件 | 说明 |
|---|---|
| touchstart | 手机触摸到一个DOM元素时触发 |
| touchmove | 手机在一个DOM元素上滑动时触发 |
| touchend | 手机从一个DOM元素上移开时触发 |
swiper插件
学习插件的基本过程：
- 熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/
- 看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
- 查看基本使用流程 https://www.swiper.com.cn/usage/index.html
- 查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html
- 注意: 多个swiper同时使用的时候, 类名需要注意区分
重绘和回流
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MOnWKAfs-1662117420198)(assets/1661156243830.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sEYuWBoH-1662117420198)(assets/1661156264216.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F915Zf0D-1662117420198)(assets/1661156277140.png)]
Window 对象
BOM（浏览器对象模型）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3x2y3Zpg-1662117420198)(assets/1660479247341.png)]
- window对象是一个全局对象，也可以说是JavaScript中的顶级对象
- 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- window对象下的属性和方法调用的时候可以省略window
console.log(document === window.document) // true
var num = 10
console.log(window.num) // 10
定时器——延迟函数
JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法：
/ setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
setTimeout(回调函数, 等待的毫秒数)
清除延迟函数：
let timer = setTimeout(回调函数, 等待的毫秒数)
clearTimeout(timer)
注意点:
- 延时器需要等待,所以后面的代码先执行
- 每一次调用延时器都会产生一个新的延时器
- 返回值跟定时函数一致，都是id数
JS执行机制
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TkeGZE76-1662117420199)(assets/1660482191907.png)]
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后 再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如 果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
- 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线 程。于是，JS 中出现了同步和异步。
同步和异步
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步 做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事 情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。 他们的本质区别： 这条流水线上各个流程的执行顺序不同。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q6Bbzv8R-1662117420199)(assets/1660482310322.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-krat8CGq-1662117420199)(assets/1660482843221.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cjgUFisC-1662117420199)(assets/1660482870451.png)]
location 对象
location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法：
- href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
// 可以得到当前文件URL地址
console.log(location.href)
// 可以通过js方式跳转到目标地址
location.href = 'http://www.baidu.com'
- search 属性获取地址中携带的参数，符号 ？后面部分
<form action="">
<input type="text" name="uname">
<input type="password" name="pw">
<button>提交</button>
</form>
<script>
console.log(location.search)
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xtBONlNp-1662117420199)(assets/1660561771195.png)]
- hash 属性获取地址中的啥希值，符号 # 后面部分
<a href="#/download">下载</a>
location.hash '#/download'
后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如 网易云音乐
- reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
<button>点击刷新</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
location.reload(true)
// 类似于 ctrl+f5 ，强制刷新
})
</script>
navigator 对象
-
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
-
常用属性和方法：
通过 userAgent 检测浏览器的版本及平台
// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()
history 对象
history 的数据类型是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xEnUSWza-1662117420199)(assets/1660564513326.png)]
本地存储
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大，sessionStorage和localStorage约 5M 左右
常见的使用场景：
https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失
本地存储分类——localStorage
作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
特性：
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用
语法： key 要加 ‘’ 引号，除非变量
// 存储数据：
// 改 ， 有就是改，没有就是增
localStorage.setItem(key, value)
// 获取数据
localStorage.getItem(key)
// 删除数据
localStorage.removeItem(key)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v8CGg7On-1662117420200)(assets/1660565467362.png)]
注意： 本地存储的是 字符串 ，注意转换
本地存储分类- sessionStorage
特性：
生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
用法跟localStorage 基本相同
存储复杂数据类型
本地只能存储字符串,无法存储复杂数据类型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bts6LRwe-1662117420200)(assets/1660566179714.png)]
1.把对象转换为JSON字符串
解决：需要将复杂数据类型转换成JSON字符串,在存储到本地
语法：JSON.stringify(复杂数据类型)
// 先将对象 转换为 JSON字符串 ，再存储
const obj = {
uname: '黄',
age: 18,
gender: 'man'
}
localStorage.setItem('obj', JSON.stringify(obj))
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bB13XUDj-1662117420200)(assets/1660566593191.png)]
JSON 对象 ： 属性和值有引号 ，且 引号都是双引号
2.把 JSON字符串转换为 对象
const str = localStorage.getItem('obj')
console.log(JSON.parse(str))
数组中map方法 —— 迭代数组
语法：
const arr = ['pink','red','blue']
arr.map(function (item,index) {
console.log(item) // 得到数组元素 'pink' 'red' 'blue'
console.log(index) // 得到索引号 0 1 2
})
使用场景： map 可以处理数据，并且 返回新的数组
const arr = ['pink','red','blue']
const newArr = arr.map(function (item,index) {
return item + '老师'
})
console.log(newArr) // ['pink老师','red老师','blue老师']
map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系
数组中 join方法
作用：join() 方法用于把数组中的所有元素转换一个字符串
语法：
const arr = ['pink老师','red老师','blue老师']
console.log(arr.join('')) // pink老师red老师blue老师
正则表达式
-
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
-
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
-
正则表达式在 JavaScript中的使用场景：
例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)
比如用户名: /1{3,16}$/
过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dUM8lipY-1662117420200)(assets/1660809447186.png)]
语法
1、定义规则
const reg = /表达式/
2、根据规则去查找：找到并返回
test( ) 方法
用来查看正则表达式与指定的字符串是否匹配
语法：
reg.test(被检测的字符串)
注意：如果正则表达式与指定的字符串匹配 ，返回true，否则false
const str = '学前端还是要看我'
const reg = /前端/
console.log(reg.test(str)) // true
exec( ) 方法
在一个指定字符串中执行一个搜索匹配
语法：
reg.exec(被检测字符串)
注意：如果匹配成功，exec() 方法返回一个数组，否则返回null
const str = '学前端还是要看我'
const reg = /前端/
console.log(reg.exec(str)) // 返回一个数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PHgF6eY1-1662117420200)(assets/1660819699763.png)]
元字符
- 普通字符
大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
也就是说普通字符只能够匹配字符串中与它们相同的字符。
- 元字符（特殊字符）
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…
但是换成元字符写法： [a-z]
正则测试工具: http://tool.oschina.net/regex
元字符分类：
- 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
- 量词 （表示重复次数）
- 字符类 （比如 \d 表示 0~9）
边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁结束） |
| $ | 表示匹配行尾的文本（以谁结束） |
注意： 如果 ^ 和 $ 在一起，表示必须是精确匹配
console.log(/哈/.test('哈哈')) // true
console.log(/^哈/.test('哈哈')) // true
console.log(/^哈/.test('二哈')) // false
console.log(/^哈$/.test('哈哈')) // false
console.log(/^哈$/.test('哈')) // true
// 精确匹配，只有一个 哈 才会 true
量词
量词用来 设定某个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
注意： 逗号左右两侧千万不要出现空格
// 还是必须要以 哈 开头和结尾
console.log(/^哈*$/.test('二哈哈')) // false
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8X1rhdXT-1662117420201)(assets/1660821170446.png)]
字符类
[ ] 里面加上 - 连字符
使用连字符 - 表示一个范围
//只能选一个
console.log(/^[abc]$/.test('a')) // true
console.log(/^[abc]$/.test('ab')) // false
console.log(/^[a-z]$/.test('c')) // true
比如：
- [a-z] 表示 a 到 z 26个英文字母都可以
- [a-zA-Z] 表示大小写都可以
- [0-9] 表示 0~9 的数字都可以
// 字母大小写和数字都行
/^[a-zA-Z0-9]{9,16}$/.test('da123sadAD') // true
// 腾讯qq号
^[1-9][0-9]{4,}$ // 表示从 10000 开始
特殊字符类
[] 里面加上 ^ 取反符号
[^a-z] // 表示 除了小写字母a-z 其他都可以
. 匹配除换行符之外的任何单个字符
console.log(/./.test('a')) // true ，注意：是单个字符
预定义类
预定义：指的是 某些常见模式的简写方式。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6LoDOU4k-1662117420201)(assets/1660828288988.png)]
可以直接用的元字符
// 用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位
/^[a-zA-Z0-9-_]{6,16}$/
// 要求用户只能输入中文
/^[\u4e00-\u9fa5]{2,8}$/
// 日期格式
/^\d{4}-\d{1,2}-\d{1,2}/
修饰符 和 replace替换
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
语法：
/表达式/修饰符
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果
console.log(/a/i.test('A')) // true
替换 replace
语法：
字符串.replace(/正则表达式/,'替换的文本')
const str = 'java是一门编程语言，JAVA也被称为最好的语言'
str.replace(/java/i, '前端')
console.log(str) // java是一门编程语言，JAVA也被称为最好的语言
console.log(str.replace(/java/ig, '前端')) // 前端是一门编程语言，前端也被称为最好的语言
console.log(str.replace(/java|JAVA/g, '前端')) // 前端是一门编程语言，前端也被称为最好的语言
// 1、repalce()不会改变原字符串，有返回值
// 2、i 可以无视大小写
// 3、g 可以用来全选
(/^哈*$/.test(‘二哈哈’)) // false
[外链图片转存中...(img-8X1rhdXT-1662117420201)]
### 字符类
[ ] 里面加上 - 连字符
使用连字符 - 表示一个范围
```javascript
//只能选一个
console.log(/^[abc]$/.test('a')) // true
console.log(/^[abc]$/.test('ab')) // false
console.log(/^[a-z]$/.test('c')) // true
比如：
- [a-z] 表示 a 到 z 26个英文字母都可以
- [a-zA-Z] 表示大小写都可以
- [0-9] 表示 0~9 的数字都可以
// 字母大小写和数字都行
/^[a-zA-Z0-9]{9,16}$/.test('da123sadAD') // true
// 腾讯qq号
^[1-9][0-9]{4,}$ // 表示从 10000 开始
特殊字符类
[] 里面加上 ^ 取反符号
[^a-z] // 表示 除了小写字母a-z 其他都可以
. 匹配除换行符之外的任何单个字符
console.log(/./.test('a')) // true ，注意：是单个字符
预定义类
预定义：指的是 某些常见模式的简写方式。
[外链图片转存中…(img-6LoDOU4k-1662117420201)]
可以直接用的元字符
// 用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位
/^[a-zA-Z0-9-_]{6,16}$/
// 要求用户只能输入中文
/^[\u4e00-\u9fa5]{2,8}$/
// 日期格式
/^\d{4}-\d{1,2}-\d{1,2}/
修饰符 和 replace替换
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
语法：
/表达式/修饰符
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果
console.log(/a/i.test('A')) // true
替换 replace
语法：
字符串.replace(/正则表达式/,'替换的文本')
const str = 'java是一门编程语言，JAVA也被称为最好的语言'
str.replace(/java/i, '前端')
console.log(str) // java是一门编程语言，JAVA也被称为最好的语言
console.log(str.replace(/java/ig, '前端')) // 前端是一门编程语言，前端也被称为最好的语言
console.log(str.replace(/java|JAVA/g, '前端')) // 前端是一门编程语言，前端也被称为最好的语言
// 1、repalce()不会改变原字符串，有返回值
// 2、i 可以无视大小写
// 3、g 可以用来全选
a-z0-9_- ↩︎
扫一扫
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
