Web Api
# Web APIs - 第1天笔记
> 掌握DOM属性操作，完成元素内容设置，元素属性设置，控制元素样式
- DOM简介
- 获取DOM元素
- 操作元素内容
- 操作元素属性
- 定时器-间隔函数
- 综合案例
| 描述 | 属性/方法 | 效果 |
| --------------------------- | --------------------------------- | ---------------------------- |
| 获取DOM对象 | document.querySelector() | 获取指定的第一个元素 |
| document.querySelectorAll() | 获取指定的所有元素 | |
| 操作元素内容 | 元素.innerText | 操作元素内容，不解析标签 |
| 元素.innerHTML | 操作元素内容，解析标签 | |
| 操作元素样式 | 元素.style.width | 通过style操作样式 |
| 元素.className | 通过类名操作样式 | |
| 元素.classList.add() | 增加类名 | |
| 元素.classList.remove() | 删除类名 | |
| 元素.classList.toggle() | 切换类名 | |
| 间隔函数 | setInterval(function() {}, 1000) | 定时器，每隔指定时间重复执行 |
## 课程介绍
> web APIs 作用： JavaScript 去操作页面文档和浏览器
### 什么是 API
API: 应用程序接口（Application Programming Interface）
接口：无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能
## DOM简介
**DOM**（Document Object Model——文档对象模型）
**作用：**DOM用来 操作网页文档，开发网页特效和实现用户交互
DOM的核心思想就是把网页内容当做**对象**来处理，通过对象的属性和方法对网页内容操作
### document 对象
是 DOM 里提供的一个对象，是DOM顶级对象
作为网页内容的入口
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
## 获取DOM对象
### 利用css选择器来获取DOM元素
**语法：**
~~~javascript
const box = document.querySelector('div')
~~~
**参数: **
包含一个或多个有效的CSS选择器 字符串
**返回值：**
CSS选择器匹配的第一个元素对象
如果没有匹配到，则返回 null
~~~javascript
// 利用css选择器来获取DOM元素
// 1. document.querySelector() 选择指定css选择器的第一个元素
// 1.1 参数是字符串的css选择器
const box = document.querySelector('div')
console.log(box)
// 1.2 返回值是dom对象
console.log(typeof box) // object
console.dir(box)
const box = document.querySelector('.box')
console.log(box)
const li = document.querySelector('ol li')
console.log(li) // 只选择满足条件的第一个元素li
const li = document.querySelector('ol li:nth-child(2)')
console.log(li) // 选择第2个小li
// 1.3 如果获取不到则返回 null
const p = document.querySelector('p')
console.log(p) // null
~~~
### 选择指定css选择器的所有元素
**语法：**
~~~javascript
const lis = document.querySelectorAll('.nav li')
~~~
**参数:**
包含一个或多个有效的CSS选择器 字符串
**返回值：**
CSS选择器匹配的NodeList 伪数组
~~~javascript
// 2. document.querySelectorAll() 选择指定css选择器的所有元素
// 2.1 参数还是字符串的css选择器
const lis = document.querySelectorAll('.nav li')
// 2.2 返回值是一个伪数组里面包含了所有的dom对象 li
console.log(lis)
// 2.3 伪数组
// (1) 有长度和索引号
// (2) 没有数组的一些常用方法 比如 push pop splice等方法
// lis.push(1)
// console.log(lis) // 因为lis是伪数组无法使用push方法所以报错
// 2.4 利用循环遍历伪数组得到里面的每一个元素对象
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]) // 里面的每一个元素对象
}
// 2.5 即使只有1个元素，我们querySelectorAll 获得的也是一个伪数组，里面只有1个元素而已
const boxs = document.querySelectorAll('.box')
console.log(boxs)
~~~
### 其他方式(了解)
| 语法 | 实例 | 描述 |
| ---------------------- | -------------------------------------- | ------------------------------ |
| getElementById | document.getElementById('box') | 根据id获取元素，单个元素 |
| getElementsByTagName | document.getElementsByTagName('li') | 根据标签名获取元素，伪数组 |
| getElementsByClassName | document.getElementsByClassName('one') | 根据类名获取元素，伪数组 |
| getElementsByName | document.getElementsByName('sex') | 根据name属性值获取元素，伪数组 |
```javascript
// 1. getElementById 根据id获取
const box = document.getElementById('box')
console.log(box)
// 2. getElementsByClassName 根据类名获取 返回伪数组
const items = document.getElementsByClassName('item')
console.log(items)
// 3. getElementsByTagName 根据标签名获取 返回伪数组
const ps = document.getElementsByTagName('p')
console.log(ps)
// 4. getElementsByName 根据name属性获取 返回伪数组
const inputs = document.getElementsByName('username')
console.log(inputs)
```
## 操作元素内容
DOM对象可以操作页面标签，所以本质上就是操作DOM对象（增删改查）
如果想要操作标签元素的内容，则可以使用如下2种方式：
1.对象.innerText 属性
2.对象.innerHTML 属性
### innerText
1. `innerText` 将文本内容添加/更新到任意标签位置，**文本中包含的标签不会被解析。**
```html
<script>
// 操作DOM元素内容
// 1. 对象.innerText 增删改查
// 1.1 查
console.log(box.innerText) // 古丽扎娜
// 1.2 改
box.innerText = '迪丽热巴'
// 1.3 增
const box1 = document.querySelector('.box1')
console.log(box1)
box1.innerText = '佟丽丫丫'
// 1.4 删 给空字符串可以删除内容
box.innerText = ''
box1.innerText = ''
</script>
```
### innerHTML
1. `innerHTML` 将文本内容添加/更新到任意标签位置，**文本中包含的标签会被解析。**
```html
<script>
// 2. 对象.innerHTML 会解析标签
box.innerHTML = '<strong>迪丽热巴</strong>'
</script>
```
总结：如果文本内容中包含 `html` 标签时推荐使用 `innerHTML`，否则建议使用 `innerText` 属性。
### 年会抽奖案例
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>年会抽奖</title>
<style>
.wrapper {
width: 840px;
height: 420px;
background: url(./images/bg01.jpg) no-repeat center / cover;
padding: 100px 250px;
box-sizing: border-box;
}
.wrapper span {
color: #b10e0d;
}
</style>
</head>
<body>
<div class="wrapper">
<strong>年会抽奖</strong>
<h1>一等奖：<span class="one">???</span></h1>
<h3>二等奖：<span class="two">???</span></h3>
<h5>三等奖：<span class="three">???</span></h5>
</div>
<script>
// 数组
const arr = ['迪丽热巴', '古丽扎娜', '佟丽丫丫', '马尔扎哈']
// 1. 一等奖的做法
// 1.1 利用随机数选取数组中的名字
const random = Math.floor(Math.random() * arr.length)
console.log(random) // 0 ~ 3 之间的随机整数
console.log(arr[random]) // 随机名字
// 1.2 把名字放入对应的盒子里面 span
const one = document.querySelector('.one')
one.innerText = arr[random]
// 1.3 不允许重复抽奖，所以要把刚才选出来的名字从数组中删除
// arr.splice(随机数, 1) // 可以删除刚才抽取的名字
arr.splice(random, 1)
console.log(arr)
// 2. 二等奖的做法
// 2.1 利用随机数选取数组中的名字
const random2 = Math.floor(Math.random() * arr.length)
console.log(arr[random2]) // 数组里面的名字
// 2.2 把名字放入对应的盒子里面 span
const two = document.querySelector('.two')
two.innerText = arr[random2]
// 2.3 不允许重复抽奖，所以要把刚才选出来的名字从数组中删除
arr.splice(random2, 1)
console.log(arr)
// 3. 三等奖的做法
// 3.1 利用随机数选取数组中的名字
const random3 = Math.floor(Math.random() * arr.length)
console.log(arr[random3]) // 数组里面的名字
// 3.2 把名字放入对应的盒子里面 span
const three = document.querySelector('.three')
three.innerText = arr[random3]
// 3.3 不允许重复抽奖，所以要把刚才选出来的名字从数组中删除
arr.splice(random3, 1)
console.log(arr)
</script>
</body>
</html>
~~~
##操作元素属性
1. 操作元素常用属性
2. 操作元素样式属性
3. 操作 表单元素 属性
4. 自定义属性
### 常用属性修改
可以通过DOM操作元素属性，比如通过 src 更换 图片地址
最常见的属性比如：` href`、`title`、`src` 等等
1. 直接能过属性名修改，最简洁的语法
```html
<script>
// 1. 先获取这个元素
const img = document.querySelector('img')
// 2. 操作DOM元素常见属性
// 2.1 查
console.log(img.src)
// 2.2 改
img.src = './images/3.png'
// 2.3 增
img.title = '我是播仔，我是不是很可爱'
// 2.4 删
img.alt = ''
</script>
```
**随机背景案例**
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机显示图片案例</title>
<style>
img {
width: 600px;
}
</style>
</head>
<body>
<img src="./images/1.png" alt="">
<script>
// 随机显示图片案例
// 图片地址
const arr = [
'./images/1.png',
'./images/2.png',
'./images/3.png',
'./images/4.png'
]
// 获取图片元素
const img = document.querySelector('img')
// 1. 利用随机数抽取数组中的一个地址
const random = Math.floor(Math.random() * arr.length)
console.log(arr[random]) // 得到图片地址
// 2. 把地址赋值给图片src属性
img.src = arr[random]
</script>
</body>
</html>
~~~
### 操作样式属性
还可以通过 DOM对象修改标签元素的样式属性
- 比如通过 轮播图小圆点自动更换颜色 样式
- 点击按钮可以滚动图片，这是移动的的位置 translateX 等等
#### 通过 style 属性操作元素样式
```html
<script>
// 通过style操作元素样式
// 1. 先要获取这个box元素对象
const box = document.querySelector('.box')
// 2. 通过style来从操作样式
box.style.width = '300px'
box.style.marginTop = '50px'
box.style.backgroundColor = 'skyblue'
// 3. 注意事项
// 3.1 给样式赋值的时候，千万不要忘了加单位比如 300px
// 3.2 如果有-的样式，我们采取的是小驼峰命名法比如 marginTop
// 3.3 一定不要忘了加 style 属性
</script>
```
>**注意：**
>
>1.修改样式通过style属性引出
>
>2.如果属性有-连接符，需要转换为小驼峰命名法
>
>3.赋值的时候，需要的时候不要忘记加css单位
#### 操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
**核心：**把多个样式放到css一个类中，然后把这个类添加到这个元素身上
**语法：**
~~~html
<script>
// 通过类名操作元素样式
// 1. 获取box盒子
const box = document.querySelector('.box')
// 2. 利用类名操作元素样式
// box.className = 'circle'
box.className = 'box circle'
// 3. 利用类名操作样式添加的新的类名会覆盖掉原先的类名
</script>
~~~
>注意：
>
>1.由于class是关键字, 所以使用className去代替
>
>2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
#### 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
~~~html
<script>
// 1. 获取box盒子
const box = document.querySelector('.box')
// 2.通过classList操作元素样式(推荐)
// 2.1 追加类名
// box.classList.add('circle')
// 2.2 删除类名
// box.classList.remove('box')
// 2.3 切换类名： 如果元素身上有这个类名，那么就删除，如果没有这个类名则添加
box.classList.toggle('circle')
</script>
~~~
### 操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别
>**获取:** DOM对象.属性
>
>**设置:** DOM对象.属性= 新值
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示
比如实现禁用按钮，勾选按钮等
如果为 `true` 代表添加了该属性
如果是 `false` 代表移除了该属性
比如： `disabled`、`checked`、`selected`
~~~html
<script>
// 操作表单属性
// 1. 操作表单 type 和 value 属性
// 1.1 修改type属性
const username = document.querySelector('[name=username]')
console.log(username)
// username.type = 'password'
// 1.2 操作表单的 value 属性
// console.log(username.value) // 查
// username.value = '用户名试试' // 增
// username.value = '请输入用户名' // 改
// username.value = '' // 删
// 2. 禁用按钮或者是勾选复选框 布尔型
// 2.1 禁用按钮
const button = document.querySelector('button')
// button.disabled = true // true 是禁用
button.disabled = false // false 是不禁用
// 2.2 勾选复选框
const agree = document.querySelector('[name=agree]')
console.log(agree)
// agree.checked = true // true 是选中复选框
agree.checked = false // flase 是不选中复选框
</script>
~~~
### 自定义属性（重要）
**标准属性:** 标签天生自带的属性 比如class、id、title等, 可以直接使用点语法操作比如：`对象.title`
**自定义属性：**
- 在html5中推出来了专门的data-自定义属性
- 使用场景：通过自定义属性可以存储数据，后期可以使用这个数据
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
~~~html
<script>
// 自定义属性
// 1. 获取盒子
const box = document.querySelector('.box')
// 2. 得到自定义属性值
// console.log(box.dataset) // 得到一个对象集合
// console.log(box.dataset.id) // 1
// console.log(box.dataset) // 得到一个对象集合
console.log(box.dataset.name) // box
</script>
~~~
## 定时器-间隔函数
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的`倒计时`
要实现这种需求，需要`定时器函数`
定时器函数有两种: `间隔函数`和 延迟函数
`setInterval` 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
### 开启定时器:
**语法**
```html
<script>
setInterval(function () {
console.log('我是1秒钟执行一次')
}, 1000)
</script>
```
**作用：**每隔一段时间调用这个函数
**注意：**间隔时间单位是毫秒
### 关闭定时器
需要定时器`变量名`来关闭
返回的是一个唯一的`数字`
~~~html
<script>
let timer = setInterval(repeat, 1000) // 注意调用的时候直接写函数名字不需要写小括号
console.log(timer) // 1
let timer1 = setInterval(repeat, 1000) // 注意调用的时候直接写函数名字不需要写小括号
console.log(timer1) // 2
// 2. 关闭定时器
clearInterval(timer)
</script>
~~~
# Web APIs -第二天笔记
> 掌握事件绑定处理和事件对象，完成常见网页交互
- 事件监听
- 事件类型
- 事件对象
- 拓展知识
- 综合案例
## 事件监听
以前写的代码都是自动执行的，我们希望一段代码在某个特定的时机才去执行，比如
- 点击按钮可以弹出警示框
- 比如鼠标经过显示下拉菜单等等
### 事件
事件是程序在运行的时候，发生的特定动作或者特定的事情
- 比如`点击`按钮、
- 比如`鼠标经过`菜单等等
通常，当事件发生时，可以做些事情
- 比如点击按钮，可以 `弹出警示框`
- 比如鼠标经过某个盒子，可以`显示下拉菜单`
### 事件监听
事件发生后，想要执行的代码写到`事件处理函数`里面
- 当触发指定的事件时，则事件处理函数就会被执行
- 事件监听是将事件处理函数注册到元素对象身上
- 事件监听也称为: 事件注册、事件绑定
**语法：**
```JavaScript
元素对象.addEventListener('事件类型', 事件处理函数)
```
事件监听三要素
- 事件源(谁被触发了)
- 事件类型 (什么情况下触发，点击还是鼠标经过等)
- 事件处理函数（要做什么事情）
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件监听</title>
</head>
<body>
<button class="btn">唐伯虎</button>
<script>
// 需求： 点击button按钮，页面会弹出一个警示框，内容显示 '秋香'
// 事件监听语法:
// 元素对象.addEventListener('事件类型', 事件处理函数)
// 1. 获取元素对象 button按钮
const btn = document.querySelector('.btn')
// 2. 事件监听
btn.addEventListener('click', function () {
alert('秋香')
})
</script>
</body>
</html>
~~~
>**注意：**
>
>1.事件类型要加引号，小写
>
>2.函数是点击之后再去执行，每次点击都会执行一次
### 回调函数
**回调函数:**当一个函数当做`参数`来传递给另外一个函数的时候，这个函数就是回调函数（`回头调用`的函数）
**作用：**完成某些特定任务
~~~html
<script>
// 1. 定时器间隔函数，里面第一个参数又是函数，这个匿名函数就是回调函数
setInterval(function () {
console.log('我是回调函数')
}, 1000)
// 2. addEventListener 函数的第二个参数也是函数，这个匿名函数也是回调函数
btn.addEventListener('click', function () {
console.log('我是回调函数')
})
</script>
~~~
### 事件监听版本
1. DOM0 事件
事件源.on事件类型 = function() { }
~~~javascript
btn.onclick = function () {
alert('我是弹窗1')
}
~~~
2. DOM 2事件
事件源.addEventListener(事件类型，事件处理函数)
~~~javascript
btn.addEventListener('click', function () {
console.log('我是回调函数')
})
~~~
>**区别：**
>
>on 方式同名事件会被覆盖，addEventListener则不会，同时拥有事件更多特性，推荐使用
## 事件类型
将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。
事件类型的大小写敏感的字符串，统一用小写字母
### 鼠标事件
鼠标事件是指跟鼠标操作相关的事件，如单击、经过等。
```html
<body>
<div class="box"></div>
<script>
// 鼠标事件类型
const box = document.querySelector('.box')
// 1. 鼠标点击
box.addEventListener('click', function () {
console.log('我点击了盒子')
})
// 2. 鼠标经过
box.addEventListener('mouseenter', function () {
console.log('我鼠标经过了盒子')
})
// 3. 鼠标离开
box.addEventListener('mouseleave', function () {
console.log('我鼠标离开了盒子')
})
</script>
</body>
```
### 焦点事件
主要是针对于表单是否获得光标的事件， 获得焦点 focus 、失去焦点 blur
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点事件</title>
<style>
[type=text] {
width: 245px;
height: 50px;
padding-left: 20px;
border: 1px solid #ccc;
font-size: 17px;
outline: none;
}
</style>
</head>
<body>
<input type="text" class="search-text">
<input type="text" class="search">
<script>
// 1. 焦点事件(手动触发)
const search_text = document.querySelector('.search-text')
// 1.1 获得焦点 focus
search_text.addEventListener('focus', function () {
console.log('获得了焦点')
})
// 1.2 失去焦点 blur
search_text.addEventListener('blur', function () {
console.log('失去了焦点')
})
// 2. 拓展 自动获得焦点 focus() 自动失去焦点 blur()
// 2.1 语法: 元素.focus() 比如百度首页搜索框自动获得焦点
const search = document.querySelector('.search')
search.focus()
</script>
</body>
</html>
~~~
### 键盘事件和 input事件
| 事件 | 触发时机 | 得到表单值 |
| ------- | ----------------------- | --------------------- |
| keydown | 按下键盘时触发 | 不带最后一次按键值 ab |
| keyup | 弹起键盘时触发 | 输入内容 abc |
| input | 表单value发生变化时触发 | 输入内容 abc |
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input事件和键盘事件</title>
<style>
textarea {
width: 300px;
height: 30px;
padding: 10px;
border-color: transparent;
outline: none;
resize: none;
background: #f5f5f5;
border-radius: 4px;
}
</style>
</head>
<body>
<textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
<script>
// 获取元素
const tx = document.querySelector('#tx')
// 1. 键盘事件
// 1.1 键盘按下事件 keydown 当我们按下键盘的时候就触发
tx.addEventListener('keydown', function () {
console.log('我是keydown事件' + tx.value)
})
// 1.2 键盘弹起事件 keyup 当我们键盘弹起的时候就触发
tx.addEventListener('keyup', function () {
console.log('我是keyup事件' + tx.value)
})
// 2. 用户输入事件 input ，是表单value的值发生变化的时候触发
tx.addEventListener('input', function () {
console.log('我是input事件' + tx.value)
})
// 3. 注意事项
// 3.1 执行顺序 keydown → input → keyup
// 3.2 keydown 获取值的时候得不到最后一次按键的值， keyup和input可以得到用户输入内容
</script>
</body>
</html>
~~~
>**注意事项**
>
>1. 执行顺序 keydown → input → keyup
>2. keydown 获取值的时候得不到最后一次按键的值， keyup和input可以得到用户输入内容
## 事件对象
**事件对象是什么？ **
- 也是个对象，这个对象里有事件触发时的相关信息，包含属性和方法
- 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
**使用场景**
- 可以判断用户按下哪个键，比如按下回车键可以发布新闻
- 可以判断鼠标点击了哪个元素，从而做相应的操作
```html
<body>
<div class="box"></div>
<textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
<script>
// 事件对象
const box = document.querySelector('.box')
box.addEventListener('click', function (e) {
console.log(e)
})
const tx = document.querySelector('#tx')
tx.addEventListener('keyup', function (e) {
// e 就是事件对象
// console.log(e)
// console.log(e.key) // a
// 用户如果按下的是回车键，则弹出框提示按下了回车键
if (e.key === 'Enter') {
alert('您按下了回车键')
}
})
</script>
</body>
```
事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 `event`、`ev` 、`ev` 。
| **属性** | 类型 | 说明 |
| -------- | ------------ | ------------ |
| altKey | boolean | 事件发生时，是否按下alt按键 |
| ctrlKey | boolean | 事件发生时，是否按下ctrl按键 |
| shiftKey | boolean | 事件发生时，是否按下shift按键 |
| offsetX | number | 事件发生时，鼠标相对于事件源的x坐标 |
| offsetY | number | 事件发生时，鼠标相对于事件源的y坐标 |
| target | object | 事件源对象 |
| pageX | number | 事件发生时，鼠标相对于网页的x坐标 |
| pageY | number | 事件发生时，鼠标相对于网页的y坐标 |
| clientX | number | 事件发生时，鼠标相对于视口的x坐标 |
| clienty | number | 事件发生时，鼠标相对于视口的y坐标 |
| key | string | 如果是键盘相关事件，则事件对象中包含该属性，表示键盘事件发生时，按下的是什么键。"Enter'回车键 |
## 环境对象
> 能够分析判断函数运行在不同环境中 this 所指代的对象。
**环境对象：**指的是函数内部特殊的 this, 它指向一个对象，并且受当前环境影响
**作用：**弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this 指代的对象也不同
- 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
```html
<body>
<button>点击</button>
<script>
// 环境对象 this 粗略规则： 谁调用函数，this就指向谁
// 1. 全局环境
// console.log(this) // this 指向 window 全局对象
// 2. 普通函数
function fn() {
console.log(this) // this 指向 window 全局对象
}
window.fn()
// 3. 对象方法
const obj = {
uname: '佩奇',
sing: function () {
console.log(this) // this 指向 obj对象
}
}
obj.sing()
// 4. 事件
const btn1 = document.querySelector('button')
btn1.addEventListener('click', function () {
// console.log(this) // this 指向 btn 这个对象
// btn1.style.backgroundColor = 'pink'
this.style.backgroundColor = 'pink'
})
</script>
</body>
```
## 排他思想
是一种思路，目的是突出显示某个元素
比如，有多个元素，当鼠标经过时，只有当前元素会添加高亮样式，其余的元素移除样式
口诀：注意顺序
①：排除其他人
②：保留我自己