Comparatif : de jQuery au JavaScript natif

jQuery a été très utile pour les développeurs, quand la compatibilité dans les vieux navigateurs était un gros problème. Heureusement, cette époque est terminée, et comme toutes les nouvelles APIs sont maintenant standardisées, nous devons revenir à du JavaScript natif pour le développement des applications1.

Voici donc un comparatif entre jQuery et le JavaScript natif. Vous allez vous rendre compte qu’aujourd’hui, du JS natif n’est pas plus verbeux que jQuery. Et si vous êtes l’une des dernières personnes au monde à être concernées par les vieux Internet Explorer, il vous suffit simplement de charger polyfill.io et votre code JavaScript natif et moderne fonctionnera sans souci.

Vous trouverez d’autres guides et une explication plus générale ici.

Sélection

Oui, jQuery est un peu plus court, mais aussi plus lent.

/* jQuery */
$('#some-id');
/* JavaScript */
document.getElementById('some-id');

view raw
selection.js
hosted with ❤ by GitHub

Pour une sélection multiple, vous devez itérer par vous-même en JavaScript natif.

/* jQuery */
$('#nav-list>li');
/* JavaScript */
let elements = document.querySelectorAll('#nav-list>li');
for (let element of elements) {}

view raw
list.js
hosted with ❤ by GitHub

Navigation dans l’arborescence.

/* jQuery */
someElement.parent();
someElement.children.eq(0);
/* JavaScript */
someElement.parentNode;
someElement.children[0];

view raw
tree.js
hosted with ❤ by GitHub

Manipulation du HTML

jQuery utilise toujours des méthodes (pas des propriétés).

/* jQuery */
someElement.text();
someElement.text(`New content`);
someElement.html();
someElement.html(`New content`);
/* JavaScript */
someElement.textContent;
someElement.textContent = `New content`;
someElement.innerHTML;
someElement.innerHTML = `New content`;

view raw
content.js
hosted with ❤ by GitHub

jQuery a quelques méthodes spéciales pour normaliser certaines propriétés, telles que les valeurs des champs dans un formulaire.

/* jQuery */
someInputElement.val();
someInputElement.val(`New value`);
/* JavaScript */
someInputElement.value;
someInputElement.value = `New value`;

view raw
val.js
hosted with ❤ by GitHub

Attributs personnalisés.

/* jQuery */
element.data('customName');
element.data('customName', `Value`);
/* JavaScript */
element.dataset.customName;
element.dataset.customName = `Value`;

view raw
data.js
hosted with ❤ by GitHub

Manipulation du CSS

jQuery ajoute les unités automatiquement, pour que vous puissiez faire des calculs facilement.

/* jQuery */
someElement.css('margin-left', 100);
/* JavaScript */
someElement.style.marginLeft = '100px';

view raw
css.js
hosted with ❤ by GitHub

Manipulation des classes.

/* jQuery */
element.addClass('color-main');
element.removeClass('color-main');
element.toggleClass('color-main');
element.hasClass('color-main');
/* JavaScript */
element.classList.add('color-main');
element.classList.remove('color-main');
element.classList.toggle('color-main');
element.classList.contains('color-main');

view raw
classes.js
hosted with ❤ by GitHub

Animations

Un standard Web Animations est en train d’arriver en JavaScript. Pour l’instant, utilisez les transitions CSS3.

/* jQuery */
element.animate({marginLeft: 100}, 2000, () => { /* Animation finished */ });
/* JavaScript */
element.style.transition = 'margin-left 2s';
element.addEventListener('transitionend', (event) => { /* Animation finished */ });
element.style.marginLeft = '100px';

view raw
animate.js
hosted with ❤ by GitHub

setTimeout() a toujours été du JavaScript natif.

Evénements

Ecouter un événement.

/* jQuery */
element.on('click', (event) => {
event.preventDefault(); // Optional
// Do something
});
/* JavaScript */
element.addEventListener('click', (event) => {
event.preventDefault(); // Optional
// Do something
});

view raw
events.js
hosted with ❤ by GitHub

Attendre que le DOM soit prêt. Ne démarrez pas avec $ en jQuery, recevez le en paramètre local pour éviter les conflits avec d’autres librairies.

/* jQuery */
jQuery(($) => {
// Launch your features
});
/* JavaScript */
document.addEventListener('DOMContentLoaded', () => {
// Launch your features
});

view raw
domloaded.js
hosted with ❤ by GitHub


1 Je suis au courant du débat autour du fait que jQuery est toujours utile car il corrige de nombreux bugs toujours présents dans les navigateurs. Je suis d’accord avec cela, ce n’est juste pas le sujet de ce guide.

Revenir au sommaire des guides JavaScript