上一节我们总体介绍了JS库有哪些，并简单向读者验证了熟练使用JS库能够大幅度提高前端工作效率。本节我们开始介绍JS库的一个十分重要的库——jQuery。
jQuery是一个流行的JS库，它提供了一种简单易用的API，可以在各种浏览器中运行。jQuery提供了一系列功能，例如DOM操作、事件处理、动画效果、Ajax交互、表单验证等，这使得开发人员可以更快速、更轻松地开发Web应用。
与其他JS库相比，jQuery有一个独特的特性，即它使用简洁的语法和易于学习的API，使得开发人员可以更快速地编写JS代码。jQuery的链式语法和选择器机制使得它非常适合于快速构建和测试Web应用。
此外，jQuery还具有丰富的插件生态系统，这些插件可以帮助开发人员扩展jQuery的功能和用途，以满足特定的需求。
jQuery是一个流行的JS库，它为开发人员提供了许多方便的功能和工具，以简化JS编程和Web开发。jQuery的简洁语法、易于学习的API和丰富的插件生态系统使其成为Web开发的流行选择之一。
下面我们使用一下jQuery完成一个备忘录操作。具体指得是：增添一个任务，能够追加到备忘录中；同时每个任务都能够被取消或者显示已完成，并动态更新备忘录内容。
<!DOCTYPE html>
<html>
<head>
<title>jQuery备忘录</title>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.completed { text-decoration: line-through; color: pink; }
.todo-item { margin: 5px 0; padding: 8px; border: 1px solid #ddd; }
</style>
</head>
<body>
<div id="app">
<h2>备忘录</h2>
<input type="text" id="todoInput" placeholder="输入新任务">
<button id="addBtn">添加任务</button>
<ul id="todoList"></ul>
</div>
<script>
/* 1. 页面加载完成监听器 */
$(document).ready(function() {
// 1.1 数据初始化
let todos = []; // 准备一个数组维护备忘录（存储所有任务）
let nextId = 1; // 准备一个自增ID生成器
// 2.1 绑定添加任务的事件监听器
$('#addBtn').click(addTodo); // 点击添加按钮执行addTodo函数
// 3.1 定义添加任务的函数
function addTodo() {
// 3.1.1 获取输入框内容并去除空格
const text = $('#todoInput').val().trim();
// 3.1.2 检查输入是否有效
if (text) {
// 3.1.3 创建任务对象
const todo = {
id: nextId++, // 分配唯一ID并自增
text: text, // 任务文本内容
completed: false // 初始状态为未完成
};
// 3.1.4 将任务添加到数组
todos.push(todo);
// 3.1.5 重新渲染任务列表
renderTodos();
// 3.1.6 清空输入框
$('#todoInput').val('');
}
}
// 4.1 定义渲染任务列表的函数
function renderTodos() {
// 4.1.1 清空现有列表内容
$('#todoList').empty();
// 4.1.2 遍历所有任务数组
$.each(todos, function(index, todo) {
// 4.1.3 为每个任务创建列表项
const $li = $('<li>', {
// 4.1.4 设置CSS类（根据完成状态）
class: 'todo-item' + (todo.completed ? ' completed' : ''),
// 4.1.5 设置HTML内容
html: `
<span>${todo.text}</span>
<button class="toggle-btn">${todo.completed ? '取消完成' : '标记完成'}</button>
<button class="delete-btn">删除</button>
`
});
// 4.1.6 将列表项添加到任务列表
$('#todoList').append($li);
});
}
// 5.1 事件委托 - 处理标记完成/取消完成按钮点击
$('#todoList').on('click', '.toggle-btn', function() {
// 5.1.1 找到被点击按钮所在的列表项
const $li = $(this).closest('li');
// 5.1.2 获取该列表项在任务列表中的索引
const index = $li.index();
// 5.1.3 切换对应任务的完成状态
todos[index].completed = !todos[index].completed;
// 5.1.4 重新渲染列表以更新显示
renderTodos();
});
// 5.2 事件委托 - 处理删除按钮点击
$('#todoList').on('click', '.delete-btn', function() {
// 5.2.1 找到被点击按钮所在的列表项
const $li = $(this).closest('li');
// 5.2.2 获取该列表项在任务列表中的索引
const index = $li.index();
// 5.2.3 从任务数组中删除对应任务
todos.splice(index, 1);
// 5.2.4 重新渲染列表以更新显示
renderTodos();
});
});
</script>
</body>
</html>这里我们通过jQuery实现了典型的前端MVC应用，简化了DOM操作，提供了完整的任务增删改查功能。
总结：使用好jQuery库能够大幅度提高开发技能，更快更好地完成前端工作。
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程，并配有习题和答疑，点击了解：
一点编程也不会写的：零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码？手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程：算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程