To use or not to use? To learn or not to learn? Let’s examine whether you should avoid jQuery altogether and explore the reasons why you should continue using it.

jQuery has played a significant role in the JavaScript ecosystem, although its popularity has declined in recent years due to the emergence of modern browsers. However, many people still rely on this JavaScript library.

In the early-mid 2000s, when JavaScript applications were not yet prevalent, jQuery became popular as it provided a solution to the limitations of JavaScript at the time. It offered an abstraction layer that simplified cross-browser compatibility issues and standardization problems.

jQuery introduced features like selecting DOM elements using CSS selectors and simplified JavaScript animations. It also made working with AJAX (and its cross-browser differences) easier, which contributed to its rise in popularity.

Today, modern browsers have resolved many of the compatibility issues that jQuery addressed. The Selectors API and Fetch API have standardized two of jQuery’s most valuable features. As a result, jQuery’s usage has declined in recent years.

However, it is still essential to understand what jQuery can do for you:

Things We Used jQuery For That Now Have a Standardized Browser API

1. Selecting DOM elements

jQuery way:

$('.button')

Selectors API way:

document.querySelector('.button')

if you have more elements:

document.querySelectorAll('.button')

2. Waiting for the DOM to be loaded

jQuery way:

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

DOM way:

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

3. Adding or removing classes from a DOM element

jQuery way:

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

DOM way:

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

4. Removing an element from the DOM

jQuery way:

el.remove()

DOM way:

el.remove()

5. Changing the content of an element in the DOM

jQuery way:

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

DOM way:

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

6. Selecting the parent element in the DOM

jQuery way:

el.parent()

DOM way:

el.parentNode

7. Listening for events on DOM elements

jQuery way:

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

DOM way:

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

8. AJAX requests

jQuery way:

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

Modern JS way:

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

9. Animations

jQuery animations can now be achieved in the browser using CSS Transitions or CSS Animations.

10. Browser quirks

Transpile your code using Babel, or use specific polyfills like polyfill.io.

Should You Use jQuery Today?

Now, let’s answer the question posed in the title: If you don’t already know jQuery, is it worth learning it now?

In my opinion, jQuery should not be used in new projects that exclusively target modern browsers. However, if your project relies on jQuery for specific reasons or if you are using plugins or other code that requires jQuery, then by all means, continue using it.

Some libraries, like Bootstrap, have dependencies on jQuery. Additionally, if you are working with a team of frontend developers who are more familiar with jQuery than with newer standards, it may be more convenient to use jQuery to get the job done.

Furthermore, if you are required to support older browsers with older sets of standards and do not have the luxury of using the latest technologies like React or Vue, jQuery is still highly relevant.

Overall, whether or not you choose to use jQuery in 2020 depends on your specific project requirements, team expertise, and browser compatibility needs.