Tableau récapitulatif des événements

Événement Description
click Clic de l'utilisateur sur un élément
dblclick Double clic de l'utilisateur sur un élément
mousedown Bouton de la souris enfoncé
mouseup Bouton de la souris relâché
mouseenter Souris entre dans un élément
mouseleave Souris quitte un élément
mousemove Mouvement de la souris
focus Élément reçoit le focus
blur Élément perd le focus
keydown Touche enfoncée
keypress Touche pressée (événement historique, aujourd'hui plutôt remplacé par keydown)
keyup Touche relâchée
input Valeur changée
change Valeur changée et perte de focus
submit Soumission de formulaire
resize Redimensionnement de la fenêtre
scroll Défilement de la page ou d'un élément
focusout Perte de focus (bubbling), se propage vers les ancêtres
focusin Réception de focus (bubbling), se propage vers les ancêtres
dragstart Début du glissement
drag Glissement de l'élément
dragend Fin du glissement
drop Dépôt de l'élément 
// jQuery
const input = $('input[name="__"]');
const classe = $('.maclass');
const id = $('#monid');

id.on('click', function (e) {
  e.preventDefault();
});

input.on('click change', function (e) {
  e.preventDefault();
});

// Vanilla JS
window.addEventListener('resize', (e) => {
  console.log('Fenêtre redimensionnée', e.type);
});

const timer = setTimeout(() => {
  console.log('Timer terminé');
}, 200);

console.log('');
console.error('');

Prêt du DOM

// jQuery
$(document).ready(() => {
  console.log('DOM prêt côté jQuery');
});

// Vanilla JS
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM prêt côté Vanilla JS');
})

Console

Méthode Description
console.log('Bonjour') Affiche Bonjour ou une variable
console.error() Affiche un message d'erreur
console.warn() Affiche un avertissement
console.info() Affiche des informations générales
console.debug() Affiche des messages de débogage
console.clear() Efface la console
console.table() Affiche en tableau
console.time('toto') / console.timeEnd('toto') Arrête le compteur de temps et affiche le temps écoulé dans la console
console.group('toto') / console.groupEnd('toto') / console.groupCollapsed() Crée un groupe de messages dans la console, facilitant l'organisation
console.assert(false, 'Erreur : xxxx') Affiche un message d'erreur si l'assertion est fausse
console.count('toto') / console.countReset('toto') Affiche le nombre de fois que cette ligne a été appelée avec la même étiquette
console.trace() Affiche une trace de la pile d'exécution à l'endroit où elle est appelée
console.dir() Affiche un objet dans un format interactif, permettant d'explorer ses propriétés 
// Afficher les résultats
console.log(`Loop 1 Time: ${loop1Time.toFixed(3)}ms`);

Correspondances jQuery ↔ Vanilla JS

Pour chaque besoin courant, voici l'équivalent moderne en JavaScript natif. Dans la plupart des cas, Vanilla JS suffit aujourd'hui — jQuery n'est plus indispensable.

Sélection d'éléments

// jQuery
$('#monid');            // par id
$('.maclass');          // par classe
$('input[name="x"]');   // par sélecteur CSS

// Vanilla JS
document.getElementById('monid');
document.querySelector('.maclass');       // le premier
document.querySelectorAll('input[name="x"]'); // tous (NodeList)

Contenu, valeurs et attributs

Besoin jQuery Vanilla JS
Texte el.text() el.textContent
HTML el.html() el.innerHTML
Valeur de champ el.val() el.value
Lire un attribut el.attr('href') el.getAttribute('href')
Écrire un attribut el.attr('href', '/x') el.setAttribute('href', '/x')
Data-attribute el.data('id') el.dataset.id
Propriété (checked…) el.prop('checked') el.checked

Classes et styles

// jQuery
el.addClass('actif');
el.removeClass('actif');
el.toggleClass('actif');
el.hasClass('actif');
el.css('color', 'red');

// Vanilla JS
el.classList.add('actif');
el.classList.remove('actif');
el.classList.toggle('actif');
el.classList.contains('actif');
el.style.color = 'red';

Créer, insérer, supprimer

// jQuery
const $node = $('<li>').text('Élément');
$('ul').append($node);
$node.remove();

// Vanilla JS
const node = document.createElement('li');
node.textContent = 'Élément';
document.querySelector('ul').append(node);
node.remove();

Parcours du DOM

Besoin jQuery Vanilla JS
Parent el.parent() el.parentElement
Ancêtre correspondant el.closest('.x') el.closest('.x')
Enfants el.children() el.children
Élément suivant el.next() el.nextElementSibling
Recherche interne el.find('.x') el.querySelectorAll('.x')

Délégation d'événements

Utile pour des éléments ajoutés dynamiquement : on écoute sur un ancêtre stable.

// jQuery
$('ul').on('click', 'li', function () {
  console.log('Clic sur', this.textContent);
});

// Vanilla JS
document.querySelector('ul').addEventListener('click', (e) => {
  const li = e.target.closest('li');
  if (li) console.log('Clic sur', li.textContent);
});

Requêtes AJAX

// jQuery
$.ajax({ url: '/api/data', method: 'GET' })
  .done((data) => console.log(data))
  .fail((err) => console.error(err));

// Vanilla JS (fetch + async/await)
try {
  const res = await fetch('/api/data');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const data = await res.json();
  console.log(data);
} catch (err) {
  console.error(err);
}

Itérer sur une sélection

// jQuery
$('.item').each(function (index) {
  console.log(index, this);
});

// Vanilla JS
document.querySelectorAll('.item').forEach((el, index) => {
  console.log(index, el);
});

En résumé

  • La sélection (querySelector/querySelectorAll), les classes (classList) et fetch couvrent l'essentiel des usages historiques de jQuery.
  • querySelectorAll renvoie une NodeList : on la parcourt avec forEach, mais pour map/filter il faut d'abord la convertir ([...liste] ou Array.from(liste)).
  • jQuery garde son intérêt sur du code existant ou pour son écosystème de plugins ; pour un nouveau projet, le JavaScript natif suffit dans la grande majorité des cas.