借鉴诸多大佬文章，有链接，

Sass，Less

什么是Sass和Less？

Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。

转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

为什么要使用CSS预处理器？

CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。

CSS缺点：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。

CSS的好处

在于简便、随时随地被使用和调试。

CSS预处理器缺点

调试也变得更麻烦了。
更大的问题在于，预编译很容易造成后代选择器的滥用。

Sass和Less的比较

相同之处

Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

不同之处

1、Less环境较Sass简单
Cass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。

2、Less使用较Sass简单
LESS 并没有裁剪 CSS 原有的特性，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。只要你了解 CSS 基础就可以很容易上手。

3、从功能出发，Sass较Less略强大一些
①sass有变量和作用域。

$variable，like php；
#｛$variable｝like ruby；
变量有全局和局部之分，并且有优先级。

②sass有函数的概念；

@function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑，更多的是提高css代码段的复用性和模块化，这个用的人也是最多的。
-ruby提供了非常丰富的内置原生api。

③进程控制：
-条件：@if @else；
-循环遍历：@for @each @while
-继承：@extend
-引用：@import

④数据结构：
- $list类型=数组；\ -$ map类型=object；
其余的也有string、number、function等类型

4、Less与Sass处理机制不一样

Less 既可以在客户端运行，也可以在服务端运行（需要借助 node），Sass是通过服务端处理，相比较之下前者解析会比后者慢一点

5、关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

为什么选择使用Sass而不是Less？

1、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation。
2、就国外讨论的热度来说，Sass绝对优于LESS。
3、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。
4、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护。
5、同时还有Scss对sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。

跨域/请简述同源策略

协议、域名、端口都一样，就是同源。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
跨域处理方法\

使用 JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。核心思想：网页通过添加一个script元素,向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

后端进行 CORS 配置 CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

带cookie跨域请求：前后端都需要进行设置

原文链接：blog.csdn.net/qq_38128179…

后端反向代理

4. 使用 WebSocket

Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的服务器与客户端都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

Nginx反向代理

Nginx 实现原理类似于 Node 中间件代理，需要你搭建一个中转 nginx 服务器，用于转发请求。

使用 nginx 反向代理实现跨域，是最简单的跨域方式。只需要修改 nginx 的配置即可解决跨域问题，支持所有浏览器，支持 session，不需要修改任何代码，并且不会影响服务器性能。

使用 postMessage

跨文档通信 API：window.postMessage()

调用postMessage方法实现父窗口向子窗口发消息,子窗口同样可以通过该方法发送消息给父窗口

它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递

数组去重

Methods 1: 思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。

Methods 2: 思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。

Methods 3: 利用对象属性存在的特性，如果没有该属性则存入新数组。

Methods 4: 利用数组的indexOf下标属性来查询。

Methods 5: 利用数组原型对象上的includes方法。

Methods 6: 利用数组原型对象上的 filter 和 includes方法。

Methods 7: 利用数组原型对象上的 forEach 和 includes方法。

Methods 8: 利用数组原型对象上的 splice 方法。

Methods 9: 利用数组原型对象上的 lastIndexOf 方法。

Methods 10: 利用 ES6的set 方法。

深拷贝的实现方式

什么是深拷贝和浅拷贝

浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是指向内存的地址，所以如果其中一个对象改变了这个引用类型的值，就会影响到另一个对象。

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。原文链接：blog.csdn.net/Z_J_CSDN/ar… 方式1：JSON.stringify()方式

JSON.stringify()将字符串转化成json格式数据，JSON.parse()将json字符串转化成对象

JSON.parse(JSON.stringify())不仅适用于数组还适用于对象。不能拷贝函数，undefined，symbol。

方式2：ES插件lodash**

less文件转换为css文件

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

1.首先，你要确认你的电脑已经安装了node

使用 npm 安装 lessc “npm install -g less”

2.然后，进入需要转换的less文件的目标位置。

3.最后，你只需输入以下两条命令：

npm install -g less
lessc less文件名.less 生成的css文件名.css

转载于:www.cnblogs.com/zhx119/p/10…

ECharts

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

通俗的理解：

是一个JS插件，

性能好可流畅运行PC与移动设备，

兼容主流浏览器，

提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】，且可定制（支持自定义）

原文链接：blog.csdn.net/weixin_4388…

echarts 问题集锦

1.关于echarts 使用 dataZoom 中动态配置 start、end 值出现折线图错乱问题

项目中使用echarts进行图表的展示，当数据量很大的时候，需要配置dataZoom进行图表可滚动，但是数据都挤在一起，严重影响了图表的美观性，所以动态配置dataZoom的start 、 end属性

设置 filterMode:'empty' 解决此问题

原文链接：blog.csdn.net/qq_37324690…

2.Echarts只显示100px的问题

解决办法：添加settimeout

For 、forEach、filter、map

forEach、filter、map都可以遍历数组，那么三者有什么区别？

区别：

1.forEach遍历数组全部元素，利用回调函数对数组进行操作，不会返回新的数组,return只用于控制循环是否跳出当前循环;
filter返回一个新的数组，filter方法需要在循环的时候判断一下是true还是false，是true才会返回这个元素；
map根据当前数组映射出一个新的数组，返回新的被改变过值之后的数组,需要return。

forEach主要用于改变当前数组里面的值，若数组的类型为值类型，则不会改变原数组，若想改变原数组通过index这个参数来改变；若数组的类型为引用类型，则会改变原数组
filter主要用于过滤当前数组，找出符合条件的元素，返回一个新的数组，不会改变原数组
map则可以改变当前循环的值，返回一个新的被改变过值之后的数组,一般用来处理需要修改某一个数组的值。若数组的类型为值类型，则产生新的数组；若数组的类型为引用类型，则会改变原数组。
for循环。这样写的缺点大家都明白：每次都从arr里取length与i来对比，浪费性能（而且，要是arr的长度是动态变化的，就会出现死循环）。改进这个循环的办法是用变量保存arr.length for循环是在确定数组的长度下使用，continue终止当前循环，break终止整个循环。

for(var i = 0, len = arr.length;i< len;i++) { }
提高for循环性能的要点：
1，适时break!不需要遍历全部的就要加跳出条件！
2，不要在for循环体里声明变量（建议一次var,多次赋值）
3，数组长度缓存，尽量少变量

同步异步阻塞非阻塞

概况：同步是阻塞模式，异步是非阻塞模式

同步的理解：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

优点：自上而下顺序执行下来，对结果的处理比较简单，就近处理。可以容易捕获、处理异常。
缺点：当代码量大时，自上而下执行解析时间过长，容易阻塞，耗费时间执行效率低，影响用户体验
使用场景：不使用异步

举个我在项目中用到同步的例子：

详情页渲染需要掉接口来完成客户和部门两个字段的渲染，新建页面的逻辑是必须先选择客户，拿到客户的id再去请求部门的接口，所以我调详情页接口的时候一开始没考虑到这个问题直接渲染，结果就是出错，因为代码从上到下执行，是异步请求，我的客户还没请求成功的同时，部门也已经请求完了，解决方法，我就是接口套接口，把请求部门的接口写在客户接口的里面，形成同步请求，先请求完成之后再去调部门接口！

异步的理解：就相当于是不进入主线程、而进入"任务队列"的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

优点：避免阻塞，提高执行效率。可以立即或者延时给调用者返回结果，也可以多次调用后统一返回一个结果集合。
缺点：占用更多资源，不利于对进程控制。
使用场景：不涉及共享资源时，没有时序要求时，耗时操作，提高用户体验和使用性能时，不影响主线程的逻辑时。

而在前端开发中常见的异步一般常见的包括：回调函数（计时器、事件监听、ajax），发布/订阅，promise，async/await setTimeout是定时延时运行函数，只执行一次

setInterval也是定时延时函数，但是这个函数本身可以一直执行，不会停止，除非把它清除。

ajax是前端常用的和后台进行异步交互数据的请求方式，其实它本身也包括同步和异步，同步的就是由代码从上到下顺序执行，而异步的ajax是我们发送请求到服务器之后，只需要在监听服务器的响应即可，不用等到请求结束在执行其他的代码，这就是异步ajax

原文链接：blog.csdn.net/hong521520/…

http

定义

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议

特点

1.基于请求/响应模型的协议。请求和响应必须成对，先有请求后有响应

2.http协议默认端口:80

3.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

4.灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

5.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

6.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

http请求包括:请求行、请求头、请求体

http响应包括:响应行、响应头、响应体

状态码：由3位数字组成，第一个数字定义了响应的类别

1xx：指示信息，表示请求已接收，继续处理

2xx：成功，表示请求已被成功接受，处理。

200 OK：客户端请求成功 204 No Content：无内容。服务器成功处理，但未返回内容。一般用在只是客户端向服务器发送信息，而服务器不用向客户端返回什么信息的情况。不会刷新页面。 206 Partial Content：服务器已经完成了部分GET请求（客户端进行了范围请求）。响应报文中包含Content-Range指定范围的实体内容 3xx：重定向

301 Moved Permanently：永久重定向，表示请求的资源已经永久的搬到了其他位置。

302 Found：临时重定向，表示请求的资源临时搬到了其他位置

303 See Other：临时重定向，应使用GET定向获取请求资源。303功能与302一样，区别只是303明确客户端应该使用GET访问

307 Temporary Redirect：临时重定向，和302有着相同含义。POST不会变成GET

304 Not Modified：表示客户端发送附带条件的请求（GET方法请求报文中的IF…）时，条件不满足。返回304时，不包含任何响应主体。虽然304被划分在3XX，但和重定向一毛钱关系都没有

4xx：客户端错误

400 Bad Request：客户端请求有语法错误，服务器无法理解。 401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。 403 Forbidden：服务器收到请求，但是拒绝提供服务 404 Not Found：请求资源不存在。比如，输入了错误的url 415 Unsupported media type：不支持的媒体类型 5xx：服务器端错误，服务器未能实现合法的请求。

500 Internal Server Error：服务器发生不可预期的错误。 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，原文链接：blog.csdn.net/weixin_3808…

http、https

http：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

https: 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

http和https的区别是什么？

http 传输的数据都是未加密的，也就是明文的，网景公司设置了 SSL 协议来对 http 协议传输的数据进行加密处理，简单来说 https 协议是由 http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议，比 http 协议的安全性更高。

主要的区别如下：

Https 协议需要 ca 证书，费用较高。

http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。

使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为 443

http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。

原文链接：blog.csdn.net/qq_49002903…

对网站的文件和资源进行优化

减少HTTP请求

请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。

正确理解重绘和重排

重绘就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

重排就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。

通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

减少对DOM的操作

使用JSON格式来进行数据交换

JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。
JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。 高效使用HTML标签和CSS样式

压缩CSS、JavaScript和HTML文件

使用CDN加速（内容分发网络）

将CSS和JS放到外部文件中引用，CSS放头，JS放尾

浏览器在执行JavaScript代码时，不能同时做其它事情，即script标签每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。
因为这个阻塞的特点，建议把JavaScript代码放到body结束标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。
HTML规范清楚指出CSS要放包含在页面的head标签区域内

精简CSS和JS文件

压缩图片和使用图片Sprite技术

控制Cookie大小和污染

避免重定向

原文链接：blog.csdn.net/weixin_4247…

jQuery的选择器大全

一、基本选择器

   1. ID选择器
        ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。
        使用公式:$("#id")
        示例：$("#box")    //获取id属性值为box的元素
   2. 元素选择器
        元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。
        使用公式：$("element")
        示例：$("div")    //获取所有div元素
    3.类名选择器
        类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。
        使用公式：$(".class")
        示例：$(".box")     //获取class属性值为box的所有元素
    4.复合选择器
       
    5.通配符选择器

二、层次选择器

   1. ancestor   descendant选择器
   
    ancesdor  descendant选择器中ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素
    使用公式：$("ancestor   descendant")
    ancestor是指任何有效的选择器。
    descendant是用以匹配元素的选择器，并且它是ancestor所指定元素后代元素
    示例：$("ul   li")       //匹配ul元素下的全部li元素
    2. parent>child选择器
        parent>child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素，使用该选择器只能选择父元素的直接子元素
        使用公式：$(" parent>child ")
        parent是指任何有效的选择器
        child是用以匹配元素的选择器，并且它是parent元素的子元素
        示例：$(" form>input ")      //匹配表单中所有的子元素input
    3.prev+next选择器
        pev+next选择器用于匹配所有紧接在prev元素后的next元素，其中，prev和next是两个相同级别的元素
        使用公式：$("prev+next")
        prev是指任何有效的选择器
        next是一个有效选择器并紧接着prev选择器
        示例：$("div+img")        //匹配<div>标签后的<img>标记
   4. prev~siblings选择器

三、过滤选择器

    1.简单过滤器
        简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器
        :first
            说明：匹配找到的第一个元素，它是与选择器结合使用的
            示例：$("tr:first")     //匹配表格的第一行
        :last
            说明：匹配找到的最后一个元素，它是与选择器结合使用的
            示例：$("tr:last")    //匹配表格最后一行

  2.内容过滤器
        内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选
        :contains(text)
            说明：匹配包含给定文本的元素
            示例：$("li:contains('word')")      //匹配含有"word"文本内容的元素
        :empty
            说明：匹配所有不包含子元素或者文本的空元素
            示例：$("td:empty")        //匹配不包含子元素或者文本的单元格
      
    3.可见性过滤器
        元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的
        :visible
            说明：匹配所有可见元素
        :hidden
            说明：匹配所有不可见元素
            注意：在应用:hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素都会被匹配识别
    4.表单对象的属性过滤器
        表单对象的属性过滤器通过表单元素的状态属性（例如：选中、不可用等状态）匹配元素
        :checked
            说明：匹配所有选中的被选中元素
            示例：$("input:checked")            //匹配所有被选中的input元素
        :disabled
            说明：匹配所有不可用元素
            示例：$("input:disenabled")           //匹配所有不可用input元素
       
    5.子元素过滤器
        子元素选择器就是筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定
        :first-child
            说明：匹配所有给定元素的第一个子元素
            示例：$("ul  li:first-child")            //匹配ul元素中的第一个子元素li
        :last-child
            说明：匹配所有给定元素的最后一个子元素
            示例：$("ul  li:last-child")            //匹配ul元素中的最后一个子元素li
        :only-child
           
        :nth-child(index/even/odd/equation)

四、属性选择器

    属性选择器就是通过元素的属性作为过滤条件进行筛选对象
    [attribute]
        说明：匹配包含给定属性的元素
        示例：$("div[name]")       //匹配包含有name属性的div元素
    [attribute=value]
        说明：匹配属性值为value的元素
        示例：$("div[name='test']")           //匹配name属性是test的div元素
    [attribute!=value]
        说明：匹配属性值不等于value的元素
        示例：$("div[name!='test']")         //匹配name属性不是test的div元素
    [attribute*=value]
        
    [attribute^=value]
        
    [attribute$=value]
        
    [selector1][selector2][selectorN]

五、表单选择器

    表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中
    :input
    :button
        说明：匹配所有的普通按钮，即type="button"的input元素
        示例：$(".button")             //匹配所有普通按钮
    :checkbox
        说明：匹配所有的复选框
        示例：$(":checkbox")           //匹配所有的复选框
    :file

原文链接：blog.csdn.net/Chenftli/ar…

Jquery 插入节点的方法

before(): 在指定节点的前面添加要添加的节点

insertBefore(): 把要插入节点插入到指定节点的前面

after (): 在指定节点的后面添加要添加的节点

insertAfter (): 把要插入的节点插入到指定节点的后面

prepend (): 在指定父级里面的最前面添加指定节点

prependTo (): 把指定节点添加到指定父级里面的最前面

append (): 在指定父级里面的最后面添加指定节点

appendTo (): 把指定节点添加到指定父级里面的最后面

原文链接：blog.csdn.net/daylight_1/…

# web安全——前端常见的攻击方式

1、xss攻击

2、CSRF攻击

3、网络劫持攻击

4、控制台注入代码

5、钓鱼

6、DDoS攻击

7、SQL注入攻击

8、点击劫持

一、xss攻击

XSS攻击：跨站脚本攻击(Cross-Site Scripting)，攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法用户的信息后，攻击者甚至可以假冒合法用户与网站进行交互。

防御XSS攻击

针对存储型XSS攻击，对输入内容的特定字符进行编码
例如对表示 html标记的 < > 等符号进行编码
针对反射型XSS攻击，在 cookie中设置 httpOnly：
可以防止客户端通过document.cookie读取 cookie，此 HTTP头由服务端设置。
针对反射型XSS攻击，在输出 URL参数之前，要先对URL进行 URLEncode操作
开启白名单，阻止白名单以外的资源的加载和运行
后端接口也需要对关键字符进行过滤。

二、CSRF攻击

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

原理：
在浏览器中，所有的cookie，可以在任意一个标签页中被访问(没有设置http-only为true的情况下)（不论是否跨域）

1.2、CSRF攻击的过程

第一步，用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；

第二步，在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；

第三步，用户未退出网站A之前，在同一浏览器中，打开一个新的tab页访问网站B；

第四步，网站B接收到用户请求后，返回一些攻击性代码，通过这个代码，在用户不知情的情况下携带Cookie信息，向网站A发出请求，比如说这个请求是获取用户信息的。

第五步，网站A根据cookie，会认为是用户C发送的该请求，从而导致该请求被执行，进行给用户C造成个人信息或财产的损失。

如何防御CSRF攻击

验证 HTTP Referer 字段：由于是从其它网站发送的请求，所以可以通过验证请求头的Origin、Referer来验证发送请求的站点。
设置http-only：true,禁止cookie被浏览器通过js访问到
验证Token：浏览器发送请求时，携带token，因为token存放在sessionStorage中，不会被其它网站所窃取到。

token为什么就比cookie安全

cookie是什么
登陆后，后端生成一个sessionid放在cookie中返回给客户端，并且服务端一直记录着这个sessionid，客户端以后每次请求都会自动带上这个sessionid，服务端通过这个sessionid来验证身份之类的操作。所以别人拿到了cookie等于拿到了sessionid，就可以完全替代你。
token是什么
登陆后，后端会返回一个token给客户端，客户端将这个token存储起来，然后每次客户端请求都需要开发者手动将token放在header中带过去，服务端每次只需要对这个token进行验证就能使用token中的信息来进行下一步操作了。
对于xss攻击来说，cookie和token没有什么区别。但是对于csrf来说就有区别
1、对于xss攻击，不管是token还是cookie，都能被拿到，没有什么区别。

2、对于csrf来说就有区别，例子如下：
- cookie：在浏览器中，所有的cookie，可以在任意一个标签页中被访问(没有设置http-only为true的情况下)（不论是否跨域）
- token：存放在sessionStorage中，仅在浏览器的当前窗口中可以被访问到

三、网络劫持攻击

主要是通过一些代理服务器，或者wifi等有中间件的网络请求，进行劫持，不法分子通过这种方式获取到用户的信息最好是采用https进行加密，这种通过请求网络地址攻击的我们可以通过对http进行加密，来防范，这样不法分子即使或得到，也无法解密

四、控制台注入代码

不法分子通过各种提示诱骗用户在控制台做一些操作，从而获取用户信息。我们最好在控制台对用户进行友好的提示，必要轻易相信这种提示灯。

五、钓鱼攻击

钓鱼攻击是获得用户敏感信息的一种方法。钓鱼攻击的目标通常是在线银行用户、PayPal、eBay等。

主要形式
1、电子邮件钓鱼
群发邮件，欺骗用户点击恶意的链接或附件，获取有价值的信息。
2、网站钓鱼
在网站上伪造一个网站，通常是模仿合法的某个网站。为了欺骗用户点击这个网站还会采取些辅助技术，比如钓鱼邮件、短信、电话。
3、鱼叉式钓鱼
使用欺骗性的网站，针对于一小群目标受众。
4、鲸钓
目标为高端人群或者高级管理人员的鱼叉式钓鱼。
了解反钓鱼机制
1.SPF记录
SPF是为了防范垃圾邮件而提出来的一种DNS记录类型，它是一种TXT类型的记录，它用于登记某个域名拥有的用来外发邮件的所有IP地址。
2.SafeBrowsing API
谷歌的一个随时可以通过互联网访问的API,允许允许浏览器在渲染之前检测URL的正确性。

六、DDOS攻击

DDOS：分布式拒绝服务攻击（Distributed Denial of Service），简单说就是发送大量请求是使服务器瘫痪。DDos攻击是在DOS攻击基础上的，可以通俗理解，dos是单挑，而ddos是群殴，因为现代技术的发展，dos攻击的杀伤力降低，所以出现了DDOS，攻击者借助公共网络，将大数量的计算机设备联合起来，向一个或多个目标进行攻击。最直接的方法增加带宽。但是攻击者用各地的电脑进行攻击，他的带宽不会耗费很多钱，但对于服务器来说，带宽非常昂贵。云服务提供商有自己的一套完整DDoS解决方案，并且能提供丰富的带宽资源。------如果是阿里云推荐使用高防。

七、SQL注入攻击

通过对web连接的数据库发送恶意的SQL语句而产生的攻击，从而产生安全隐患和对网站的威胁，可以造成逃过验证或者私密信息泄露等危害。SQL注入的原理是通过在对SQL语句调用方式上的疏漏，恶意注入SQL语句。预防：md5加密

八、点击劫持

点击劫持是指在一个Web页面中隐藏了一个透明的iframe，用外层假页面诱导用户点击，实际上是在隐藏的frame上触发了点击事件进行一些用户不知情的操作。

原文链接：blog.csdn.net/weixin_4580…

2022 jQuery面试题 伤肝整理