Sommaire partiellement masqué - faites défiler !
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts dans les pages web.
La première version est lancée en janvier 2006 par John Resig.
Attention, programmer en jQuery c'est toujours programmer en JavaScript mais en utilisant entre autres des fonctions de haut niveau (qui évitent
beaucoup de lignes de code). Donc pour aborder ce tuto vous devez avoir quelques notions de JavaScript ...
Dans ce tutoriel les exemples s'affichent tantôt dans un nouvel onglet et tantôt dans une Iframe.
Constatant que le code Javascript pouvait devenir très complexe pour fonctionner avec les différents navigateurs,
John Resig imagine de créer une bibliothèque
de fonctions prêtes à l'emploi et compatible avec tous les navigateurs.
En effet, si désormais le JavaScript est standardisé, ce n'était guère le cas en 2006 ... Il dépendait des navigateurs.
A ce jour jQuery reste à ce jour toujours très populaire malgré la standardisation du JavaScript et la montée en puissance du CSS avec sa version 3.
jQuery est aussi concurrencé par de nouvelles bibliothèques telles que React et Vue.js mais aussi par les progrès du JavaScript natif.
Maintenant jQuery reste très utile dans certaines circonstances. Je prendrai un seul exemple : faire un "glisser-déposer" via jQuery est un jeu d'enfant alors
que si c'est possible en JavaScript pur ça reste beaucoup plus lourd à programmer ...
Attention jQuery présente un inconvénient : il ralentit le temps d'exécution du script puisqu'on rajoute une couche logicielle.
La fameuse librairie jQuery c'est un fait un simple fichier Javascript (extension .js) de 100 ou 300 KO.
Pour 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ée (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 2021, un fichier nommé jquery-3.6.1.min.js (version qui
date de mars 2021).
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 de la version décompressée :
C'est compréhensible pour un surdoué en JavaScript (lol).
Si, dans une page, vous voulez programmer en JS-jQuery (plutôt qu'en JS standard) vous devez charger la fameuse bibliothèque dans la page web c'est à dire
la version compressée ou décompressée.
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>
Imaginons que nous voulons rajouter une classe "cadre" à toutes les images de la page qui bénéficient déja de la classe "image" (et doivent la conserver).
Il faut télécharger le Framework. Ici on suppose que le fichier unique correspondant au framework se nomme "jquery.js" et se trouve dans le même dossier que la page web qui l'appelle.
Chaque image a déjà la classe "image" ; classe qui définit une taille, le positionnement des images, etc.
Il faut via un script rajouter la classe "cadre" mais sans supprimer la classe "image".
Le code est assez lourd ; il faut créer une boucle.
Il est beaucoup plus succinct et se résume en une instruction unique !
$("img").addClass("cadre");
Une seule instruction !
C'est le gros avantage de jQuery par rapport à JS natif : la syntaxe de Jquery est très compacte.
On peut manipuler directement une collection d'éléments, ce qui est impossible en JS natif.
Ce n'est pas par hasard si le slogan de JQuery est : "Write less, do more". Ce qui signifie : Ecrire moins, faire plus.
Ce deuxième exemple de script jQuery a pour objet de vous familiariser avec la syntaxe très concise de ce Framework.
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 :
Remarquez que la première instruction HTML est un bouton de commande qui appelle une fonction JS (utilisation d'un attribut évenementiel).
Rien n'interdit, en effet, dans une page web de combiner du JS natif et du JS-jQuery.
Pour le reste du code : rien de compliqué ; des titres, du corps de texte, des listes, un tableau, des images, des liens.
Si vous connaissez les sélecteurs CSS vous n'avez aucune difficulté à comprendre ce code.
Il existe cependant un sélecteur spécifique à jQuery : :header
qui référence toutes les balises "titre" de la page (h1 à h6); c'est très pratique !
Ce script c'est en fait une feuille de style écrite en jQuery (et non pas en CSS).
Mais alors que le CSS s'applique automatiquement, cette mise en forme ne s'appliquera que si je clique sur le bouton de commmande.
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 ("camelCase") : 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 chainer les appels de méthodes. La syntaxe devient :
$(sélecteur).méthode().méthode().methode() ... ;
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 boites (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 !
Ci-dessous le rendu du code dans un Iframe :
Cliquez sur le bouton de commande pour mettre en forme le texte !
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()
Il faut aussi supprimer dans le script la dernière instruction : celle relative au masquage du bouton de commande.
Le rendu dans un Iframe :
Il y a une autre façon de charger 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.
Deux instructons sont nécessaires.
Sans le savoir vous exécutez une requête AJAX. En effet load() est une méthode de jQuery pour AJAX.
Il y a tout un chapitre sur AJAX dans ce tuto sur jQuery.
Le rendu dans un Iframe :
Evidemment cette solution ne fonctionne que si vous avez une connexion internet.
Le code HTML et JS-jquery de cette page est intéressant. Vous allez en effet comprendre comment remplir des éléments HTML via un script.
Dans le code HTML il y a des éléments vides (un titre H2 et deux paragraphes) et deux images miniatures et cliquables.
Ces éléments vides seront remplis via le script et via à la méthode html() de jQuery tantôt avec un texte en français et
tantôt avec un texte en anglais.
Les deux fonctions sont écrites en jQuery mais l'appel de ces fonctions et réalisé via le HTML (attribut événementiel).
Une partie de la syntaxe vous échappe ? C'est normal. Lisez les chapitres suivants de ce tuto pour apprécie tout l'intérêt de jQuery dans le cadre de la programmation web.
Dans de nombreux sites et ouvrages traitant de jQuery il vous est indiqué que le script jQuery doit démarrer ainsi :
Or dans mes scripts je n'utilise jamais $(document).ready(function() {...}); et ceux-ci fonctionnent quand même ...
Cette instruction veut dire que le jQuery doit être exécuté seulement lorsque la page est chargée (et donc le DOM constitué).
Ce qui tout à fait logique. En effet si vous tentez via jQuery de manipuler des éléments du DOM alors que ce dernier n'a pas été créé
il y aura forcément "plantage" !
Cette instruction est indispensable si le script jQuery se situe dans la partie HEAD de la page.
Or mes script jQuery ne sont jamais dans la partie HEAD mais toujours en fin de page après tout le code HTML. Donc mon script est exécuté seulement après que la page ait été chargée (et le DOM construit). Dans ce cas l'instruction "$(document).ready(function()" est facultative.