jQuery：一个快速、小巧、功能丰富的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画等操作。
React：一个用于构建用户界面的 JavaScript 库，提供了组件化、虚拟 DOM 等功能，用于构建可维护、高性能的单页应用。
Angular：一个由 Google 开发的前端框架，用于构建 Web 应用程序。它提供了数据绑定、依赖注入、模块化等功能，使得开发者可以更轻松地开发和测试应用。
Vue.js：一个渐进式 JavaScript 框架，用于构建用户界面。它提供了数据驱动的视图和组件化的功能，可以与现有项目结合使用。
D3.js：一个用于创建数据可视化的 JavaScript 库。它通过使用 HTML、SVG 和 CSS 来操作文档对象模型(DOM)，使得开发者可以根据数据创建动态和交互式的图表。
Lodash：一个实用的 JavaScript 实用工具库，提供了许多常用的函数和工具函数，用于简化 JavaScript 编程。
Axios：一个用于发送 HTTP 请求的 JavaScript 库，支持浏览器和 Node.js 环境。它提供了简洁的 API 和强大的功能，使得开发者可以更方便地处理网络请求。
Moment.js：一个处理日期和时间的 JavaScript 库，它提供了许多日期和时间操作的功能，使得开发者可以更轻松地处理和格式化日期和时间。
案例代码：使用 jQuery 实现点击按钮隐藏/显示一个元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="toggleBtn">Toggle Element</button>
<div id="element">This is a hidden element.</div>
<script>
$(document).ready(function() {
$('#toggleBtn').click(function() {
$('#element').toggle();
});
});
</script>
</body>
</html>
案例代码：使用 React 创建一个简单的计数器组件。
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}
ReactDOM.render(<Counter />, document.getElementById('root'));
案例代码：使用 Vue.js 创建一个简单的计数器。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Counter: {{ count }}</h1>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
});
</script>
</body>
</html>
案例代码：使用 D3.js 创建一个简单的柱状图。
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg id="chart" width="400" height="300"></svg>
<script>
const data = [10, 20, 30, 40, 50];
const svg = d3.select('#chart');
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', (d, i) => i * 50)
.attr('y', (d) => 300 - d)
.attr('width', 40)
.attr('height', (d) => d)
.attr('fill', 'steelblue');
</script>
</body>
</html>
案例代码：使用 Lodash 对数组进行排序。
const _ = require('lodash');
const numbers = [4, 2, 8, 6, 1];
const sortedNumbers = _.sortBy(numbers);
console.log(sortedNumbers);
【温故而知新】JavaScript数字精度丢失问题
【温故而知新】JavaScript的继承方式有那些
【温故而知新】JavaScript中内存泄露有那几种
【温故而知新】JavaScript函数式编程
【温故而知新】JavaScript的防抖与节流
【温故而知新】JavaScript事件循环