jQuery

jQuery是一个JavaScript函数库，使用jQuery可以简化JavaScript编程。jQuery库包含以下功能：

HTML元素选取与操作
CSS操作
JavaScript特效
HTML事件函数
AJAX

在学jQuery之前需要对前端三剑客HTML、CSS和JavaScript有基本的了解。

jQuery下载

jQuery官网介绍了jQuery的下载方法：

1. 使用npm下载
npm install jquery

2.使用yarn下载
yarn add jquery

3.使用Bower下载
bower install jquery

如果使用码上掘金在线平台，可以在设置中添加依赖资源。

https://code.jquery.com/jquery-3.6.0.min.js

jQuery语法

jQuery使用$(selector).action()的格式给一个或多个元素绑定事件。具体来说，$(selector)让jQuery选择匹配CSS选择器selector的元素，并将它们传递给叫做.action()的事件API。

下面通过一个实例进行讲解。实例中有两个HTML元素，div和button，CSS选择器使用了ID选择器，两个button都绑定了click事件，div元素绑定了fadeIn()和fadeOut()两个API，并且设置了时间参数。点击“隐藏”按钮，图中的方块会缓慢消失，再点击“出现”按钮，方块就会缓慢出现。

AJAX

AJAX(全称Asynchronous JavaScript And XML)是异步的JavaScript和XML，它可以在不刷新页面的情况下，对网页进行部分更新。AJAX是一种用于创建快速动态网页的技术。

使用AJAX最主要的两个特性可以做下列事：

在不重新加载页面的情况下发送请求给服务器。
接受并使用从服务器发来的数据。

AJAX的两种请求和响应方法：

//GET
$.ajax({
    url: url,
    type: "GET",
    data: {
    },
    dataType: "json",
    success: function (response) {

    },
});

//POST
$.ajax({
    url: url,
    type: "POST",
    data: {
    },
    dataType: "json",
    success: function (response) {

    },
});

JSON

JSON(JavaScript Object Notation)是一种语法，用来序列化对象、数组、数值、字符串、布尔值和null。JSON是轻量级的文本数据交换格式。

JSON通常用于与服务端交换数据，在向服务器发送或接收数据时一般是字符串，在编程时需要的是对象。JSON有两个常用的API，用于对象和字符串之间的转换。

JSON.parse()将字符串转化为JavaScript对象
JSON.stringify()将JavaScript对象转化为字符串

requestAnimationFrame

requestAnimationFrame()会在下次浏览器刷新页面之前执行一次，这个函数的作用就是代替定时器做更加流畅高性能的动画，他解决了定时器做动画时间间隔不稳定的问题。

下面通过实例介绍这个函数。通过演示可以看到圆的半径不断增大，每次增大1px，最终停止不变。requestAnimationFrame可以保证每两次调用之间的时间间隔相同，渲染动画的效果好。

ES6语法糖

箭头函数简写

当参数列表只有一个参数是，左边括号可以省略。如果函数体返回一个表达式的值，右边的大括号可以省略。下面的三个函数是等价的。

let f = (x) => {
  return x * x;
};

let f = x => {
    return x * x;
}

let f = x => x * x;

解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。

let [a,b,c] = [1,2,3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

数组和对象的展开

数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。使用...运算符可以实现数组的克隆。

let a = [2,3,5,7,11];
let b = [...a];

在上面的代码中，b数组会返回a数组的克隆，修改b数组不会对a数组产生影响。

JavaScript常用库与ES6语法糖 | 青训营笔记

jQuery

JSON

requestAnimationFrame

ES6语法糖