前端最全知识图谱

前端知识图谱

元素选择器

ID选择器

类选择器

属性选择器

通配符选择器

分组选择器

动态伪类选择器

目标伪类选择器

语言伪类选择器

UI元素状态伪类选择器

结构伪类选择器

伪类选择器

基本选择器

选择器

事件绑定

事件触发

事件对象

事件冒泡

事件委托

事件

隐藏和显示

淡入淡出

滑动效果

动画效果

停止动画

效果

文档操作

属性操作

样式操作

内容操作

表单操作

操作

load方法

get方法

post方法

getJSON方法

ajax方法

AJAX

插件的引入

插件的使用

插件

DOM操作函数

事件操作函数

效果操作函数

AJAX操作函数

工具函数

noConflict方法

jQuery对象和DOM对象的转换

其他

jQuery

React

Vue是一套用于构建用户界面的渐进式框架

Vue的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合

Vue也可以通过完整的解决方案，提供更多的高级功能，如：路由、状态管理、构建工具等

介绍

响应式

组件化

轻量级

易于学习

灵活性高

性能高

特点

模板语法

计算属性

侦听器

方法

Class与Style绑定

条件渲染

列表渲染

表单输入绑定

组件基础

基础

自定义指令

混入

过渡效果

渲染函数

JSX

服务端渲染

单元测试

进阶

VueRouter

Vuex

Axios

ElementUI

Vuetify

MintUI

iView

AntDesignVue

Nuxt.js

生态

项目实战

常见问题

优化建议

实战

Vue

Angular

框架

编辑器

构建工具

调试工具

性能优化工具

测试工具

版本控制工具

工具

块级标签

行内标签

空标签

表单标签

标签

全局属性

事件属性

表单属性

多媒体属性

元素属性

HTML

层次选择器

伪元素选择器

组合选择器

多重选择器

内容区域

内边距

边框

外边距

盒模型

浮动

定位

弹性布局

网格布局

布局

CSS

Number

String

Boolean

Null

Undefined

Symbol

基本数据类型

Object

Function

Array

Date

RegExp

Math

Set

Map

Promise

Proxy

Reflect

Error

JSON基本数据类型：存储在栈内存中，值不可变引用数据类型：存储在堆内存中，值可变，变量存储的是一个指向堆内存的地址Number：数字类型，包括整数和浮点数String：字符串类型，用单引号或双引号表示Boolean：布尔类型，true或falseNull：空类型，表示空对象指针Undefined：未定义类型，表示未初始化的变量Symbol：唯一标识符类型，ES6新增Object：对象类型，包括普通对象、数组、函数、正则等Function：函数类型，具有可执行代码的对象Array：数组类型，一组有序的数据集合Date：日期类型，表示时间RegExp：正则表达式类型，用于匹配字符串Math：数学类型，提供数学计算方法Set：集合类型，一组无序且唯一的数据集合Map：映射类型，一组键值对的数据集合Promise：异步编程的解决方案Proxy：代理类型，用于拦截并修改对象的默认行为Reflect：反射类型，提供拦截JavaScript引擎操作的方法Error：错误类型，表示运行时错误JSON：JavaScript对象表示法，用于数据交换和存储

引用数据类型

数据类型

JS运算符

流程控制

函数名和参数列表用括号括起来

函数体用花括号括起来

函数可以有返回值

函数可以不带参数

函数可以在声明前调用

函数可以在声明中间调用

函数可以在声明后调用

函数声明

函数赋值给变量

函数可以匿名

函数可以作为参数传递

函数可以作为返回值

函数可以自调用

函数表达式

更简洁的函数表达式

省略function关键字和return语句

自动绑定this

箭头函数

调用函数时，函数体内的代码会被执行

函数调用可以带参数

函数调用可以返回值

函数调用

函数内部创建的变量只有函数内部可见

函数外部无法访问函数内部的变量

函数内部可以访问函数外部的变量

函数作用域

函数内部的函数可以访问函数外部的变量

函数内部的函数可以被返回

函数内部的函数可以被赋值给变量

函数闭包

函数调用自身

可用于解决一些需要重复调用的问题

函数递归

函数可以接受函数作为参数

函数可以返回函数

函数高阶

函数可以作为对象的属性

函数可以通过对象调用

函数可以通过this关键字访问对象属性

函数可以用于构造函数

函数方法

将函数封装到模块中

模块可以导出函数

模块可以导出对象

模块可以导出变量

模块可以导入其他模块的内容

函数模块化

函数是一段可重复调用的代码块

函数

定义：JS对象是一种复合数据类型，可以将多个数据类型组合在一起形成一个对象

特点：对象由属性和方法组成，属性可以是基本类型或对象类型，方法是对象的函数

字面量方式：varobj={name:\"Tom\

构造函数方式：varobj=newObject();obj.name=\"Tom\";obj.age=18;

Object.create()方式：varobj=Object.create(null);obj.name=\"Tom\";obj.age=18;

创建对象的方式：

添加属性：obj.newProperty=value;

删除属性：deleteobj.property;

修改属性：obj.property=newValue;

查看属性：obj.property;

对象的属性操作：

添加方法：obj.newMethod=function(){...};

删除方法：deleteobj.method;

调用方法：obj.method();

对象的方法操作：

一级结构

内置对象：JS自带的对象，如：Math、Date、String等

宿主对象：由JS的运行环境提供的对象，如：浏览器提供的window、document等

自定义对象：由开发者自己创建的对象

对象的分类：

for...in循环：遍历对象的属性名

Object.keys()方法：返回对象的所有属性名组成的数组

Object.values()方法：返回对象的所有属性值组成的数组

Object.entries()方法：返回对象的所有属性名和属性值组成的二维数组

对象的遍历：

每个对象都有一个原型对象，可以通过__proto__属性访问

原型对象也是对象，也有自己的原型对象，形成原型链

原型链的顶端是Object.prototype对象

通过原型链，对象可以访问原型对象的属性和方法

对象的原型：

通过原型链实现继承，子类的原型对象指向父类的实例对象

子类可以访问父类原型对象的属性和方法，实现代码复用

对象的继承：

二级结构

对象

数组是一种数据结构，用于存储一组有序的数据

数组是一种引用类型，可以存储任意类型的数据

数组的长度可以动态改变

数组的定义

使用数组字面量创建

使用Array构造函数创建

使用Array.of()方法创建

使用Array.from()方法创建

数组的创建

length：数组的长度

数组的属性

push()：在数组末尾添加一个或多个元素

pop()：删除并返回数组的最后一个元素

shift()：删除并返回数组的第一个元素

unshift()：在数组开头添加一个或多个元素

splice()：从数组中添加或删除元素

slice()：返回数组的一个片段

concat()：连接两个或多个数组

join()：将数组中的所有元素连接成一个字符串

indexOf()：返回指定元素在数组中的位置

lastIndexOf()：返回指定元素在数组中最后出现的位置

reverse()：反转数组中元素的顺序

sort()：对数组中的元素进行排序

forEach()：对数组中的每个元素执行一次指定的函数

map()：对数组中的每个元素执行一次指定的函数，并返回一个新数组

filter()：对数组中的每个元素执行一次指定的函数，并返回一个新数组，该数组只包含符合条件的元素

reduce()：对数组中的每个元素执行一次指定的函数，并将结果汇总为一个值

reduceRight()：对数组中的每个元素执行一次指定的函数，并将结果汇总为一个值，从右向左遍历数组

find()：返回数组中第一个符合条件的元素

findIndex()：返回数组中第一个符合条件的元素的位置

every()：检查数组中的所有元素是否符合条件

some()：检查数组中是否存在符合条件的元素

includes()：检查数组中是否包含指定元素

数组的方法

JS数组可以是多维的，即数组中的元素也可以是数组

多维数组可以用嵌套的方式表示

多维数组的访问方式与一维数组类似，只需使用多个索引即可

多维数组

数组

转义字符

特殊字符

预定义字符类

自定义字符类

字符类

贪婪模式

非贪婪模式

量词符号

元字符

捕获组

非捕获组

分组

竖线符号

分支结构

基础知识

前后查找

零宽度断言

模式修饰符

分组引用

反向引用

嵌入代码

回溯控制

高级应用

在线工具

开发工具

正则表达式库

常用工具

正则表达式

getElementById()

getElementsByTagName()

getElementsByClassName()

querySelector()

querySelectorAll()

查询元素

createElement()

createTextNode()

创建元素

appendChild()

removeChild()

replaceChild()

添加、删除、替换元素

getAttribute()

setAttribute()

removeAttribute()

修改元素属性

style.property

className

修改元素样式

innerHTML

innerText

修改元素内容

addEventListener()

removeEventListener()

事件操作

parentNode

childNodes

firstChild

lastChild

nextSibling

previousSibling

遍历DOM树

DOM操作

Ajax（AsynchronousJavaScriptandXML）是一种在Web页面中实现异步通信的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。

这意味着可以在不重新加载整个页面的情况下更新部分页面。

减轻服务器负载

提高用户体验

减少网络带宽的使用

提高Web应用程序的交互性和可用性

优点

不支持浏览器的回退功能

搜索引擎的爬虫程序无法很好地处理Ajax生成的内容

需要JavaScript支持

缺点

创建XMLHttpRequest对象

发送请求

服务器端处理请求

接收服务器端响应

更新页面内容

实现步骤

表单验证

搜索提示

无限滚动

购物车实时更新

即时聊天

应用场景

Prototype

Dojo

MooTools

YUI

ExtJS

Backbone.js

AngularJS

Vue.js

常用框架

Ajax

鼠标事件

键盘事件

表单事件

窗口事件

文档事件

媒体事件

拖放事件

触摸事件

手势事件

事件类型

HTML事件处理程序

DOM0级事件处理程序

DOM2级事件处理程序

addEventListener()方法

attachEvent()方法

事件处理程序

属性

事件捕获

DOM事件流

事件流

点击事件

鼠标移动事件

常见应用

字符串是由一串字符组成的，可以包含字母、数字、符号和空格等

字符串的定义

可以通过单引号、双引号、反引号创建字符串

反斜杠可以用来转义特殊字符

字符串的创建

返回字符串的长度

长度

lower()将字符串中的大写字母转换为小写字母

upper()将字符串中的小写字母转换为大写字母

大小写转换

find()查找字符串中是否包含指定的子字符串，返回子字符串第一次出现的位置，如果未找到则返回-1

index()查找字符串中是否包含指定的子字符串，返回子字符串第一次出现的位置，如果未找到则报错

count()统计字符串中指定子字符串出现的次数

查找

slice()通过指定开始和结束位置截取字符串中的一部分，返回截取后的子字符串

split()将字符串按照指定的分隔符分割成多个子字符串，返回子字符串数组

replace()将字符串中指定的子字符串替换成另一个字符串，返回替换后的字符串

截取

concat()将多个字符串连接成一个字符串

连接

format()将字符串中的占位符替换成指定的值，返回格式化后的字符串

格式化

startswith()判断字符串是否以指定的子字符串开头，返回布尔值

endswith()判断字符串是否以指定的子字符串结尾，返回布尔值

isalnum()判断字符串是否只包含字母和数字，返回布尔值

isalpha()判断字符串是否只包含字母，返回布尔值

isdigit()判断字符串是否只包含数字，返回布尔值

islower()判断字符串中所有字母是否都为小写字母，返回布尔值

isupper()判断字符串中所有字母是否都为大写字母，返回布尔值

isspace()判断字符串是否只包含空格，返回布尔值

判断

字符串的属性和方法

使用==和===进行比较

比较时，字符串按照Unicode编码进行比较

字符串的比较

在网页中，字符串常用于表单验证、动态生成HTML等方面

在Node.js中，字符串常用于文件读写、网络通信等方面

字符串的应用

字符串

JavaScript