Should you use or learn jQuery today?

If you are starting a new project for modern browsers, you probably don’t need jQuery.

If you maintain an existing jQuery project, use a plugin that needs it, or join a team that relies on it, learning jQuery is still useful.

jQuery is not dead. jQuery 4.0 was released in January 2026, and the project recommends using the latest 4.x release for supported applications.

Why jQuery became popular

jQuery appeared when browsers had many compatibility problems.

It gave developers one consistent API for selecting elements, handling events, creating animations, and making AJAX requests.

It also made CSS selectors easy to use:

const $button = $('.button')

Today, browsers provide standard APIs for most of those jobs. You can find the complete jQuery API in the official documentation.

jQuery and modern browser APIs

Let’s compare a few common operations.

Select DOM elements

The jQuery version:

const $button = $('.button')

The browser API:

const button = document.querySelector('.button')
const buttons = document.querySelectorAll('.button')

querySelector() returns the first matching element. querySelectorAll() returns all matches. Both are part of the standard Selectors API.

These native results are not jQuery objects, so this is not always a drop-in replacement for existing code.

Wait for the DOM to be loaded

The jQuery way:

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

The DOM way:

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

Add or remove classes from a DOM element

The jQuery way:

$button.addClass('big')
$button.removeClass('big')
$button.toggleClass('big')

The DOM way:

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

Removing an element from the DOM

The jQuery way:

$button.remove()

The DOM way:

button.remove()

Change the content of an element in the DOM

The jQuery way:

$button.text('Hello')
$button.html('<strong>Hello</strong>')

The DOM way:

button.textContent = 'Hello'
button.innerHTML = '<strong>Hello</strong>'

Use textContent for plain text. Be careful with innerHTML: inserting untrusted strings can create a cross-site scripting vulnerability.

Selecting the parent element in the DOM

The jQuery way:

$button.parent()

The DOM way:

button.parentElement

Listening for events on DOM elements

The jQuery way:

$button.on('click', event => {
  //...
})

The DOM way:

button.addEventListener('click', event => {
  //...
})

AJAX requests

The jQuery way:

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

The modern JS way:

fetch('/api.json')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`)
    }

    return response.json()
  })
  .then(data => console.log(data))

See the Fetch API guide on MDN for request options and error handling.

Animations

jQuery animations can often be replaced with CSS transitions, CSS animations, or the Web Animations API.

Should you use jQuery today?

My advice is to learn the DOM APIs first.

Keep jQuery when it already solves your project’s needs. Removing a working dependency just to follow a trend can create unnecessary work.

For a new project, add jQuery only when a specific dependency or requirement makes it useful.

Related posts about js: