10 fonctionnalités jQuery que vous pouvez remplacer par des API natives

Vous chargez encore jQuery pour quelques méthodes pratiques ? Les navigateurs modernes intègrent des API natives qui gèrent directement la plupart des patterns jQuery, souvent avec de meilleures performances et des capacités que jQuery n’a jamais offertes.

Ce guide couvre dix fonctionnalités jQuery courantes que vous pouvez remplacer en toute confiance par du JavaScript vanilla. Chaque remplacement fonctionne sur tous les navigateurs evergreen, ne nécessite aucun polyfill et vous permet de maintenir une dépendance de moins.

Sélection DOM avec querySelector

Le sélecteur $() de jQuery a simplifié les requêtes DOM. JavaScript natif égale maintenant cette simplicité :

// jQuery
$('.menu-item')
$('#header')

// Native
document.querySelectorAll('.menu-item')
document.querySelector('#header')

Les méthodes natives acceptent n’importe quel sélecteur CSS valide. Utilisez querySelector pour les éléments uniques, querySelectorAll pour les collections. Les deux fonctionnent sur n’importe quel élément, pas seulement document, ce qui rend les requêtes délimitées simples.

Manipulation de classes avec classList

L’API classList remplace les méthodes de classe de jQuery avec une syntaxe plus claire :

// jQuery
$el.addClass('active')
$el.removeClass('active')
$el.toggleClass('active')
$el.hasClass('active')

// Native
el.classList.add('active')
el.classList.remove('active')
el.classList.toggle('active')
el.classList.contains('active')

La classList native prend également en charge plusieurs classes en un seul appel : el.classList.add('active', 'visible'). La méthode replace() échange les classes de manière atomique—quelque chose qui nécessitait deux appels avec jQuery.

Gestion des événements avec addEventListener

Remplacez la liaison d’événements de jQuery par addEventListener :

// jQuery
$el.on('click', handler)
$el.off('click', handler)

// Native
el.addEventListener('click', handler)
el.removeEventListener('click', handler)

La gestion native des événements offre des capacités que jQuery n’expose pas clairement. L’option passive améliore les performances de défilement, et once supprime automatiquement l’écouteur après la première invocation :

el.addEventListener('scroll', handler, { passive: true })
el.addEventListener('click', handler, { once: true })

Parcours du DOM avec closest

La méthode closest() de jQuery trouve l’ancêtre le plus proche correspondant à un sélecteur. L’équivalent natif fonctionne de manière identique :

// jQuery
$el.closest('.container')

// Native
el.closest('.container')

Combinez avec le chaînage optionnel pour un parcours plus sûr : el.closest('.container')?.querySelector('.child').

Requêtes réseau avec fetch

L’API Fetch remplace les méthodes AJAX de jQuery par une interface basée sur les promesses :

// jQuery
$.ajax({ url: '/api/data' }).done(callback)

// Native
fetch('/api/data')
  .then(response => response.json())
  .then(callback)

Fetch fournit l’annulation de requêtes via AbortController—une fonctionnalité que jQuery n’a jamais offerte nativement.

Données de formulaire avec l’API FormData

La sérialisation des formulaires ne nécessite plus jQuery :

// jQuery
$('form').serialize()

// Native
const formData = new FormData(formElement)

L’API FormData gère directement les téléchargements de fichiers et s’intègre parfaitement avec fetch. Si vous avez besoin d’une chaîne de requête similaire au serialize() de jQuery, passez l’instance FormData à URLSearchParams.

Suppression d’éléments avec remove()

La suppression d’éléments est devenue plus simple avec la méthode native remove() :

// jQuery
$el.remove()

// Native
el.remove()

Fini les acrobaties avec parentNode.removeChild(el).

Itération sur les collections

jQuery itère automatiquement sur les collections. JavaScript natif utilise les méthodes de tableau standard :

// jQuery
$('.items').each(function() { /* ... */ })

// Native
document.querySelectorAll('.items').forEach(el => { /* ... */ })

NodeList.forEach() fonctionne directement. Pour les méthodes de tableau comme map ou filter, décomposez en tableau : [...document.querySelectorAll('.items')].

Animation avec CSS et l’API Web Animations

Les transitions CSS gèrent la plupart des besoins d’animation. Pour un contrôle programmatique, l’API Web Animations fournit ce que la méthode animate() de jQuery offrait—avec de meilleures performances en prime :

// jQuery
$el.animate({ opacity: 0 }, 300)

// Native
el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300 })

L’API native peut exécuter les animations en dehors du thread principal lorsqu’elles sont compatibles avec le compositeur.

Document Ready

Remplacez le gestionnaire ready de jQuery par DOMContentLoaded :

// jQuery
$(document).ready(handler)

// Native
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', handler)
} else {
  handler()
}

Ou placez les scripts à la fin de <body> avec l’attribut defer et évitez complètement les vérifications ready.

Conclusion

Supprimer jQuery d’une base de code ne nécessite pas une réécriture complète. Commencez par le nouveau code—utilisez les API natives par défaut. Pour l’utilisation existante de jQuery, des outils comme You Might Not Need jQuery aident à identifier les remplacements directs.

Les API DOM modernes ne sont pas seulement des alternatives à jQuery—elles sont souvent le meilleur choix. Elles sont plus rapides, offrent plus de contrôle et sont livrées avec tous les navigateurs que vos utilisateurs possèdent déjà.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.