Jquery¶

Dans ce cours, nous utiliserons la libraire Jquery. Cette librairie JavaScript facilite la manipulation du DOM (accès et modification), la gestion des évènements utilisateur, la gestion de requêtes Ajax,…. A titre d’exemple, considérons le code HTML suivant :

<body>
        <div id="monbloc">
                Ceci est un bloc
        </div>
</body>

En JavaScript, l’instruction document.getElementById(“monbloc”) permet d’accèder à l’élément monbloc. En utilisant la librairie Jquery, on écrira simplement $(“#monbloc”).

Supposons que l’on souhaite que le texte soit écrit en rouge lorsque l’on clique dessus, en JavaScript le code correspondant à cette action serait :

var monbloc = document.getElementById("monbloc");
monbloc.addEventListener("click",function(e){
                              monbloc.style.color='red';
                              }
                         );

En Jquery, le même résultat est obtenu par le code suivant :

$("#monbloc").click(function(){
        $(this).css("color","red");
});