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é (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
document.querySelectorAll('h1').forEach((elm)=>{
    elm.classList.add('header');
    }
);