Introduction au framework jQuery

Présentation de jQuery

Pourquoi jQuery

La librairie (ou bibliothèque) jQuery a été inventée par John Resig en 2006.
Constatant que le code Javascript pouvait devenir très complexe pour fonctionner avec les différents navigateurs il imagine de créer une bibliothèque de fonctions prêtes à l'emploi et compatibles avec tous les navigateurs.
En effet si désormais le JavaScript est standardisé ce n'était guère le cas en 2006 ; en particulier Internet Explorer avait ses propres méthodes.
A ce jour jQuery reste à ce jour toujours très utile malgré la standardisation du JS et la montée en puissance du CSS avec sa version 3.

Récupération de la bibliothèque

La fameuse bibliothèque jQuery c'est un fait un simple fichier Javascript (extension .js) de 100 ou 300 KO.

Comment récupérer ce fichier ?
Il suffit d'aller sur le site officiel (jquery.com) et de cliquer sur le gros bouton légendé "Download jQuery".
Vous pouvez télécharger soit la version compressé (moins de 100 KO) soit la version décompressée (avec des commentaires et des sauts de ligne) qui est trois fois plus lourde.
Si, par exemple, vous téléchargez la version compressée vous récupérez, en ce début d'année 2017, un fichier nommé jquery-3.2.1.min.js (version qui date de mars 2017).
Tranférez ce fichier dans le dossier contenant vos scripts Javascript et vous pouvez lui donner un nom plus simple; par exemple : jquery.js.

Extrait du fichier jQuery compressé :

C'est illisible pour un humain.

Extrait du fichier jQuery avec commentaires et sauts de ligne :

C'est compréhensible pour un surdoué en JavaScript (lol).

Programmation en JS-jQuery

Si dans une page vous voulez programmer en JS-jQuery plutôt qu'en JS traditionnel vous devez charger la fameuse bibliothèque dans la page web.
Il suffit d'insérer dans la partie HEAD un script qui se présente comme suit :

<script src ="chemin relatif vers la bibliothèque">charger jquery</script>

Le texte entre les balises ouvrante et fermante est facultatif et fait fonction de commentaire ; n'est pas affiché par le navigateur.

Exemple

Imaginons que dans une page on veuille changer le contenu de trois noeuds (texte de ces noeuds doit être tantôt en Français et tantôt en Anglais).

Le code HTML (extraits)

... <script src ="jquery.js"></script> ... </head> <body onload ="ffrancais()"> <h2></h2> <p></p> <p></p> <img src ="../images/anglais.jpg" width ="60" onclick ="fanglais()" /> <img src ="../images/francais.jpg" width ="60" onclick ="ffrancais()" />

Dans la partie HEAD chargement de la librairie jQuery via la balise SCRIPT. Ici on suppose que la bibliothèque jQuery a été renommée et se trouve dans le même dossier que la page web.

Appel d'une fonction sur chargement de la page : body onload ="ffrancais()"

La page contient trois noeuds vides et deux images miniatures : une appelant la fonction de traduction en anglais et l'autre appelant la fonction de traduction en français.

Le code des deux fonctions

function ffrancais() { var texte_francais = "Mon patron est riche et sa femme est très jolie." ; document.querySelector("h2").textContent = "Titre"; document.querySelector("p").textContent = texte_francais ; document.querySelectorAll("p")[1].textContent = "Je suis pauvre et ma femme est moche." ; } function fanglais() { var texte_anglais = "My boss is rich and his wife is very pretty." ; jQuery("h2").html("Title") ; $("p:first").html(texte_anglais); $("p:last").html("I am poor and my wife is ugly."); }

La fonction ffrancais est écrite en JavaScript traditionnel.
La fonction fanglais est écrite en Javascript-jQuery !

Vous pouvez constater que le code est plus concis dans la deuxième fonction.

Examinons de plus près les instructions jQuery !
A chaque fois il suffit simplement d'appeler la fonction jQuery (ou son alias : $).
J'utiliserai pas la suite toujours $ plutôt que JQuery !

Attention si vous préférez utiliser jQuery respectez la casse : Q en majuscule !

La syntaxe d'un instruction jQuery est très simple.

Donc la fonction $ est argumentée avec un sélecteur qui référence un noeud (voire plusieurs).
Si vous connaissez les sélecteurs CSS vous n'aurez aucune difficulté à appréhender les sélecteurs jQuery.
Sachez que les sélecteurs jQuery sont encore plus sophistiqués que ceux de CSS.
Donc dans le premier exemple il s'agit d'un sélecteur de balise ; $("h2") sélectionne toutes les balises H2 de la page.
Dans le deuxième exemple $("p:last") sélectionne la derniere balise P de la page.
Donc avec JQuery la sélection des noeuds du DOM est beaucoup plus simple qu'en JS traditionnel.

Ensuite il y a une méthode jQuery (ici c'est la méthode html) qui modifie le contenu du noeud sélectionné.
Le paramètre de cette méthode doit être le nom d'une variable JS ou une chaîne (donc entre quotes).
Testez l'exemple

Importer jQuery à partir du site google.com

Il y a une autre façon d'intégrer le framework jQuery dans vos pages.
Il suffit de télécharger la librairie à partir du site google.com. Ainsi vous avez toujours accès à la dernière version de jQuery. Reprenons l'exemple précédent. Le code de la page devient :

... <script src ="https://www.google.com/jsapi">Importer jquery à partir de google</script> <script>google.load("jquery","1"); </script> </head> <body onload ="ffrancais()" > <h2></h2> <p></p> <p></p> <img src ="../images/anglais.jpg" width ="60" onclick ="fanglais()" /> <img src ="../images/francais.jpg" width ="60" onclick ="ffrancais()" /> <script> function ffrancais() { var texte_francais = "Mon patron est riche et sa femme est très jolie." ; $("h2").html("Titre"); $("p:first").html(texte_francais) ; $("p:last").html( "Je suis pauvre et ma femme est moche." ); } function fanglais() { var texte_anglais = "My boss is rich and his wife is very pretty." ; $("h2").html("Title") ; $("p:first").html(texte_anglais); $("p:last").html("I am poor and my wife is ugly."); } </script> ...

Sans le savoir vous exécutez une requête AJAX (load() est une méthode de jQuery pour AJAX).
Il y a un chapitre sur AJAX dans le tuto sur jQuery.

Ici les deux fonctions ont été écrites avec jQuery.
Testez l'exemple avec téléchargement de la bibliothèque à partir de google.com

Je suppose que vous avez compris que ça ne marche que si vous avez une connection internet ou encore à défaut de connexion internet si vous n'avez pas vidé le cache. En effet la librairie jQuery est stockée dans la mémoire cache du navigateur.

"Feuille de style" en jQuery

Je vais vous montrer dans cet exemple qu'il est très facile de créer une feuille de style en jQuery.

Attention mon but est ici de vous familiariser avec la syntaxe jQuery et non pas de vous dire qu'il faut maintenant écrire la feuille de style en jQuery à la place du CSS ...

Le code HTML de la page

Dans la partie HEAD il y a bien sûr chargement de la bibliothèque jQuery !
Par contre il n'y a ni lien vers une fichier CSS ni de feuille de style interne !

Pour parler simple ce sera très moche !

Le code de la partie BODY

<body> <button onclick ="fstyle()">Mettre en forme cette page si vous le désirez !</button> <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3</h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h3>Titre de niveau 3 </h3> <p>Corps de texte associé au titre de niveau 3. <br>Blabla blabla Blabla blabla Blabla ... <h2>Titre de niveau 2</h2> <p>Corps de texte associé au titre de niveau 2. <br>Blabla blabla Blabla blabla Blabla ... <h2>Les listes</h2> <ul>Une liste à puces : <li>item 1 de la liste</li><li>item 2 de la liste</li><li>item 3 de la liste</li> </ul> <ol>Une liste numérotée : <li>item 1 de la liste</li><li>item 2 de la liste </li><li>item 3 de la liste </li> </ol> <hr> <h2>Un tableau</h2> <table> <tr> <th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> </tr> <tr> <td >contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td >contenu cellule</td> </tr> <tr> <td >contenu cellule</td><td >contenu cellule</td><td>contenu cellule</td> </tr> </table> <h2>Les images</h2> <img src ="../images/tortue.jpg" > <img src ="../images/toucan.jpg" > <hr> <h2>Les liens hypertextes </h2> <a href = 'http://darchevillepatrick.info' target ='_blank'>Mon site sur la programmation web </a> <a href = 'http://darchevillepatrick.com' target ='_blank' >Mon blog </a>

Remarquez que la première instruction HTML est un bouton de commande qui appelle une fonction JS (utilisation du gestionnaire d'événements de HTML).
Pour le reste du code : rien de compliqué ; des titres, du corps de texte, des listes, un tableau, des images, des liens.

Le script écrit en jQuery

function fstyle() { $("*").css("fontFamily","arial"); $("*").css("color","navy"); $("body").css("width","900px"); $("body").css("border","2px solid navy"); $("body").css("margin","20px auto 20px auto"); $(":header").css("textAlign","center"); $("p").css("padding", "10px"); $("ul,ol").css("fontStyle", "italic"); $("table").css("width","500px").css("margin","20px auto 20px auto"); $("td").css("border","1px solid black").css("paddingLeft","10px"); $("tr").css("height","50px").css("verticalAlign","middle"); $("tr:even").css("background","lime"); $("tr:odd").css("background","yellow"); $("a,img").css("width", "300px"); $("a,img").css("display", "block").css("margin","10px auto 10px auto"); $("button").css("display", "none"); }

Si vous connaissez les sélecteurs CSS vous n'avez aucune difficulté à comprendre ce code.

:header sélecteur qui référence toutes les balises "titre" de la page (h1 à h6); c'est très pratique !

Dans toutes les instructions on applique des mises en forme aux éléments sélectionnés. Donc la méthode est css.
A chaque fois il faut paramétrer cette méthode avec la propriété de mise en forme suivie de la valeur.

Il faut écrire la propriété de mise en forme avec la syntaxe javaScript : pas de tiret ; la lettre qui suit le tiret supprimé est mise en majuscule (exemple : verticalAlign et non pas vertical-align).

Pour limiter les lignes de code on peut chaîner les mises en formes qui s'appliquent au même sélecteur c'est à dire indiquer plusieurs fois la méthode css après le sélecteur.

Dans ce script je vous rappelle que les balises A et IMG sont des balises nativement inline. Donc pour centrer horizontalement des éléments inline il faut les transformer en boîtes (display : block) et leur affecter une largeur.

Notez aussi que dès que vous avez cliqué sur le bouton de commande ce dernier disparaît grâce à la dernière instruction du script: $("button").css("display", "none"). Ainsi la commande ne peut s'appliquer qu'une fois !

Observez très attentivement la mise en forme avant de cliquer sur le bouton de commande.
Testez le code

Variante

Pour une exécution automatique de la fonction de mise en forme il suffit de supprimer dans le code HTML la balise button et d'écrire dans le script à la place de function fstyle() :
$("body").load() ou encore $(window).load() ou encore $(document).load()
Dans ce cas il faut aussi supprimer la dernière instruction : celle relative au masquage du bouton de commande.

this, window, document sont des mots réservés en jQuery
Testez le code avec application automatique de la feuille de style

Exercice : êtes vous en mesure de créer un script jQuery ?

Le code CSS & HTML de la page

... <style> figure img {height : 200px ; } figure figcaption {text-align : center ; } figure {display : none ; } ... <body> <h1>Un bel album photos </h1> <p class ="remarque">Avertissement : page réservée aux hommes !</p> <button onclick ="fafficher()">afficher images</button> <button onclick ="fmasquer()">masquer images</button> <figure><img src = '../images/bikini.jpg'> <figcaption>Jolie fille</figcaption></figure> <figure><img src = '../images/trikini.jpg'> <figcaption>Jolie fille</figcaption></figure> <figure><img src = '../images/monokini.jpg'><figcaption>Déçu ?</figcaption></figure>

Par défaut les images sexy sont masquées puisqu'elle sont contenues dans des balises figure qui sont masquées !

Travail à faire

Vous devez concevoir le script (en jQuery).

Ce thème a déjà été traité dans une autre page en JavaScript traditionnel. Dans chaque fonction il y avait une boucle pour traiter successivement chaque image.
Avec jQuery c'est inutile puisque le sélecteur peut référencer plusieurs éléments (même balisage, même classe). Ainsi $("figure") désigne toutes les balises figure de la page.
Le rendu que vous devez obtenir

Pour ceux qui n'ont pas trouvé

Le script est d'une simplificité déconcertante !
Le script (sans le balisage SCRIPT) :

function fafficher() {$("figure").css("display", "block");} function fmasquer() {$("figure").css("display", "none");}

Reconnaissez que c'est simple. Commencez vous à apprécier la puissance de jQuery ?
Retour menu