jQuery

jQuery est une librairie Javascript facilitant la manipulation du DOM.
Très populaire avant l'avènement des frameworks JS, son utilisation est aujourd'hui plus rare.

A intégrer juste avant la fermeture du body de la page :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

npm install jquery

La fonction jQuery ou $ permet d'accéder aux éléments du DOM et remplace :

//Jquery
let elm=$('#bt');

//Javascript
let elm=document.getElementById('bt');

//Jquery
let elms=$('a');

//Javascript
let elms=document.getElementsByTagName('a');

//Jquery
let elms=$('.myClass');

//Javascript
let elms=document.getElementsByClassName('myClass');

//Jquery
let elms=$('a.myClass');

//Javascript
let elms=document.querySelectorAll('a.myClass');

La fonction jQuery ou $ retourne 1 jQuery object pouvant contenir 0 ou plusieurs éléméents du DOM.

Elle expose des méthodes dont certaines vont pouvoir modifier tous les éléments retournés (sans avoir à faire une itération).

//Masquage de tous les h1
$('h1').hide();

//Affichage de tous les h1
$('h1').show();

//ajout de la classe header à tous les h1
$('h1').addClass('header');

//Equivalent Javascript
let h1Elms=document.querySelectorAll('h1');
[...h1Elms].forEach((elm)=>{
    elm.classList.add('header');
    }
);

L'objet jQuery permet également d'ajouter des listener sur les éléments du DOM retournés.

//Click sur tous les h1
$('h1').click(()=>console.log('click sur h1'));

//Equivalent Javascript
let h1Elms=document.querySelectorAll('h1');
[...h1Elms].addEventListener('click',(elm)=>{
    console.log('click sur h1'));
    }
);

Ou d'ajouter des écouteurs d'évènements qui pourront être associés aux éléments présents et futurs de la page :

$('body').click('h1',()=>console.log('click sur h1'));

Les évènements peuvent être déclenchés, si la méthode est appelée sans paramètre :

//Provoque le click sur tous les h1
$('h1').click();

Il est parfois nécessaire d'attendre que le DOM soit chargé avant d'exécuter du code :

$('document').ready(function(){
    //Code à exécuter après le chargement du DOM
});

//Version courte
$(function(){
    //Code à exécuter après le chargement du DOM
});