Jquery - intro

Jquery est la bibliothèque Javascript qui permet sans trop d'efforts, de rendre plus dynamiques les pages d'un site 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. Il permet d'adapter le contenu aux besoins de l'utilisateur.

Billet créé le :
17 nov 2020

Inclure jQuery à ma page

Le fichier "index.html" décrit ci-dessous figure dans un des onglet en bas de page.
Pour utiliser  la bibliothèque jQuery dans ma page, j'utilise un CDN (par exemple celui de cdnjs ou celui de Google). Pour cela, dans l'entête, j'inclus l'appel à la bibliothèque Jquery stockée sur le CDN de Google par :

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

Puis, toujours dans l'entête, j'appelle mon script JS par :

  <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 figurant dans le code html présenté) 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 , dont le code figure dans un onglet en bas de page,  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" ...
...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'>

information complémentaire disponible en cliquant ici

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")

 

 

Les fichiers

Cliquez sur le bouton pour copier le code
dans le presse papier 

<html>
    <head>
      <meta http-equiv="Content-Type" content="charset=utf-8"/>
      <title> Page interactive de base </title>
      <link rel="stylesheet" href="index.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="index.js"></script>
    </head>
    <body>
      <div id="test">
      </div>
    </body>
</html>
Cliquez sur le bouton pour copier le code
dans le presse papier 

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

Cliquez ici pour afficher ces fichiers dans une fenêtre surgissante

La dynamique d'une page Web s'appuie :

  • des sélecteurs bien identifiés dans le code HTML de la page ;

  • sur un (des) script(s) écrit(s) en javascript, basé(s) sur des bibliothèques "qui évitent au développeur de réinventer la roue".