---
title: JavaScript : jQuery & Vanilla JS
source: https://synapx.fr/blog/javascript-jquery-vanilla/
date: 2026-06-26
category: Développement
site: SynapxLab
---

# JavaScript : jQuery & Vanilla JS

## 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 |

```js
// 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

```js
// 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 |

```js
// 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

```js
// 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

```js
// 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

```js
// 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.

```js
// 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

```js
// 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

```js
// 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.