【Java Web学习 | 第15篇】jQuery（万字长文警告）

【Java Web学习 | 第15篇】jQuery万字长文警告2026最新版在 Java Web 全栈学习系列中我们已经系统掌握了HTML CSS 原生 JavaScriptDOM、事件、BOM、正则等。现在来到一个曾经“统治前端”的库 ——jQuery。2026 年 jQuery 的真实地位先说实话jQuery 4.0.0 已于 2026 年 1 月正式发布这是近 10 年来的首个大版本主要改进包括现代浏览器支持、安全增强、ES 模块化、移除对老旧 IE 的支持等。它仍然广泛存在于遗留系统、企业内部工具、WordPress 等 CMS、大量老项目中据统计仍覆盖数十万到上亿网站。但对于新项目尤其是结合 Spring Boot 的现代 Java Web强烈不推荐作为首选。现代浏览器原生 APIquerySelector、fetch、addEventListener等已经足够强大Vue / React / Alpine.js等框架或轻量方案能提供更好的开发体验和性能。本篇学习目标理解 jQuery 的历史价值和核心 API快速看懂老代码掌握 jQuery 与原生 JS 的等价写法对比重点知道什么时候该用、什么时候该弃为后续学习 Vue 或直接用原生 JS 打基础建议把 jQuery 当作“历史工具”学习重点对比原生写法。实际新项目优先原生 JS 或 Vue。1. jQuery 引入方式CDN 方式快速测试scriptsrchttps://code.jquery.com/jquery-4.0.0.min.js/script本地或 npm生产推荐scriptsrcjs/jquery-4.0.0.min.js/script注意jQuery 4.0 已支持 ES 模块但传统script方式仍最常见。2. jQuery 核心理念$ 选择器 链式调用jQuery 最经典的写法就是$()选择元素返回 jQuery 对象支持链式操作。// 原生 JSdocument.querySelectorAll(.box).forEach(el{el.style.colorred;});// 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[typetext])// 属性选择器$(.active, .highlight)// 多个选择器逗号分隔$(#userList li)// 子元素$(#userList li)// 后代元素实战// 获取所有激活的用户项constactiveItems$(.user-item.active);// 链式操作$(.btn).addClass(primary).text(已点击).fadeOut(500);4. DOM 操作对比原生 vs jQuery操作原生 JavaScript推荐jQuery 写法获取元素document.querySelector(.box)$(.box)修改文本el.textContent 新文本$(.box).text(新文本)修改 HTMLel.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)示例动态添加用户项// jQueryfunctionaddUser(name){consthtmldiv classuser-item${name}button classdelete删除/button/div;$(#userList).append(html);}// 原生现代写法更推荐functionaddUser(name){constdivdocument.createElement(div);div.classNameuser-item;div.innerHTML${name}button classdelete删除/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下一篇文章重点asyncfunctionloadUsers(){try{constresawaitfetch(/api/users);constdataawaitres.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);现代替代CSStransitiontransform或 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 全栈之路已经非常扎实