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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* jQuery */ | |
| $('#some-id'); | |
| /* JavaScript */ | |
| document.getElementById('some-id'); |
Pour une sélection multiple, vous devez itérer par vous-même en JavaScript natif.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* jQuery */ | |
| $('#nav-list>li'); | |
| /* JavaScript */ | |
| let elements = document.querySelectorAll('#nav-list>li'); | |
| for (let element of elements) {} |
Navigation dans l’arborescence.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* jQuery */ | |
| someElement.parent(); | |
| someElement.children.eq(0); | |
| /* JavaScript */ | |
| someElement.parentNode; | |
| someElement.children[0]; |
Manipulation du HTML
jQuery utilise toujours des méthodes (pas des propriétés).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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`; |
jQuery a quelques méthodes spéciales pour normaliser certaines propriétés, telles que les valeurs des champs dans un formulaire.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* jQuery */ | |
| someInputElement.val(); | |
| someInputElement.val(`New value`); | |
| /* JavaScript */ | |
| someInputElement.value; | |
| someInputElement.value = `New value`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* jQuery */ | |
| element.data('customName'); | |
| element.data('customName', `Value`); | |
| /* JavaScript */ | |
| element.dataset.customName; | |
| element.dataset.customName = `Value`; |
Manipulation du CSS
jQuery ajoute les unités automatiquement, pour que vous puissiez faire des calculs facilement.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* jQuery */ | |
| someElement.css('margin-left', 100); | |
| /* JavaScript */ | |
| someElement.style.marginLeft = '100px'; |
Manipulation des classes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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'); |
Animations
Un standard Web Animations est en train d’arriver en JavaScript. Pour l’instant, utilisez les transitions CSS3.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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'; |
setTimeout() a toujours été du JavaScript natif.
Evénements
Ecouter un événement.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* jQuery */ | |
| element.on('click', (event) => { | |
| event.preventDefault(); // Optional | |
| // Do something | |
| }); | |
| /* JavaScript */ | |
| element.addEventListener('click', (event) => { | |
| event.preventDefault(); // Optional | |
| // Do something | |
| }); |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* jQuery */ | |
| jQuery(($) => { | |
| // Launch your features | |
| }); | |
| /* JavaScript */ | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Launch your features | |
| }); |
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.