JQuery est donc un framework pour créer des application web. Il en existe d'autres mais nous avons dit pourquoi nous allons utiliser celui-la. La première chose a faire est de telecharger ce code (c'est un fichier javascript)et de l'insérer en haut de notre page web. On peut aussi faire le lien vers le fichier JS officiel ? oui et non JQuery ne veux pas trop qu'on le fasse mais Google et d'autres maintiennent une version en ligne qu'on peut utiliser

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

Au fait c'est quoi .min.js ? C'est quand un gros fichier javascript a été "compacté" en enlevent tout le superflu pour le rendre plus petit (et moins long à telecharger). C'est cool quand quand le code javascript plante ça rend tres dur de lire la stack par ou est passé le code avant de planter. C'est pour ca que chaque fichier .min.js vient avec un autre fichier .map qui aidera le debugger a afficher quelquechose de lisible. C'est pourquoi si vous décidez de telecharger JQuery, soit vous téléchargerez le gros fichier (uncompressed) soit le fichier .min.js ET le fichier .map qui va avec et vous laisserez les 2 fichiers cote à cote. Dans tous les cas vous penserez bien à l'inclure AVANT d'inclure des fichier JS (votre code ou des librairies) qui utilisent JQuery. 

JQuery s'utilise avec le signe $. On peut aussi utiliser jQuery en toute lettre mais personne ne le fait.  On donne ensuite entre parenthèses soit un selecteur à la mode CSS (du texte) soit un noeud/une balise soit du HTML. Le tout va créer un objet JQuery qui représente la ou les balises qui correspondent et sur cet objet on pourra appeler pleins de fonction très pratiques qui agiront sur toutes les balises en questions. Une exemple tres simple:

$( "div p" ).hide(); va cacher (rendre invisible) tous les paragraphes qui sont inclus dans une balise div (genre <div><h1>blah</h1><p>toto</p></div>)

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <style>
    .encadre {
      border: 1px solid black;
      background-color: grey;
    }
   </style>
  <script>

    function thankYou(tag){
      $(tag).css("background", "green");
      $(".truc").css("background", "yellow");
      $("#mabellediv").css("color", "red");
      $("div input").addClass("encadre");
    }

  </script>
</head>
<body >
  Bonjour le monde
  <div>
    Entrez votre prénom :<input type="text" name="prenom" onchange="thankYou(this)"><br>
  </div >
  <div class="truc" id="mabellediv">Dr fred</div>
  <div class="truc" id="monhorriblediv" onclick="ouca(event)">Mr Eric</div>
</body>
</html>


Dans cet exemple les 4 lignes surlignées en jaune sont du JQuery.
  • La première transforme le lien vers la balise html transmise à la fonction (le input au travers de this) en objet jQuery et lui change son style pour que le fond devienne vert. 
  • La deuxième ligne donne un fond jaune à tous les tags de class truc (il y en a deux dans la page)
  • La troisième ligne met le texte en rouge de l'unique balise avec d'ID mabellediv
  • La quatrième ligne ajoute la classe encadre (équivalent de class="encadre") aux tags input qui sont à l'intérieur d'un tag div (il n'y en a qu'un)

Ce style devrait encadré de noir le input et lui donner un fond gris non ? le cadre noir ça marche mais le fond reste vert. En effet même  si ce code vient en dernier, les regles CSS s'appliquent et le style directement sur la balise prend la priorité sur le style de la classe. Si on inspecte l'objet on voit que element.style passe devant .encadre et que le background-color:grey est barré

Il nous reste à voir les fonctions que jQuery peut appliquer mais avant voyons un peu plus en détail ce qu'est un objet jQuery. Si on fait un console.log() dessus on voir un objet comme cela :

où l'on voit que c'est juste un tableau de toutes les tag/balises. Donc autant nous pouvons faire $(tag) pour transformer un tag en objet jQuery on pourra faire $toto[0] pour récupérer le premier tag (le seul si l'objet jQuery est du type #id :  $("#toto")[0])


PS: pour la suite les objets jQuery que je stockerai dans un objet je les nommerai $truc avec un dollar comme premier caractère. C'est uneconvention personnelle qui n'a rien d'officielle.

Le deuxième super-pouvoir de jquery c'est de créer des noeuds HTML facilement. Par exemple

let $monbloc = $("<div id='pourplustard'>la liste<ul><li>le premier</li><li>le second</li></ul></div>"); crée toutes les balises bien imbriquées les unes dans les autres comme il faut. Comme on est dans une chaîne de caractère entre double guillemets(")  j'ai du mettre l'attribut avec une simple guillemet (')

Il y a ensuite plusieurs façon de raccrocher ce bloc de balises dans la page HTML. 

  • l'objet jQuery créé a des fonction comme insertBefore(), insertAfter(), prependTo et appendTo qui permet de le raccrochera TOUS les noeuds qu'on désignera avec le selecteur toujours a la mode CSS 
  • On peut aussi faire un sélecteur sur l'endroit ou l'on veut insérer puis utiliser des fonction after(), before(), append(), prepend() avec comme argument le $monbloc (l'objet jquery qu'on veut insérer) mais on peut aussi avoir comme argument une balise directement ou du texte qui sera transformé en balises 
  • On peut toujours récupérer la/les balise avec $monbloc[0] et les manipuler avec du javascript pur
  • enfin on peut creer les balises une à une et les assembler avec les methodes dont j'ai parlé pour faire le bloc que l'on souhaite. exemple :

let $ladiv = $("<div>");
let $laul = $("<ul>");
 let $preum = $("<li>le premier</li>");
 let $deuze = $("<li>");
$ladiv.append($laul);
$ladiv.attr('id', 'pourplustard');
$ladiv.prepend("la liste");
$laul.append($preum);
$deuze.append("le second");
$deuze.insertAfter($preum);
$("body").append($ladiv);

Attention: vous distinguerai bien $("div") qui sélectionne toutes les balises div de $("<div>") qui crée une seule nouvelle balise de type div (PS Pas besoin de créer "<div></div>");

Vous regarderez bien quand j'insère en utilisant le contenu d'abord puis sa destination ou bien quand je sélectionne la destination puis ce que j'y rajoute. Vous distinguerai aussi quand j'utilise une fonction qui rajoute la balise au meme niveau (avant ou apres) ou quand j'ajoute à l'interieur(en premier ou en dernier). Vous distinguerai enfin quand j'ajoute du contenu texte et quand j'ajoute une balise dans une balise. Tous les cas sont possibles. Le mieux c'est quand même de vérifier dans la console avec un console.log(ceQueJeVaisRajouter) ou dans l'arbre (click droit+inspecter le noeud)


Un troisième truc bien pratique de jQuery c'est que ces appels de fonction peuvent être chainées puisque en plus d'appliquer une action sur l'objet jQuery ces fonctions retournent l'objet jQuery. On peut donc raccourcir 3 lignes en 1 seule :

$ladiv.append($laul).attr('id', 'pourplustard').prepend("la liste"); 

Tout ça est bien pratique mais le plus cool rester à venir. Javascript ne permet pas d'accéder au disque dur ou a tout internet mais il permet d'accéder par internet a un seul lieu : le serveur ou a été chargé la page web. C'est ce qu'on appelle un appel AJAX et la syntaxe javascript est un peu hard. Heureusement jQuery nous offre une fonction bien pratique. Allez vite dans la section ajax ...

Modifié le: vendredi 31 janvier 2025, 09:38