【Java Web学习 | 第15篇】jQuery（万字长文警告）（2026最新版）
在 Java Web 全栈学习系列中，我们已经系统掌握了 HTML + CSS + 原生 JavaScript（DOM、事件、BOM、正则等）。现在来到一个曾经“统治前端”的库 —— jQuery。
2026 年 jQuery 的真实地位（先说实话）
- jQuery 4.0.0 已于 2026 年 1 月正式发布，这是近 10 年来的首个大版本，主要改进包括：现代浏览器支持、安全增强、ES 模块化、移除对老旧 IE 的支持等。
- 它仍然广泛存在于遗留系统、企业内部工具、WordPress 等 CMS、大量老项目中（据统计仍覆盖数十万到上亿网站）。
- 但对于新项目（尤其是结合 Spring Boot 的现代 Java Web），强烈不推荐作为首选。现代浏览器原生 API（
querySelector、fetch、addEventListener等）已经足够强大，Vue / React / Alpine.js 等框架或轻量方案能提供更好的开发体验和性能。
本篇学习目标：
- 理解 jQuery 的历史价值和核心 API（快速看懂老代码）
- 掌握 jQuery 与原生 JS 的等价写法对比（重点！）
- 知道什么时候该用、什么时候该弃
- 为后续学习 Vue 或直接用原生 JS 打基础
建议：把 jQuery 当作“历史工具”学习，重点对比原生写法。实际新项目优先原生 JS 或 Vue。
1. jQuery 引入方式
CDN 方式（快速测试）：
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
本地或 npm（生产推荐）：
<script src="js/jquery-4.0.0.min.js"></script>
注意：jQuery 4.0 已支持 ES 模块，但传统 <script> 方式仍最常见。
2. jQuery 核心理念：$ 选择器 + 链式调用
jQuery 最经典的写法就是 $() 选择元素，返回 jQuery 对象，支持链式操作。
// 原生 JS
document.querySelectorAll('.box').forEach(el => {
el.style.color = 'red';
});
// jQuery（简洁很多）
$('.box').css('color', 'red');
$ 是 jQuery 的全局函数，也常写作 jQuery（避免冲突时用）。
3. 选择器（Selectors）—— jQuery 最强大之处
jQuery 选择器几乎兼容 CSS 选择器语法：
// 基础选择
$('#id') // ID
$('.class') // 类
$('div') // 标签
$('p:first') // 第一个 p
$('ul li:last-child') // 最后一个 li
// 复杂选择
$('form input[type="text"]') // 属性选择器
$('.active, .highlight') // 多个选择器（逗号分隔）
$('#userList > li') // 子元素
$('#userList li') // 后代元素
实战：
// 获取所有激活的用户项
const activeItems = $('.user-item.active');
// 链式操作
$('.btn').addClass('primary').text('已点击').fadeOut(500);
4. DOM 操作对比（原生 vs jQuery）
| 操作 | 原生 JavaScript（推荐） | jQuery 写法 |
|---|---|---|
| 获取元素 | document.querySelector('.box') | $('.box') |
| 修改文本 | el.textContent = '新文本' | $('.box').text('新文本') |
| 修改 HTML | el.innerHTML = '<strong>内容</strong>' | $('.box').html('<strong>内容</strong>') |
| 修改样式 | el.style.color = 'red' 或 el.classList.add() | $('.box').css('color', 'red') |
| 添加类 | el.classList.add('active') | $('.box').addClass('active') |
| 显示/隐藏 | el.style.display = 'none' | $('.box').hide() / .show() |
| 动画（淡入淡出） | 需手动写或用 CSS transition | $('.box').fadeIn(500) |
示例：动态添加用户项
// jQuery
function addUser(name) {
const html = `<div class="user-item">${name} <button class="delete">删除</button></div>`;
$('#userList').append(html);
}
// 原生（现代写法，更推荐）
function addUser(name) {
const div = document.createElement('div');
div.className = 'user-item';
div.innerHTML = `${name} <button class="delete">删除</button>`;
document.getElementById('userList').appendChild(div);
}
5. 事件绑定对比
jQuery 事件绑定非常简洁：
// jQuery
$('#btn').on('click', function() {
alert('点击了！');
});
// 支持委托（事件委托）
$('#userList').on('click', '.delete', function() {
$(this).parent().remove();
});
// 快捷方法
$('#btn').click(() => { ... });
原生等价（推荐）：
// 直接绑定
document.getElementById('btn').addEventListener('click', () => { ... });
// 事件委托（性能更好）
document.getElementById('userList').addEventListener('click', (e) => {
if (e.target.classList.contains('delete')) {
e.target.parentElement.remove();
}
});
jQuery 优点：链式 + 自动委托支持好；缺点：多一层抽象，性能略低。
6. AJAX（异步请求）—— jQuery 曾经的王牌
在 fetch 普及前，jQuery 的 $.ajax 是最方便的异步请求方式。
// jQuery AJAX（传统写法）
$.ajax({
url: '/api/users',
method: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
renderUsers(data);
},
error: function(xhr) {
console.error('请求失败', xhr);
}
});
// 更现代的写法（jQuery 也支持 Promise）
$.get('/api/users').done(data => {
renderUsers(data);
}).fail(err => {
console.error(err);
});
与现代 fetch 对比（推荐）：
// 原生 fetch + async/await（下一篇文章重点）
async function loadUsers() {
try {
const res = await fetch('/api/users');
const data = await res.json();
renderUsers(data);
} catch (err) {
console.error('请求失败', err);
}
}
jQuery AJAX 仍在遗留项目中常见，但新项目优先 fetch 或 Axios。
7. 动画与效果
jQuery 内置了简单动画 API：
$('.box').fadeIn(600); // 淡入
$('.box').fadeOut(400); // 淡出
$('.box').slideUp(300); // 向上收起
$('.box').animate({ left: '200px', opacity: 0.5 }, 800);
现代替代：CSS transition + transform 或 Web Animations API。
8. 实用工具函数
$.each(array, function(index, value) { ... }); // 遍历
$.trim(str); // 去空格
$.isArray(obj); // 判断数组
$.extend(target, obj1, obj2); // 合并对象（类似 ... 展开）
9. jQuery 与现代开发的对比总结（2026 视角）
jQuery 的优势：
- 极简 API，学习曲线低
- 优秀的事件委托和链式调用
- 跨浏览器兼容性（老项目神器）
- 大量插件生态（虽然很多已过时）
jQuery 的劣势（新项目不推荐原因）：
- 增加额外 JS 体积（虽已优化）
- 抽象层导致调试稍难
- 性能不如原生或框架虚拟 DOM
- 现代浏览器已原生支持大部分功能
推荐路线：
- 维护老项目 → 学习 jQuery 4.0，重点掌握选择器、事件委托、AJAX
- 新 Java Web 项目 → 优先 原生 JS + Fetch 或 Vue 3（渐进式，最适合 Java 后端开发者）
- 轻量需求 → Alpine.js（类 jQuery 风格，但更现代）
10. 小练习（立即动手）
- 用 jQuery 实现一个点击按钮后淡入一个卡片的动画。
- 实现事件委托：点击列表中任意“删除”按钮，移除对应项。
- 用
$.ajax或$.get模拟调用/api/users，成功后动态渲染用户列表。 - 把上面操作全部改写成原生 JavaScript，对比两者代码量和可读性。
下一篇文章预告：《【Java Web学习 | 第16篇】JavaScript(9) – 异步编程（Promise + async/await）与 Fetch API》
我们将彻底告别回调地狱，学习现代异步处理，并使用 fetch 真正与 Spring Boot 后端进行数据交互（登录、CRUD 等）。
万字长文结束！本篇重点不是让你精通 jQuery，而是让你看懂老代码、对比原生写法、做出理性技术选择。
有问题随时问：
- 想要jQuery 完整用户管理示例代码（包含 CRUD）？
- 需要jQuery 与原生 JS 一对一对比表（更多操作）？
- 或直接进入 异步 + Fetch 篇？
回复“给我 jQuery CRUD 示例”或“下一篇 Fetch”，我立刻继续！
jQuery 曾经改变了前端开发，如今它更多是“历史遗产”。掌握其思想后，你会更深刻理解为什么现代前端走向组件化和声明式编程。继续加油，你的 Java Web 全栈之路已经非常扎实！🚀
