前端 JavaScript 必会工具库合集 #

// 获取类样式为container的所有DOM
const container = $(".container")

// 获取container后面的兄弟元素，元素类样式必须包含list
container.nextAll(".list");

// 删除元素
container.remove();

// 找到所有类样式为list元素的后代li元素，给它们加上类样式item
$(".list li").addClass("item");

// 为所有p元素添加一些style
$("p").css({ "color": "#ff0011", "background": "blue" });

// 注册DOMContentLoaded事件
$(function(){ 
	// ...
})

// 给所有li元素注册点击事件
$("li").click(function(){
  // ...
})

// 创建一个a元素，设置其内容为link，然后将它作为子元素追加到类样式为.list的元素中
$("<a>").text("link").appendTo(".list");

// 获取类样式为container的所有DOM
const container = $(".container")

// 获取container后面的兄弟元素，元素类样式必须包含list
container.nextAll(".list");

// 删除元素
container.remove();

// 找到所有类样式为list元素的后代li元素，给它们加上类样式item
$(".list li").addClass("item");

// 为所有p元素添加一些style
$("p").css({ "color": "#ff0011", "background": "blue" });

// 注册DOMContentLoaded事件
$(function(){ 
	// ...
})

// 给所有li元素注册点击事件
$("li").click(function(){
  // ...
})

// 创建一个a元素，设置其内容为link，然后将它作为子元素追加到类样式为.list的元素中
$("<a>").text("link").appendTo(".list");

// jQuery -> DOM
jQuery对象[索引]
jQuery对象.get(索引)

// DOM -> jQuery
$(DOM对象)

// jQuery -> DOM
jQuery对象[索引]
jQuery对象.get(索引)

// DOM -> jQuery
$(DOM对象)

// 发送 get 请求到 https://study.duyiedu.com/api/herolist，输出响应体的内容
axios.get("https://study.duyiedu.com/api/herolist").then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

// 发送 get 请求到 https://study.duyiedu.com/api/user/exists?loginId=abc，输出响应体的内容
axios.get("https://study.duyiedu.com/api/user/exists", {
  params: { // 这里可以配置 query，axios会自动将其进行Url编码
    loginId: "abc"
  },
}).then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

// 发送 post 请求到 https://study.duyiedu.com/api/user/reg
// axios 会将第二个参数转换为JSON格式的请求体
axios.post("https://study.duyiedu.com/api/user/reg", {
  loginId: 'abc',
  loginPwd: '123123',
  nickname: '棒棒鸡'
}).then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

// 发送 get 请求到 https://study.duyiedu.com/api/herolist，输出响应体的内容
axios.get("https://study.duyiedu.com/api/herolist").then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

// 发送 get 请求到 https://study.duyiedu.com/api/user/exists?loginId=abc，输出响应体的内容
axios.get("https://study.duyiedu.com/api/user/exists", {
  params: { // 这里可以配置 query，axios会自动将其进行Url编码
    loginId: "abc"
  },
}).then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

// 发送 post 请求到 https://study.duyiedu.com/api/user/reg
// axios 会将第二个参数转换为JSON格式的请求体
axios.post("https://study.duyiedu.com/api/user/reg", {
  loginId: 'abc',
  loginPwd: '123123',
  nickname: '棒棒鸡'
}).then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

axios.get(url地址, [请求配置]);
axios.post(url地址, [请求体对象], [请求配置]);

// 或直接使用 axios 方法，在请求配置中填写请求方法
axios(请求配置);

axios.get(url地址, [请求配置]);
axios.post(url地址, [请求体对象], [请求配置]);

// 或直接使用 axios 方法，在请求配置中填写请求方法
axios(请求配置);

// 创建实例
const instance = axios.create({
  baseURL: 'https://study.duyiedu.com/'
});

// 发送 get 请求到 https://study.duyiedu.com/api/herolist，输出响应体的内容
instance.get("/api/herolist").then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

// 创建实例
const instance = axios.create({
  baseURL: 'https://study.duyiedu.com/'
});

// 发送 get 请求到 https://study.duyiedu.com/api/herolist，输出响应体的内容
instance.get("/api/herolist").then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // config 为当前的请求配置
  // 在发送请求之前做些什么
  // 这里，我们添加一个请求头
  const token = localStorage.getItem('token');
  if(token){
    config.headers.authorization = token;
  }
  return config; // 返回处理后的配置
});

// 添加响应拦截器
axios.interceptors.response.use(function (resp) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return resp.data.data; // 仅得到响应体中的data属性
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  alert(error.message); // 弹出错误消息
});

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // config 为当前的请求配置
  // 在发送请求之前做些什么
  // 这里，我们添加一个请求头
  const token = localStorage.getItem('token');
  if(token){
    config.headers.authorization = token;
  }
  return config; // 返回处理后的配置
});

// 添加响应拦截器
axios.interceptors.response.use(function (resp) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return resp.data.data; // 仅得到响应体中的data属性
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  alert(error.message); // 弹出错误消息
});

Mock.mock(数据模板)

Mock.mock(数据模板)

Mock.mock(要拦截的url, 要拦截的请求方法, 数据模板)

Mock.mock(要拦截的url, 要拦截的请求方法, 数据模板)

Mock.setup({
  timeout: 400 // 网络延时400毫秒
})

Mock.setup({
  timeout: '200-600' // 网络延时200-600毫秒
})

Mock.setup({
  timeout: 400 // 网络延时400毫秒
})

Mock.setup({
  timeout: '200-600' // 网络延时200-600毫秒
})