Should you use or learn jQuery in 2020?

To use or not to use? To learn or not to learn? Let's see how to avoid using jQuery altogether, and the reasons to continue using it

Regardless of your preference for JavaScript frameworks and libraries, jQuery has played an important role in the JavaScript ecosystem.

It used to be popular a few years ago, and now modern browsers have replaced some of jQuery's requirements (luckily!), but JavaScript libraries are still used by Java.a lot ofPeople.

Why did jQuery become so popular in the first place? First of all, jQuery was born in a world where JavaScript applications are not everything. In the mid-2000s, JavaScript was mainly used to enhance the functions of other widgets that appeared in slides and pages, such as image galleries, date pickers, etc. It is not powerful enough to perform many things without being too slow (of course, the computer is also slower).

It should be noted that jQuery is not the only library, nor is it the first library. Other tools were very popular at the time, such as Mootools, YUI, Dojo Toolkit, Scriptaculous and Prototype. Later, jQuery may become the most famous of them.

There were many interoperability issues with browsers at the time. We have a lot of cross-browser quirks and standardization issues, and jQuery helps us by creating an abstraction layer and solving all workarounds.

jQuery allows you to use CSS selector syntax to select DOM elements. It is very user-friendly and very easy to extend. It makes JavaScript animation easy.

When the term was very popular, it also helped to simplify the work of using AJAX (and its cross-browser differences), which also gave jQuery a good boost in popularity.

Today, we don’t have many browser compatibility issues, andSelector APIwithBring itStandardize the two best features of jQuery in the browser.

jQuery is of course a controversial topic. Some people say that jQuery is a relic of the past, and some people still use it every day. Some people take the time to write aboutWhy we don't need jQuery.

In the past few years, its usage rate has definitely been declining:

jQuery trends

Today, the landscape of JavaScript has changed dramatically. That said, it's still useful to know what jQuery can do for you.

The things we use jQuery for this now have a standardized browser API

Select DOM element

jQuery way:

$('.button')

Now, we can use the Selectors API:

document.querySelector('.button')

If you have more elements:

document.querySelectorAll('.button')

Waiting for the DOM to load

jQuery way:

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

DOM way:

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

Add or remove classes from DOM elements

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')

Remove elements from the DOM

jQuery way:

el.remove()

DOM way:

el.remove()

(Yes, no change)

Change the content of elements 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

Select the parent element in the DOM

jQuery way:

el.parent()

DOM way:

el.parentNode

Listen to events related to DOM elements

jQuery way:

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

DOM way:

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

AJAX request

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))

Animation

Now you can use CSS Transitions or CSS Animations to complete jQuery animations in the browser.

Browser quirks

Use Babel to convert the code, or use specific polyfills (polyfill.io)

Should you use jQuery today?

Let us answer the questions raised in the title of this article. If you don’t know jQuery yet, is it worth learning now?

In my opinion, you should not only use jQuery in new projects targeting modern browsers. Of course, if your project relies on it for some specific reason, or just because you use a plug-in or other code that requires jQuery, you must To continue to use it. .

Some libraries also rely on jQuery, such as Bootstrap. You may also purchase a ready-made template that uses only it and its plugins.

Maybe you are working in a team where front-end developers are not all JavaScript wizards, and they are more used to jQuery than using the new standard. If this can get the job done, that would be great.

You may not have the luxury of using the latest cool technologies (such as React or Vue) because you need to support older browsers with an older standard set. In this case, jQuery is still closely related to you.

Download mine for freeJavaScript beginner's manual


More js tutorials: