API
变量声明
- 声明变量有三个 var let和const
- 优先使用const,如果发现它后面是要被修改的，再改为const
- const声明的值不能更改，而且const声明的时候需要里面进行初始化。
- 但是对于引用数据类型，const声明的变量，里面存的不是值，是地址。
因此数组、对象可以使用const声明：
//数组
const arr = ['red','green']
arr.push('pink')
console.log(arr) //['red','green','pink']
//对象
const person = {
uname:'pink',
age:18,
gender:'女'
}
person.address = '武汉黑马'
console.log(person)
DOM
DOM(文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API，即DOM是浏览器提供的一套专门用来操作网页内容的功能。
作用：开发网页内容特效和实现用户交互
DOM树
- 将HTML文档以树状结构直观的表现出来，称为文档树或DOM树
- 描述网页内容关系的名词
- 作用：文档树直观的体现了标签与标签之间的关系
DOM对象
-
DOM对象：
- 浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
-
在CSS中是标签，在JS中是对象
-
DOM的核心思想：
- 把网页内容当作对象来处理
-
document对象：
- 是DOM里提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的例如：document.write()
- 网页所有内容都是在document中的
获取DOM对象（元素）
根据CSS选择器来获取DOM元素(重点)
1、选择匹配单个元素
语法：
获取匹配的第一个元素
document.querySelector('CSS选择器')
例：
<body>
<div class="box">123</div>
<div class="box">abc</div>
<script>
//获取匹配的第一个元素
const box = document.querySelector('div')
console.log(box)//只会出现123
</script>
</body>
//获取div还可以利用类选择器：
const box = document.querySelector('.box')
//利用id
<body>
<p id="nav">导航栏</p>
<script>
const nav = document.querySelector('#nav')
console.log(nav)
</script>
</body>
//利用结构选择器
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//获取ul的第一个li
const li = document.querySelector('ui li:first-child')
</script>
</body>
- 参数：包含一个或多个有效的CSS选择器字符串
- 返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象；如果没有匹配到则返回null。
- 参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
2、选择匹配的多个元素
语法:
document.querySelectorAll('CSS选择器')
参数：包含一个或多个有效的CSS选择器字符串。
返回值：CSS选择器匹配的NodeList对象集合（伪数组）。
伪数组：
- 有长度有索引号的数组
- 但是没有pop(),push()等数组方法
想要得到里面的每一个对象，则需要遍历(for)的方式获得。
*即使只有一个元素，通过querySelectorAll获取过来的**也是一个伪数组，*里面只有一个元素而已。
const lis =document.querySelectorAll('ui li')
console.log(lis)
//返回[li,li,li]
获取元素后修改
1、querySelector()只能选择一个元素，可以直接操作。
<body>
<p id="nav">导航栏</p>
<script>
const nav = document.querySelector('#nav')
//修改颜色
nav.style.color='red'
</script>
</body>
2、querySelectorAll()可以选择多个元素，得到的是伪数组，需要遍历每一个元素。
注：小括号里面的参数
- 里面写CSS选择器
- 必须是字符串，也就是说必须加上引号
其他获取DOM元素的方法
//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素，例：获取页面所有div
document.getElementByTagName('div')
//根据类名获取元素，例：获取页面所有类名为w的
document.getElementsByClassName('w')
操作元素内容
对象.innerText属性
<body>
<div class="box">内容</div>
<script>
//1、获取元素
const box = document.querySelector('.box')
//2、修改文字内容
//获取文字内容
console.log(box.innerText)
box.innerText='盒子' //修改内容
</script>
</body>
- 将文字内容添加/更新到任意标签位置
- 显示纯文本，不解析标签
box.innerText='这里写标签不起作用'
对象.innerHTML属性
- 将文字内容添加/更新到任意标签位置
- 会解析标签，多标签建议使用模板字符
//innerHTML解析标签
console.log(box.innerHTML)
box.innerHTML='<strong>修改</strong>' //修改加粗
操作元素属性
操作元素常用属性
通过JS设置/修改标签元素属性。
语法：
对象.属性=值
例：
//1、获取元素
const pic = document.querySelector('img')
//2、操作元素,修改图片对象的属性
pic.src='./images/1.jpg'
pic.title='图片'
操作元素样式属性
通过style属性操作CSS
语法：
对象.style.样式属性 = 值
- 修改样式通过style属性引出
- 如果属性有-连接符，需要转换为小驼峰命名法
- 赋值的时候，需要的时候不要忘记加cSs单位
例：
//css部分
<style>
.box {
width:200px;
height: 200px;
background-color:pink；
</style>
<body>
<div class="box"></div>
<script>
// 1.获取元素
const box = document.querySelector('.box') //2.修改样式属性 对象.style.样式属性='值' ,有单位
box.style.width = '300px'
//多组单词的采取 小驼峰命名法
box.style. backgroundColor = 'hotpink'
box.style.border = '2px solid blue'
box.style.borderTop ='2px solid red'
</script>
</body>
操作类名(className)操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：
//active 是一个css类名
元素.className ='active'
- 由于class是关键字，所以使用className去代替
// 1.获取元素
const div = document.querySelector('div')
//2.添加类名,不用加点
div.className ='box'
- className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名(写两个以上类名，否则类名会被覆盖)
// 1.获取元素
const div = document.querySelector('div')
// 2.添加类名 cLass 是个关键字我们用 cLassName
div.className = 'nav box'
//显示为<div class="nav box"></div>
通过classList操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
//追加一个类
元素.classList.add('类名'）
// 删除一个类
元素.classList.remove('类名'）
// 切换一个类
元素.classList.toggle('类名'）
注：
- 类名不加点并且是字符串
- 切换类 toggle()有就删掉，没有就加上
- classList是追加和删除不影响以前的类名
例：
<body>
<div class="box">文字</div>
<script>
// 1.获取元素
const box = document.querySelector('.box')
// 2.修改样式
//2.1 追加类 add()
box.classList.add('active')
//结果<div class="box active">文字</div>
// 2.2 删除类 remove()
box.classList. remove('box')
// 2.3 切换类 toggle()
box.classList.toggle('active')
</script>
</body>
操作表单元素属性
- 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
- 正常的有属性有取值的跟其他的标签属性没有任何区别
获取：DOM对象.属性名
表单.value=‘用户名’
设置：DOM对象.属性名=新值
表单.type ='password'
例：
<body>
<input type="text" value="电脑">
<script>
// 1 获取元素
const uname = document.querySelector('input')// 2.如果需要获取值测试 获取表单里面的值用 表单.value
console. Log(uname. value)//电脑
// console.log(uname.innerHTML) innertHTML 得不到表单的内容
//3、设置表单的值
uname. value='手机'
uname. type='password'
</script>
</body>
表单属性中添加就有效果,移除就没有效果，一律使用布尔值表示 如果为true代表添加了该属性，如果是false代表移除了该属性。
例：
// 1.获取
const ipt = document.querySelector('input')//console.Log(ipt.checked)false
ipt.checked = true
ipt.checked = 'true'// 引号里面有值即为true,会选中，不提倡
<button display>点击</button>
//入股属性和属性值一样写一个即可
<script>
// 1.获取
const button = document.querySelector('button'//console.Log(button.disabled)//默认false 不禁用
button.disabled= true//禁用
</script>
自定义属性
- 标准属性：标签天生自带的属性 比如class id title等，可以直接使用点语法操作比如：disabled、checked、selected
- 自定义属性：
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
<div class="box" data-id="10">盒子</div>
<script>
const box = document.querySelector('.box')
console.log(box.dataset.id)//10
</script>
</body>
定时器–间歇函数
定时器函数
目标：能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
1.开启定时器
setInterval(函数，间隔时间)
例：
// setInterval(函数，间隔时间)
//调用匿名函数
setInterval(function (){console.log('一秒执行一次'）},1000)
或：
//调用有名函数，不能加小括号，否则会被调用
function fn() {
console.log('一秒执行一次’)
}
setInterval(fn, 1000)
注：1、函数名不需要加括号
2、定时器返回的是一个id数字
2、关闭定时器
let 变量名=setInterval(函数，间隔时间)
clearInterval(变量名)
注意：1、函数名字不需要加括号
2、定时器返回的是一个id数字
一般不会刚创建就停止，而是满足 一定条件再停止
let timer = setInterval(function(){
console.log('hi~')
},1000)
clearInterval(timer)
//重新开始
timer = setInterval(function(){
console.log('hi~')
},1000)
事件监听（绑定）
让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。
语法：
元素对象.addEventListener('事件类型'，要执行的函数)
事件监听三要素：
- 事件源： 那个dom元素被事件触发了，要获取dom元素
- 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过 mouseover等
- 事件调用的函数： 要做什么事
<button>按钮</button>
<script>
//获取元素
const btn = document.querySelector('.btn')
//修改元素样式
btn.addEventListener('click',function (){
alert('点击')
})
</script>
注意：
- 事件类型要加引号
- 函数是点击之后再去执行，每次
点击都会执行一次
事件监听版本
-
DOM LO
事件源.on事件=function(){}
-
DOM L2
事件源.addEventListener(事件，事件处理函数)
-
区别:
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
事件类型
鼠标事件：鼠标触发
- click 鼠标点击
- mouseenter鼠标经过
- mouseleave鼠标离开
const div = document.querySelector('div')
// 鼠标经过
div.addEventListener('mouseenter',function (){
console.log(`轻轻的我来了`)
})
//鼠标离开
div.addEventListener('mouseleave'， function (){
console.log(`轻轻的我走了`)
})
焦点事件：表单获得光标
- focus获得焦点
- blur失去焦点
const input = document.querySelector('input')
//有焦点触发
input.addEventListener('focus'，
function (){console.log('有焦点触发'）
})
//失去焦点触发
input.addEventListener('blur', function (){console.log('失去焦点触发'）
})
键盘事件：键盘触发
- Keydown 键盘按下触发
- Keyup键盘抬起触发
const input = document.querySelector('input')
// 1.键盘事件
input.addEventListener('keydown', function (){
console.Log('键盘按下了'） input.addEventListener('keyup', function () {
console.Log('键盘该起了‘）
})
文本事件：表单输入触发
- input用户输入事件
const input = document.querySelector('input')
// 2.用户输入文本事件input
input.addEventListener('input',function (){
console.log(input.value)//得到用户输入的内容
})
事件对象
获取事件对象
语法：如何获取
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为event、ev、e
元素.addEventListener('click'，function (e){})
例：
const btn = document.querySelector('button')
btn.addEventListener('click',function (e){ console.log(e)
})
部分常用属性
-
type
- 获取当前的事件类
-
clientX/clientY
- 获取光标相对于浏览器可见窗口左上角的位置
-
offsetX/offsetY
- 获取光标相对于当前DOM元素左上角的位置
-
key
-
用户按下的键盘键的值
-
现在不提倡使用keyCode
-
const input = document.querySelector('input') input.addEventListener('keyup',function (e){
// console. Log(e.key)
if (e.key === 'Enter'){
console.log('我按下了回车键'）
}
})
环境对象
- 环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
- 作用：弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this指代的对象也不同
- 【谁调用，this就是谁】是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以 this 指代window
const btn = document.querySelector('button')
btn.addEventListener('click',function (){
console.log(this)// btn 对象
//btn.style.color='red'替换为：
this.style.color='red'
})
回调函数
如果将函数A做为参数传递给函数B时，我们称函数A为回调函数。
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数。
常见的使用场景:
function fn() {
console.log('我是回调函数...')
}
//fn传递给了setInterval，fn就是回调函数
setInterval(fn, 1000)
//事件监听
box.addEventListener('click'， function (){
console.log('我也是回调函数')
})
事件流
事件流是指事件完整执行过程中的流动路径。
- 事件流分为捕获阶段和冒泡阶段
- 捕获阶段是从父到子；冒泡阶段是从子到父
事件捕获
从DOM的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
例：
<div class='father'>
<div class='son'></div>
</div>
const fa = document.querySelector('.father ')
const son = document.querySelector('.son')
document.addEventListener('click', function (){
alert('我是爷爷‘)
}, true)
fa.addEventListener ('click', function (){
alert('我是爸爸‘)
}, true)
son.addEventListener('click',function () {
alert('我是儿子‘)
},true)
//依次执行
说明:
- addEventListener第三个参数传入ture代表是捕获阶段触发（很少使用）
- 若传入false代表冒泡阶段触发，默认就是false
- 若是用L0事件监听，则只有冒泡阶段，没有捕获
事件冒泡
事件冒泡概念：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。
- 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
- 事件冒泡是默认存在的
- L2事件监听第三个参数是false，或者默认都是冒泡
const father = document.querySelector('.father')
const son = document.queryselector('.son')
document.addEventListener('click', function (){
alert('我是爷爷')
})
fa.addEventListener('click'，function (){
alert('我是爸爸')
})
son.addEventListener('click', function (){
alert('我是儿子')
})
阻止冒泡
- 问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
- 需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
- 前提：阻止事件冒泡需要拿到事件对象
- 语法：
事件对象.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 和mouseout 会有冒泡效果
- mouseenter 和mouseleave 没有冒泡效果(推荐)
两种注册事件的区别
传统on注册（LO）
- 同一个对象,后面注册的事件会覆盖前面注册（同一个事件)
- 直接使用null覆盖偶就可以实现事件的解绑
- 都是冒泡阶段执行的
事件监听注册（L2）
- 语法：addEventListener(事件类型，事件处理函数，是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件（同一个事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)
- 匿名函数无法被解绑
事件委托
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。
实现：事件对象.target.tagName 可以获得真正触发事件的元素。
//点击每个小Li当前Li文字变为红色
// 按照事件委托的方式委托给父级，事件写到父级身上
// 1.获得父元素
const ul = document.querySelector('ul')ul.addEventListener('click', function (e) {
// alert(11)
// this.style.color = 'red'
// console.dir(e.target)
//就是我们点击的那个对象
// e.target.style.color = 'red'
//我的需求，我们只要点击Li才会有效果
if(e.target.tagName === 'LI'){
e.target.style.color = 'red‘
}
})
阻止元素默认行为
我们某些情况下需要阻止默认行为的发生，比如阻止 链接的跳转，表单域跳转
语法：
e.preventDefault()
<form action="链接">
<input type="submit" value="提交"></form>
<script>
const form = document.querySelector('form')
form.addEventListener('click', function (e){
// 阻止表单默认提交行为
e.preventDefault()
})
其他事件
页面加载事件
- 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
- 事件名：load
- 监听页面所有资源加载完毕:
给window 添加load事件
//页面加载事件
window.addEventListener('load', function () {
// 执行的操作
})
//等待页面所有资源加载完毕，就回去执行回调函数
window.addEventListener('load', function (){
const btn = document.querySelector('button'btn.addEventListener('click', function(){
alert(11)
})
})
// img.addEventListener('load', function (){
//等待图片加载完毕，再去执行里面的代码 })
-
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
-
事件名：DOMContentLoaded
-
监听页面DOM加载完毕:
给document 添加DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded',function (){
// 执行的操作
})
页面滚动事件
- 滚动条在滚动的时候持续触发的事件
- 很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
- 事件名：scroll
- 监听整个页面滚动：
// 页面滚动事件
window.addEventListener('scroll', function (){
// 执行的操作
})
- 给window 或document 添加scroll事件
监听某个元素的内部滚动直接给某个元素加即可
获取位置
scrollLeft和scrollTop（属性)
- 获取被卷去的大小
- 获取元素内容往左、往上滚出去看不到的距离
- 这两个值是可读写的
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
//页面滚动事件
window.addEventListener('scroll', function (){
// document.documentElement 是htmL元素获取方式
const n = document.documentElement.scrollTop console.log(n)
})
注：
document.documentElement HTML文档返回对象为HTML元素
<html lang="en">
<head>..<./head>
<body>..</body>
</html>
页面尺寸问题
会在窗口尺寸改变的时候触发事件：
resize
window.addEventListener('resize', function (){
//执行的代码
})
检测屏幕宽度：
window.addEventListener('resize', function (){let w = document.documentElement.clientwidth console.log(w)
})
获取宽高
- 获取元素的可见部分宽高（不包含边框，margin，滚动条等）
- clientwidth和clientHeight
获取宽高
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- offsetwidth和offsetHeight
- 获取出来的是数值，方便计算
- 注意：获取的是可视宽高，如果盒子是隐
- 藏的，获取的结果是0
获取位置：
- 获取元素距离自己定位父级元素的左、上距离
- offsetLeft和offsetTop 注意是只读属性
日期对象
实例化
- 在代码中发现了new关键字时，一般将这个操作称为实例化
- 创建一个时间对象并获取时间
获得当前时间
const date = new Date()
//实例化new
// 1、得到当前时间
const date = new Date()
console.log(date)
// 2.指定时间
datel = new Date('2022-5-1 08:30:00')
console.log(date1)
日期对象方法
使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式。
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear() | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为0~11 |
| getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay() | 获取星期 | 取值为0~6 |
| getHours() | 获取小时 | 取值为0~23 |
| getMinutes() | 获取分钟 | 取值为0~59 |
| getSeconds() | 获取秒 | 取值为0~59 |
时间戳
-
使用场景：
如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
-
什么是时间戳:
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
-
算法：
将来的时间戳-现在的时间戳=剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的年月日时分秒 就是倒计时时间
比如 将来时间戳2000ms - 现在时间戳1000ms =1000ms
1000ms转换为就是0小时0分1秒
三种方式获取时间戳：
使用getTime(）方法
const date =
new Date()console.log(date.getTime())
简写+new Date()
console.log(+new Date())
使用Date.now()
- 无需实例化
- 但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间
console.log(Date.now())
DOM节点
DOM树里面每一个内容都称之为节点
节点类型：
- 元素节点：所有的标签 比如body、div、html 是根节点
- 属性节点：所有的属性 ，比如
<href> - 文本节点:所有的文本
其他
查找结点
父节点查找：
- parentNode 属性
- 返回最近一级的父节点 找不到返回为null
子元素.parentNode
子节点查找：
childNodes
- 获得所有子节点、包括文本节点（空格、换行）、注释节点等
children 属性（重点）
- 仅获得所有元素节点
- 返回的还是一个伪数组
父元素.children
兄弟关系查找：
1.下一个兄弟节点
nextElementSibling 属性
2.上一个兄弟节点
previousElementSibling 属性
增加节点
创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：
//创造一个新的元素节点
document.createElement('标签名')
追加节点
- 要想在界面看到，还得插入到某个父元素中
- 插入到父元素的最后一个子元素:
// 插入到这个父元素的最后
父元素.appendChild（要插入的元素）
insertBefore
- 插入到父元素中某个子元素的前面
//插入到某个子元素的前面
父元素.insertBefore（要插入的元素，在哪个元素前面）
克隆节点
//克隆一个已有的元素节点
元素.cloneNode（布尔值）
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为true，则代表克隆时会包含后代节点一起克隆
- 若为false，则代表克隆时不包含后代节点
- 默认为false
删除节点
- 若一个节点在页面中已不需要时，可以删除它
- 在JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
- 语法：
父元素.removeChild（要删除的元素）
注：
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节（display:none）有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
M端事件
- 触屏事件touch（也称触摸事件），Android和10S都有。
- touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔
）对屏幕或者触控板操作。
常见的触屏事件如下：
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
JS插件
插件：就是别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果
- 熟悉官网,了解这个插件可以完成什么需求https://www.swiper.com.cn/
- 看在线演示，找到符合自己需求的demohttps://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同时使用的时候，类名需要注意区分
window对象
BOM(浏览器对象模型)
BOM(Browser Object Model）是浏览器对象模型
- window对象是一个全局对象，也可以说是JavaScript中的顶级对象
- 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- window对象下的属性和方法调用的时候可以省略window
定时器–延时函数
- JavaScript 内置的一个用来让代码延迟执行的函数，叫setTimeout
- 语法：
setTimeout(回调函数，等待的毫秒数）
- setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window
- 清除延时函数：
let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)
注意点：
- 延时器需要等待，所以后面的代码先执行
- 每一次调用延时器都会产生一个新的延时器
JS执行机制
同步任务
同步任务都在主线程上执行，形成一个执行栈。
异步任务
JS的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型：
1、普通事件，如click、resize等
2、资源加载，如load、error等
3、定时器，包括setInterval、setTimeout等
异步任务相关添加到任务队列中（任务队列也称为消息队列）。
1.先执行执行栈中的同步任务。
2.异步任务放入任务队列中。
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop)
location对象
location的数据类型是对象，它拆分并保存了URL地址的各个组成部分
常用属性和方法：
- href属性获取完整的URL地址，对其赋值时用于地址的跳转
//可以得到当前文件URL地址
console.log(location.href)
// 可以通过js方式跳转到目标地址
location.href = 'http://www.itcast.cn’
- search 属性获取地址中携带的参数，符号？后面部分
console.log(location.search)
- hash 属性获取地址中的哈希值，符号#后面部分
console.log(location.hash)
- reload 方法用来刷新当前页面，传入参数true时表示强制刷新
<button>点击刷新</button>
<script>
let btn = document.querySelector('button')btn.addEventListener('click', function (){location.reload(true)
//强制刷新 类似 ctrl + f5
})
</script>
navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
通过userAgent检测浏览器的版本及平台
history对象
history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性和方法：
| history对象方法 | 作用 |
|---|---|
| back() | 可以后退功能 |
| forward（) | 前进功能 |
| go(参数) | 前进后退功能 参数如果是1前进1个页面如果是-1后退1个页面 |
<button>后退</button>
<button>前进</button>
<script>
const back = document.querySelector('button:first-child')
const forward = back.nextElementSibling
back.addEventListener('click'，function (){
// 后退一步
history.back()
})
forward.addEventListener('click'， function (){
//前进一步
history.forward()
})
</script>
可以通过js方式跳转到目标地址
location.href = 'http://www.itcast.cn’
- search 属性获取地址中携带的参数，符号？后面部分
console.log(location.search)
- hash 属性获取地址中的哈希值，符号#后面部分
console.log(location.hash)
- reload 方法用来刷新当前页面，传入参数true时表示强制刷新
```html
<button>点击刷新</button>
<script>
let btn = document.querySelector('button')btn.addEventListener('click', function (){location.reload(true)
//强制刷新 类似 ctrl + f5
})
</script>
navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
通过userAgent检测浏览器的版本及平台
[外链图片转存中…(img-YEbaAKAl-1684505622660)]
history对象
history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性和方法：
| history对象方法 | 作用 |
|---|---|
| back() | 可以后退功能 |
| forward（) | 前进功能 |
| go(参数) | 前进后退功能 参数如果是1前进1个页面如果是-1后退1个页面 |
<button>后退</button>
<button>前进</button>
<script>
const back = document.querySelector('button:first-child')
const forward = back.nextElementSibling
back.addEventListener('click'，function (){
// 后退一步
history.back()
})
forward.addEventListener('click'， function (){
//前进一步
history.forward()
})
</script>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
