Accueil
Mes tutoriels sur la programmation
Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site
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.
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é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 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).
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 c'est à dire
la version compréssée ou décompressée.
Il suffit d'insérer dans la partie HEAD un script qui se présente comme suit :
Le texte entre les balises ouvrante et fermante est facultatif et fait fonction de commentaire ; n'est pas affiché par le navigateur.
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).
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 "jquery.js" 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.
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 !
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 :
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
Evidemment cette solution ne fonctionne que si vous avez une connection internet ou à défaut si vous n'avez pas encore vidé la "mémoire cache. En effet la librairie jQuery est stockée dans la mémoire cache du navigateur.
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 ...
Ce qui serait absurde ! N'oubliez jamais que l'exécution d'un script peut être bloquée par le navigateur ...
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 :
Corps de texte associé au titre de niveau 2.
Blabla blabla Blabla blabla Blabla ...
Corps de texte associé au titre de niveau 3.
Blabla blabla Blabla blabla Blabla ...
Corps de texte associé au titre de niveau 3.
Blabla blabla Blabla blabla Blabla ...
Corps de texte associé au titre de niveau 2.
Blabla blabla Blabla blabla Blabla ...
en-tête colonne 1 | en-tête colonne 2 | en-tête colonne 3 |
---|---|---|
contenu cellule | contenu cellule | contenu cellule |
contenu cellule | contenu cellule | contenu cellule |
contenu cellule | contenu cellule | contenu cellule |
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
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