2020年應該使用或學習jQuery嗎？

使用還是不使用？學習還是不學習？讓我們看看如何完全避免使用jQuery，以及保留使用它的原因。

無論你在JavaScript框架和庫方面有什麼偏好，jQuery在JavaScript生態系統中發揮了重要作用。

幾年前它更受歡迎，現在一些jQuery的需求已經被現代瀏覽器替代（幸運的是！），但這個JavaScript庫仍然被許多人使用。

為什麼jQuery一開始會變得如此受歡迎？首先，jQuery誕生於JavaScript應用程序還不是主流的年代。在2000年代初至中期，JavaScript主要用於賦予網頁中出現的幻燈片和其他小工具（如圖片庫、日期選擇器等）功能。如果過於複雜，JavaScript很難進行許多操作（當然，電腦當時也更慢）。

值得一提的是，jQuery並不是唯一的或第一個庫。那個時候其他庫也非常受歡迎，比如Mootools、YUI、Dojo Toolkit、Scriptaculous和Prototype。jQuery後來可能成為了那些庫中最著名的。

當時的瀏覽器存在許多互操作性問題。我們遇到了很多跨瀏覽器的怪異行為和標準化問題，而jQuery通過創建一個抽象層並處理所有解決方案來幫助我們。

jQuery允許你使用CSS選擇器語法來選擇DOM元素，它非常用戶友好且易於擴展。它使JavaScript動畫變得簡單。

同時，它還簡化了使用AJAX（及其跨瀏覽器差異）的操作，這在時下非常流行的術語中也為jQuery帶來了一定的知名度。

如今，我們已經沒有太多的瀏覽器兼容性問題了，Selectors API和Fetch使瀏覽器標準化了jQuery的兩個最佳功能。

jQuery肯定是一個充滿爭議的主題。有些人說jQuery是過時的遺物，有些人仍然每天使用它。有些人花時間撰寫「為什麼我們不需要jQuery」的文章。

在過去幾年中，它的使用率確實有所下降：

jQuery趨勢

如今，JavaScript的面貌已經截然不同。但是，了解jQuery的用途仍然是有用的。

曾經使用jQuery的功能現在已經有了標準化的瀏覽器API

選擇DOM元素

jQuery的用法：

1	$('.button')

現在我們可以使用Selectors API：

1	document.querySelector('.button')

如果需要多個元素：

1	document.querySelectorAll('.button')

等待DOM加載完成

jQuery的用法：

1
2
3

$(document).ready(() => {
 //...
})

DOM的做法：

1
2
3

document.addEventListener("DOMContentLoaded", () => {
 //...
})

為DOM元素添加或移除類

jQuery的用法：

1
2
3

el.addClass('big')
el.removeClass('big')
el.toggleClass('big')

DOM的做法：

1
2
3

el.classList.add('big')
el.classList.remove('big')
el.classList.toggle('big')

從DOM中移除元素

jQuery的用法：

1	el.remove()

DOM的做法：

1	el.remove()

（是的，沒有變化）

更改DOM元素的內容

jQuery的用法：

el.text('Hello')
el.html('Hello')
el.text()
el.html()

DOM的做法：

el.innerHTML = 'Hello'
el.textContent = 'Hello'
el.innerHTML
el.textContent

選擇DOM元素的父元素

jQuery的用法：

1	el.parent()

DOM的做法：

1	el.parentNode

監聽DOM元素上的事件

jQuery的用法：

1	el.on('click', (e) => { /* ... */ })

DOM的做法：

1	el.addEventListener('click', (e) => { /* ... */ })

AJAX請求

jQuery的用法：

$.ajax({
 url: '/api.json',
 type: 'GET',
 success: (data) => {
 console.log(data)
 }
})

現代JS的做法：

1
2
3

fetch('/api.json')
 .then(response => response.text())
 .then(body => console.log(body))

動畫

現在瀏覽器可以使用CSS過渡或CSS動畫來實現jQuery動畫。

瀏覽器特性

使用Babel編譯代碼，或使用特定的polyfills（polyfill.io）

在當今的情況下，應該在新項目中使用jQuery嗎？

讓我們回答一下這篇文章標題中提出的問題。如果你還不熟悉jQuery，現在學習它是否值得？

在我看來，對於僅針對現代瀏覽器的新項目，不應再使用jQuery，當然，如果你的項目因為某些獨特原因或僅因為你使用插件或其他需要jQuery的代碼而依賴它，那麼肯定要繼續使用它。

一些庫也依賴於jQuery，比如Bootstrap。你也可以購買使用了jQuery及其插件的現有模板。

也許你在一個團隊中，前端開發人員並不都是JavaScript專家，他們更習慣於使用jQuery而不是新標準。如果這樣做可以完成工作，那就很好。

也有可能由於需要支援舊瀏覽器的舊標準，你不能使用最新的炫酷技術（如React或Vue），在這種情況下，對於你來說，jQuery仍然非常重要。

tags: [“JavaScript”, “jQuery”, “web development”]