Jquery - intro

Dynamiser une page sans trop d'effort

Jquery est la bibliothèque Javascript qui permet de dynamiser sans (trop d'efforts)  mes pages web.
Elles sont très souvent réalisées à partir de  4 fichiers.
Trois s'exécutent côté Client (navigateur) et sont écrits respectivement en HTML (le contenu de la page) , en CSS (l'esthétique) et en Javascript (et avec la bibliothèque Jquery) pour l'interactivité.
Le dernier  est  écrit en PHP et  s'exécute côté serveur lorsque j'ai besoin d'adapter le contenu en fonction des besoins de l'utilisateur.

Inclure jQuery à ma page

Pour cela, je fais, par exemple, usage d'un  CDN (cdnjs ou Google). Dans l'entête de ma page j'inclus l'appel à la bibliothèque :

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

Puis l'appel de mon script

  <script src="index.js"></script>

Pour que le script interagisse avec la page, je dois identifier quelques éléments de la page ( cf le DOM). Dans ce billet, ma page est élémentaire. Le seul élément que je vais identifier est la balise div ( la seule du code html de ma page) en ajoutant id=test.

Sans ce code ,   <script src="index.js"></script> le navigateur affiche une page "vide" car il n'y a aucun contenu à l'intérieur des les balises  body ou div

Le script index.js

Le fichier javascript index.js  va modifier (interagir) l'affichage en utilisant la bibliothèque jQuery.
Il utilise la fonction jQuery de la bibliothèque.sous sa forme raccourcie $(). Grossiérement, cette fonction transforme tous les éléments de la page (le DOM) en objets jQuery et me permet donc d'y appliquer les méthodes de cette bibliothèque.

$(function(){
   //le contenu du script est entiérement la.
});

$("#test")  cible l'élément "test" ...
NB : pour cibler l'élément d' id=test, on utilise $("#test"), pour cibler les éléments de classe test, on utilise $(".test")

$("#test").append("ce texte est ajout&;eacute; par le script")

...sur lequel s'applique la méthode append() qui insère le contenu situé entre les parenthèses dans l'élément <div id='test'>

 


Mots Clé