元素。 |
| [:active](https://www.w3school.com.cn/cssref/selector_active.asp) | a:active | 选择活动链接。 |
| [::after](https://www.w3school.com.cn/cssref/selector_after.asp) | p::after | 在每个 的内容之后插入内容。 |
| [::before](https://www.w3school.com.cn/cssref/selector_before.asp) | p::before | 在每个
的内容之前插入内容。 |
| [:checked](https://www.w3school.com.cn/cssref/selector_checked.asp) | input:checked | 选择每个被选中的 元素。 |
| [:default](https://www.w3school.com.cn/cssref/selector_default.asp) | input:default | 选择默认的 元素。 |
| [:disabled](https://www.w3school.com.cn/cssref/selector_disabled.asp) | input:disabled | 选择每个被禁用的 元素。 |
| [:empty](https://www.w3school.com.cn/cssref/selector_empty.asp) | p:empty | 选择没有子元素的每个
元素（包括文本节点）。 |
| [:enabled](https://www.w3school.com.cn/cssref/selector_enabled.asp) | input:enabled | 选择每个启用的 元素。 |
| [:first-child](https://www.w3school.com.cn/cssref/selector_first-child.asp) | p:first-child | 选择属于父元素的第一个子元素的每个
元素。 |
| [::first-letter](https://www.w3school.com.cn/cssref/selector_first-letter.asp) | p::first-letter | 选择每个
元素的首字母。 |
| [::first-line](https://www.w3school.com.cn/cssref/selector_first-line.asp) | p::first-line | 选择每个
元素的首行。 |
| [:first-of-type](https://www.w3school.com.cn/cssref/selector_first-of-type.asp) | p:first-of-type | 选择属于其父元素的首个
元素的每个
元素。 |
| [:focus](https://www.w3school.com.cn/cssref/selector_focus.asp) | input:focus | 选择获得焦点的 input 元素。 |
| [:fullscreen](https://www.w3school.com.cn/cssref/selector_fullscreen.asp) | :fullscreen | 选择处于全屏模式的元素。 |
| [:hover](https://www.w3school.com.cn/cssref/selector_hover.asp) | a:hover | 选择鼠标指针位于其上的链接。 |
| [:in-range](https://www.w3school.com.cn/cssref/selector_in-range.asp) | input:in-range | 选择其值在指定范围内的 input 元素。 |
| [:indeterminate](https://www.w3school.com.cn/cssref/selector_indeterminate.asp) | input:indeterminate | 选择处于不确定状态的 input 元素。 |
| [:invalid](https://www.w3school.com.cn/cssref/selector_invalid.asp) | input:invalid | 选择具有无效值的所有 input 元素。 |
| [:lang(*language*)](https://www.w3school.com.cn/cssref/selector_lang.asp) | p:lang(it) | 选择 lang 属性等于 "it"（意大利）的每个
元素。 |
| [:last-child](https://www.w3school.com.cn/cssref/selector_last-child.asp) | p:last-child | 选择属于其父元素最后一个子元素每个
元素。 |
| [:last-of-type](https://www.w3school.com.cn/cssref/selector_last-of-type.asp) | p:last-of-type | 选择属于其父元素的最后
元素的每个
元素。 |
| [:link](https://www.w3school.com.cn/cssref/selector_link.asp) | a:link | 选择所有未访问过的链接。 |
| [:not(*selector*)](https://www.w3school.com.cn/cssref/selector_not.asp) | :not(p) | 选择非
元素的每个元素。 |
| [:nth-child(*n*)](https://www.w3school.com.cn/cssref/selector_nth-child.asp) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个
元素。 |
| [:nth-last-child(*n*)](https://www.w3school.com.cn/cssref/selector_nth-last-child.asp) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 |
| [:nth-of-type(*n*)](https://www.w3school.com.cn/cssref/selector_nth-of-type.asp) | p:nth-of-type(2) | 选择属于其父元素第二个
元素的每个
元素。 |
| [:nth-last-of-type(*n*)](https://www.w3school.com.cn/cssref/selector_nth-last-of-type.asp) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 |
| [:only-of-type](https://www.w3school.com.cn/cssref/selector_only-of-type.asp) | p:only-of-type | 选择属于其父元素唯一的
元素的每个
元素。 |
| [:only-child](https://www.w3school.com.cn/cssref/selector_only-child.asp) | p:only-child | 选择属于其父元素的唯一子元素的每个
元素。 |
| [:optional](https://www.w3school.com.cn/cssref/selector_optional.asp) | input:optional | 选择不带 "required" 属性的 input 元素。 |
| [:out-of-range](https://www.w3school.com.cn/cssref/selector_out-of-range.asp) | input:out-of-range | 选择值超出指定范围的 input 元素。 |
| [::placeholder](https://www.w3school.com.cn/cssref/selector_placeholder.asp) | input::placeholder | 选择已规定 "placeholder" 属性的 input 元素。 |
| [:read-only](https://www.w3school.com.cn/cssref/selector_read-only.asp) | input:read-only | 选择已规定 "readonly" 属性的 input 元素。 |
| [:read-write](https://www.w3school.com.cn/cssref/selector_read-write.asp) | input:read-write | 选择未规定 "readonly" 属性的 input 元素。 |
| [:required](https://www.w3school.com.cn/cssref/selector_required.asp) | input:required | 选择已规定 "required" 属性的 input 元素。 |
| [:root](https://www.w3school.com.cn/cssref/selector_root.asp) | :root | 选择文档的根元素。 |
| [::selection](https://www.w3school.com.cn/cssref/selector_selection.asp) | ::selection | 选择用户已选取的元素部分。 |
| [:target](https://www.w3school.com.cn/cssref/selector_target.asp) | #news:target | 选择当前活动的 #news 元素。 |
| [:valid](https://www.w3school.com.cn/cssref/selector_valid.asp) | input:valid | 选择带有有效值的所有 input 元素。 |
| [:visited](https://www.w3school.com.cn/cssref/selector_visited.asp) | a:visited | 选择所有已访问的链接。 |
## 2022-2-24
# js
预计花费10小时
## 1、JavaScript介绍
Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。
JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。
JS 是弱类型，Java 是强类型
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
## 2、变量
**JavaScript 的变量类型：**
数值类型： **number**
字符串类型： **string**
对象类型： **object**
布尔类型： **boolean**
函数类型： **function**
**JavaScript 里特殊的值：**
**undefined** 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.
**null** 空值
**NaN** 全称是：Not a Number。非数字。非数值。
## 3、逻辑运算
等于： **==** 等于是简单的做字面值的比较
全等于： **===** 除了做字面值的比较之外，还会比较两个变量的数据类型
且运算： **&&**
或运算： **||**
取反运算： **!**
> 在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
>
> **0 、null、 undefined、””(空串) 都认为是 false**；
**&& 且运算**
有两种情况：
1. 第一种：当表达式全为真的时候。返回最后一个表达式的值。
2. 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
**|| 或运算**
1. 第一种情况：当表达式全为假时，返回最后一个表达式的值
2. 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
**并且 && 与运算 和 ||或运算 有短路**
短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
## 4、数组
数组定义的方式
JS 中 数组的定义：
格式：
```javascript
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
```
## 5、函数
### 5.1、函数的定义
**第一种，可以使用** **function** **关键字来定义函数。**
```javascript
function 函数名(形参列表){
//函数体
}
```
> 在 JavaScript 语言中，如何定义带有返回值的函数？
>
> 只需要在函数体内直接使用 return 语句返回值即可！
**函数的第二种定义方式，格式如下：**
```js
var 函数名 = function(形参列表) { //函数体 }
```
> 注：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义
### 5.2、函数的 arguments 隐形参数（只在function函数内）
就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
`public void fun( Object ... args ); `
可变长参数其他是一个数组。
那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。
#### 常见的 HTML 事件
下面是一些常见的 HTML 事件：
| 事件 | 描述 |
| :---------- | :--------------------------- |
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
## 6、DOM模型
DOM 全称是 Document Object Model 文档对象模型
就是把文档中的标签，属性，文本，转换成为对象来管理。
### 6.1、Document对象
Document对象的理解：
- 第一点：Document它管理了所有的HTML文档内容。
- 第二点：document它是一种树结构的文档。有层级关系。
- 第三点：它让我们把所有的标签 都 对象化
- 第四点：我们可以通过document访问所有的标签对象。
### 6.2、Document对象中的方法
#### 查找 HTML 元素
| 方法 | 描述 |
| :-------------------------------------- | :--------------------- |
| document.getElementById(*id*) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(*name*) | 通过标签名来查找元素 |
| document.getElementsByClassName(*name*) | 通过类名来查找元素 |
>document 对象的三个查询方法，如果有 id 属性，优先使用 **getElementById** 方法来进行查询
>
>如果没有 id 属性，则优先使用 **getElementsByName** 方法来进行查询
>
>如果 id 属性和 name 属性都没有最后再按标签名查 **getElementsByTagName**
#### 改变 HTML 元素
| 方法 | 描述 |
| :----------------------------------------- | :--------------------- |
| element.innerHTML = *new html content* | 改变元素的 inner HTML |
| element.attribute = *new value* | 改变 HTML 元素的属性值 |
| element.setAttribute(*attribute*, *value*) | 改变 HTML 元素的属性值 |
| element.style.property = *new style* | 改变 HTML 元素的样式 |
#### 添加和删除元素
| 方法 | 描述 |
| :-------------------------------- | :--------------- |
| document.createElement(*element*) | 创建 HTML 元素 |
| document.removeChild(*element*) | 删除 HTML 元素 |
| document.appendChild(*element*) | 添加 HTML 元素 |
| document.replaceChild(*element*) | 替换 HTML 元素 |
| document.write(*text*) | 写入 HTML 输出流 |
#### 添加事件处理程序
| 方法 | 描述 |
| :------------------------------------------------------- | :------------------------------ |
| document.getElementById(id).onclick = function(){*code*} | 向 onclick 事件添加事件处理程序 |
#### 查找 HTML 对象
首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。
后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。
| 属性 | 描述 | DOM |
| :--------------------------- | :------------------------------------------ | :--- |
| document.anchors | 返回拥有 name 属性的所有 元素。 | 1 |
| document.applets | 返回所有