【10】进阶常用第三方库

news2024/11/13 9:29:33

第三方库概览

名称	文档	一句话介绍
jQuery	官网：https://jquery.com/ 中文网：https://jquery.cuishifeng.cn/	让操作 DOM 变得更容易
Lodash	官网：https://lodash.com/docs 中文网：https://www.lodashjs.com/	你能想到的工具函数它都帮你写了
Animate.css	官网：https://animate.style/	常见的 CSS 动画效果都帮你写好了
Axios	官网：https://axios-http.com/zh/	让网络请求变得更简单
MockJS	官网：http://mockjs.com/	ajax 拦截和模拟数据生成
Moment	官网：https://momentjs.com/ 中文网：http://momentjs.cn/	让日期处理更容易
ECharts	官网：https://echarts.apache.org/zh	搞定所有你能想到的图表 📈
animejs	官网：https://animejs.com/	简单好用的 JS 动画库
editormd	官网：https://pandao.github.io/editor.md	markdown 编辑器
validate	官网：http://validatejs.org/	简单好用的 JS 对象验证库
date-fns	官网：https://date-fns.org/	功能和 Moment 几乎相同支持 tree shaking
zepto	官网：https://zeptojs.com/	功能和 jQuery 几乎相同对移动端支持更好包体积更小
nprogress	官网：https://github.com/rstacruz/nprogress	简单好用的进度条插件 YouTube 就使用的是它
qs	官网：https://github.com/ljharb/qs	一个用于解析 url 的小工具

对于第三方库，除了下载使用，还可以通过 CDN 在线使用

科普知识：CDN

CDN 称之为内容分发网络（Content Delivery Network）。

简单来说，就是提供很多的服务器，用户访问时，自动就近选择服务器给用户提供资源

国内使用广泛的免费 CDN 站点：https://www.bootcdn.cn/

一、JQuery

官网：https://jquery.com/

中文网：https://jquery.cuishifeng.cn/

CDN：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js

针对 DOM 的操作无非以下几种：

获取它
创建它
监听它
改变它

JQuery 可以让上面整个过程更加轻松

jQuery 函数

jQuery 提供了一个函数，名称为jQuery，也可以写作$

该函数提供了强大的 DOM 控制能力

通过下面的示例，可以快速理解 jQuery 的核心功能

// 获取类样式为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 () {
   
  // ...
})