jquery菜鸟教程

jQuery 死了吗？菜鸟每次技术论坛有人提起这个话题，评论区就吵成一锅粥。教程但现实是菜鸟，成千上万的教程旧项目还在跑着 jQuery，你随便打开一个政府网站或者老牌电商后台，菜鸟控制台里十有八九躺着 $ 这个符号。教程

先别急着写新项目。菜鸟真正要学 jQuery 的教程人，往往是菜鸟接手了“祖传代码”的倒霉蛋。我见过一个案例，教程某公司内部 OA 系统，菜鸟十年没大改，教程全靠 jQuery 撑着。菜鸟新来的教程前端想用 Vue 重写，老板一句“能跑就行”直接噎回去。菜鸟这时候你抱怨框架老没用，能快速修 bug 才是硬道理。

jQuery 的核心就一句话：选择元素，操作它们。原生 JS 写 document.querySelectorAll('.box')，jQuery 里写成 $('.box')。别小看这层糖衣，它把浏览器差异全吞了。IE8 时代过来的老程序员都懂，当年写 addEventListener 还得兼容 attachEvent，jQuery 帮你把这堆脏活全干了。

事件绑定也简单。原生 JS 里 onclick 只能绑一个函数，想绑多个得用 addEventListener。jQuery 的 $('#btn').on('click', fn1) 想绑几个绑几个，还能用 off() 精准解绑。最妙的是事件委托，动态生成的列表项，只要写 $('#list').on('click', 'li', fn)，后加的元素照样响应——这在原生 JS 里得自己判断 event.target，麻烦得很。

Ajax 更是当年 jQuery 的杀手锏。现在用 fetch 写异步请求，得自己处理 response.ok，还得手动转 JSON。jQuery 的 $.ajax({ url, method, data, success}) 一把梭，回调函数里直接拿数据。虽然嵌套多了会变成“回调地狱”，但配合 $.Deferred 也能链式写。我见过最骚的操作，老程序员用 $.when(a, b).done() 同时发三个请求，等全部成功再执行下一步——那会儿 Promise 还没普及呢。

动效方面，fadeIn()、slideUp() 这些方法名字就是英文原意，不用查文档就能猜个大概。但别指望它做复杂动画，性能确实跟不上 CSS3 transition。遇到那种整页滚动的炫酷官网，老老实实写原生或者上 GSAP 吧。

链式调用是 jQuery 的脾气。$('#box').css('color', 'red').slideDown(200).find('span').text('搞定')，一行代码干了四件事。新手容易懵，但用熟了会觉得很顺手——前提是你记得每个方法返回什么。要是中间某个方法返回的不是 jQuery 对象，链就断了。

插件生态是它最后的堡垒。什么 slick 轮播、select2 下拉框、datepicker 日期选择，全是 jQuery 插件。虽然新项目都在找 React/Vue 替代品，但那些老插件的稳定性和文档丰富程度，新库真不一定比得上。

学 jQuery 到底学什么？别死磕 API，那些查手册就行。重点学它的设计思路：怎么用最少的代码解决跨浏览器问题，怎么把 DOM 操作封装成好用的方法。理解了这些，你再看现代框架的虚拟 DOM、响应式数据，反而能看出它们到底解决了什么痛点——都是为了让你少写点重复劳动。

最后说句掏心窝的。如果你刚入行，别把 jQuery 当主粮，但绝对值得花两天时间过一遍。哪天面试官问你“jQuery 和原生 JS 的区别”，你能从事件委托聊到链式调用的实现原理，再扯两句 $ 符号的命名空间污染问题——这比背一百道面试题都管用。