請問現在我還需要學習 jQuery 嗎？聽你在知乎說 jQuery 已經過時了，是不是就不用學了？
短答案：
jQuery 還是可以學一學的，學了之後對寫代碼和封裝庫很有幫助。
現在的「新人」依然可以學習 jQuery 的思想，因為以「新人」的水平，直接理解 Vue / React 的思想難度較大，jQuery 是一個很不錯的中間過渡，因為 jQuery 也蘊含了非常多的編程套路。
但是如果你不想學，就不學吧。直接去學 Vue / React 會難一點，但也能學會。
長答案：
jQuery 當然過時了
當年我在大學的技術小組裡做 C# 網站開發，需要用到 jQuery 特效，組裡的一名小夥伴會用一點 jQuery，很快就用 .animate 做出了讓我嘖嘖稱奇的特效。我覺得 jQuery 好神奇啊，雖然我當時連 JS 都不會。
於是我立馬買了一本《鋒利的 jQuery》，硬看。
什麼叫「硬看」呢？因為我不會 JS，而且我並沒有照著書上敲代碼，僅僅使用眼睛「看 jQuery 代碼」。神奇的是——我居然很快看懂了幾乎整本書。以至於那位會用 jQuery 的小夥伴遇到 bug 問我時我能直接給出解答，看起來他並沒有看《鋒利的 jQuery》這本書（笑）。
到了 2018 年，幾乎已經沒有新項目會使用 jQuery 來開發了；即使有，也是一件不值得拿出來炫耀的事情。那為什麼我還是建議學習 jQuery 呢？
原因如下。
jQuery 教你如何設計 API
上文說到我一個不會 JS 的人居然能看懂 jQuery 的書，其實這不是因為我厲害，而是因為 jQuery 的 API 設計得太人性化了！
舉幾個例子給大家看看：
第一個是 jQuery 對事件監聽的簡化
// 那時，如果不用 jQuery，監聽事件（兼容 IE 6）你要這麼寫
if (button.addEventListener)
button.addEventListener('click',fn);
else if (button.attachEvent) {
button.attachEvent('onclick', fn);
}else {
button.onclick = fn;
}
// 但是如果你用 jQuery，你只需要這麼寫
$(button).on('click', fn)
第二個是 jQuery 對元素選擇的簡化
// 如果你想獲取 .nav > .navItem 對應的所有元素，用 jQuery 是這樣寫的
$('.nav > .navItem')
// 在 IE 6 上，你得這麼寫
var navItems = document.getElementsByClassName('navItem')
var result = []
for(var i = 0; i < navItems.length; i++){
if(navItems[i].parentNode.className.match(/\bnav\b/){
result.push(navItems[i])
}
}
有沒有發現 jQuery 的代碼一讀就讀懂了？可讀性非常強！
當時我作為一個新人，每每看到 jQuery 那優雅的 API，都禁不住去思考 jQuery 到底是怎麼實現的，我自己能不能實現出來（但我並不推薦看 jQuery 源碼）。本著這樣的想法，我學會了很多編程技巧。
為什麼有些人代碼水平老是提不高了，就是因為不會造輪子，不會設計優雅的 API，更不會實現優雅的 API，只會調用其他庫或框架提供的功能（中槍的舉手）。
而 jQuery 則提供了一個簡單而又經典的範例供大家學習。
不信的話我們就來看看 jQuery 用到了哪些所謂的設計模式（其實就是編程套路）吧。
一、發佈訂閱模式
var eventHub = $({})
eventHub.on('xxx', function(){ console.log('收到') })
eventHub.trigger('xxx')
二、用原型繼承實現插件系統
$.fn.modal = function(){ ... }
$('#div1').modal()
Vue 2 的插件也是類似的思路哦
三、事件委託
$('div').on('click', 'span', function(){...})
說實話，你在 2018 年找前端讓他寫一個事件委託，我保證 90% 寫出來的代碼都是有「明顯」bug 的。
四、鏈式調用
$('div').text('hi').addClass('red').animate({left: 100})
五、函數重載（偽）
$(fn)
$('div')
$(div)
$($(div))
$('span', '#scope1')
你會發現 $ 這個函數的參數可以是函數、字符串、元素和 jQuery 對象，甚至還能接受多個參數，這種重載是怎麼做到的？
六、命名空間
// 你的插件在一個 button 上綁定了很多事件
$button.on('click.plugin', function(){...})
$button.on('mouseenter.plugin', function(){...})
// 然後你想在某個時刻移除以上所有事件
$button.off('.plugin')
如果你不用 jQuery 就很麻煩了。
七、高階函數
var fn2 = $.proxy(fn1, asThis, param1)
$.proxy 接受一個函數，返回一個新的函數。
其他就不一一列舉了。
jQuery 的 API 風格依然在流行
我們把 jQuery 和 Axios 做一下對比：
$.ajax({url:'/api', method:'get'})
$.get('/api').then(fn1,fn2)
axios({ url: '/api', method: 'get'})
axios.get('/api').then(fn1, fn2)
為什麼 2018 年流行的 axios 跟 jQuery.ajax 這麼相像呢？
因為 jQuery 的 API 實在太好用了！搞得新庫根本沒法超越它，沒有辦法設計出更簡潔的 API 了。畢竟 jQuery 也是在前端界流行近十年。
所以你學了 jQuery 很容易過渡其他類似的新庫。
jQuery 也能做 MVC
很多人以為前端框架是從 Vue、React 和 Angular 才開始的，其實 jQuery 時代早就有基於 jQuery 的 MV* 庫了，比如著名的 Backbone.js 和 Marionette.js。
看看下面的 Backbone 應用代碼
var TodoView = Backbone.View.extend({
tagName: 'div',
template: _.template($('#item-template').html()),
events: {
'click .toggle': 'xxx',
},
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function () {
if (this.model.changed.id !== undefined) {return; }
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
AngularJS、Vue 1.x、Vue 2.x 其實都是順著 Backbone MVC 的思路慢慢優化、改造得來的，如果你提前瞭解 Backbone 作為知識鋪墊，那麼理解 Vue 是非常容易的。如果面試官問你 MVC 和 MVVM 的區別，你也是很容易就可以答出來的。
原文鏈接：https://zhuanlan.zhihu.com/p/46753973