L'essentiel de JavaScript

S'initier à jQuery

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Profitez des avantages à utiliser la biblothèque jQuery, plutôt que d'utiliser du JavaScript classique.

Transcription

Alors, que peut-on faire avec cette fameuse bibliothèque jQuery, eh bien, pour lever un coin du voile, j'ai ici un petit fichier JavaScript qui fait quelque chose de très basique, pour le moment, donc j'utilise « getElementByID » pour aller rechercher un élément qui s'appelle « mainArticle » dans le DOM, et puis j'utilise la propriété « className » de cet élément pour appliquer, à cet élément, la classe « highlight », qui est, bien sûr, définie dans ma feuille de style CSS. Si je vais voir dans mon navigateur, eh bien, la classe « highlight », elle met ici, en jaune, et l'élément « mainArticle », vous le voyez, c'est ce pavé qui est ici, en tête en page, en tête de code. Je reviens dans mon JavaScript et je vais commenter cette ligne qui est du pur JavaScript, ce n'est pas encore du jQuery, et je vais vous montrer comment on fait la même chose en jQuery. Alors, en jQuery, je commence par le mot clé, jQuery, qui est ici. Cela signifie, tout simplement, que je veux utiliser cette bibliothèque, l'une des fonctionnalités, en tout cas, de cette bibliothèque. La première chose que je vais faire, c'est aller repérer dans le DOM, dans la page, eh bien le ou les éléments que je veux manipuler. Alors, pour cela, en jQuery, j'utilise un sélecteur. Un sélecteur qui est très similaire à ce qu'on utilise également en CSS. Donc, avec « #mainArticle », je vais aller rechercher l'élément qui a l'identifiant « mainArticle ». Et ce, grâce à une syntaxe que vous connaissez probablement déjà très bien, puisque c'est la même que le CSS. Ensuite, j'utilise la méthode « addClass » du jQuery pour ajouter la classe « highlight » à cet élément. Je sauvegarde, je reviens dans ma page, je rafraîchis et vous voyez que cela me donne, très exactement, le même résultat. Alors, jusqu'à présent, à part le fait que ma ligne de code est un petit peu plus courte, il n'y a pas de très grand changement, mais regardez ce que je peux faire également en jQuery. Alors, c'est presque la même chose, sauf que je n'ai pas le même sélecteur. Ici, vous savez qu'en CSS, le sélecteur « .tourDescription » va sélectionner, dans la page, tous les éléments qui ont la classe tourDescription. Eh bien, c'est exactement ce que je vais faire, en JavaScript, grâce à jQuery. C'est beaucoup plus compliqué de faire cela avec du JavaScript classique. Une fois que j'ai repéré tous ces éléments, je vais demander à jQuery d'appliquer la méthode « addClass », et de lui rajouter la classe « highlight ». Et ça donne quoi ? Je reviens dans mon navigateur, je rafraîchis ma page, et vous voyez, maintenant que plusieurs éléments sont en jaune, si je regarde l'un de ces éléments, clic droit, Inspecter, pour l'ouvrir dans la console, eh bien, vous voyez que ce « div », ici, a maintenant deux classes. La classe « tourDescription » et la classe « highlight ». C'est une grosse différence entre jQuery et JavaScript classique. En JavaScript classique, la propriété « className » va tout simplement écraser ce qui existe et changer ceci avec la nouvelle valeur qu'il y a, ici. Autrement dit, s'il y avait déjà des classes sur les éléments, avec « className », je retire tout et je remplace cela par la valeur que je passe. Ici, en jQuery, avec « addClass », j'ajoute ma classe « highlight », en plus des classes qui existeraient déjà sur mes éléments. C'est très différent et beaucoup plus flexible. Il y a aussi, dans jQuery, la méthode « removeClass », qui me permet de retirer une classe mais de laisser tranquille les éventuelles autres classes qui seraient déjà présentes sur les éléments. Alors, autre chose que je vais faire avec jQuery, je peux sélectionner des éléments, sur base du nom de leur balise HTML. Je pouvais déjà le faire en JavaScript classique, grâce à « getElementsByTagName », alors, ici, regardez, juste pour la forme, je vais aller voir ce que cela donne, je quitte ma console, rafraîchis ma page, et je vais rechercher tous les éléments « li », c'est-à-dire les éléments de listes qui sont dans mon menu, et je vais également rechercher d'autres éléments « li » qui sont dans le fond, c'est pas très joli, je vous le concède, mais cela permet de vous montrer comment jQuery peut utiliser le nom des balises HTML pour rechercher des éléments dans le Dom. Que puis-je faire d'intéressant avec cela ? Eh bien, regardez le sélecteur suivant. Il va chercher également tous les « li ». Une fois que l'on a trouvé tous les « li », on va appliquer un filtre. On va uniquement prendre le dernier d'entre eux, grâce à « :last ». Et je vais appliquer, dans cette classe « highlight », uniquement, à ce dernier « li » de la page. Regardons ce que cela donne : je rafraîchis, et vous voyez qu'uniquement le dernier, ici, est en jaune, les autres « li » de la page y compris ceux qui sont dans le menu du dessus, ne sont pas en jaune. C'est parce qu'ils ne sont pas les derniers de la page. Un seul est affecté : le dernier « li » dans ma page. Beaucoup plus compliqué à faire en JavaScript classique. Ici, il ne me faut qu'une toute petite ligne de code. Et cela va plus loin que ça. Regardez, en jQuery, je vais chercher tous les paragraphes de la page, et puis je vais filtrer pour ne garder que les paragraphes qui contiennent ce mot « volutpat », et c'est uniquement à ces paragraphes-là que je vais ajouter ma classe « highlight ». Je sauvegarde, je reviens ici, je rafraîchis, et uniquement certains paragraphes sont en jaune, mais pas tous. Regardez celui-ci n'est pas en jaune parce qu'il ne contient pas le mot « volutpat » que j'utilise dans mon sélecteur jQuery. Voyez que c'est très puissant, très simple à utiliser également, tout ce que je vous ai montré ne prend qu'une seule ligne de code. Petit raccourcis dans le jQuery, plutôt que de toujours taper jQuery, sans oublier, bien sûr, le Q majuscule, puisque JavaScript, vous le savez, est sensible à la « case », eh bien j'ai un raccourcis qui est $. Alors, c'est quoi $ en JavaScript ? Ce n'est rien de particulier, c'est tout simplement un caractère qui est autorisé dans le nom des variables. Ici, en jQuery, $ est une variable avec un petit nom, d'un seul caractère, qui est en fait un alias vers l'objet jQuery. Donc, taper jQuery avec un grand Q ou « $ », c'est exactement la même chose. En plus d'avoir des sélecteurs, eh bien, jQuery a également des effets. Regardez ceci, je vais chercher tous les paragraphes de ma page, je demande à jQuery de les cacher. Grâce à la méthode « .hide », le 4 000 qui est ici, représente 4 000 millisecondes, donc 4 secondes, je demande à jQuery de cacher mes paragraphes en 4 secondes. Qu'est-ce que ça donne ? Je reviens dans mon navigateur, je rafraîchis et en 4 secondes, mes paragraphes disparaissent. Voilà 4 secondes plus tard, plus de paragraphes. C'est jQuery qui s'occupe de faire, tous les « setInterval », les « clearInterval », les « timeOut », les « fadeIn », les « fadeOut », etc., Bref, je n'ai pas besoin de m'occuper de la mécanique, en une seule petite instruction, regardez, j'ai caché tous mes paragraphes. J'ai d'autres effets. Regardez. Je vais de nouveau chercher tous mes paragraphes, mais cette fois-ci, je vais appliquer l'effet « fadeOut », donc un fondu en fermeture, pendant 4 000 ms également, je sauvegarde, je reviens dans ma page, je rafraîchis, cette fois-ci, en 4 secondes, mes paragraphes, disparaissent dans un fondu, un « fadeOut ». Alors, je reviens dans mon JavaScript, ici, je vais commenter ce petit effet. Je peux aussi gérer mes événements, en jQuery, donc, regardez ici, je vais dé-commenter ces trois lignes de code, je vais chercher l'élément qui a l'identifiant « pageID », et puis « .click », je vais associer une fonction anonyme, ici, à l’événement « click » de cet élément et cette fonction va aller rechercher ce même élément et changer son texte. Alors, ici, vous voyez que j'utilise « .text », donc pas de « innerHTML », pas de « createTextNote », pas de « appendChild », tout ça, c'est jQuery qui prend en charge, uniquement « .text », je passe une chaîne de caractères et regardez ce que cela va donner, je reviens ici, je rafraîchis ma page. L'élément en question est le titre « Circuits », là au-dessus, quand je clique dessus, vous voyez que je change le contenu de ce titre. Alors, je reviens dans mon JavaScript, je vais re-commenter ces trois lignes de code, et dé-commenter les suivantes, ici, regardez, je vais faire presque la même chose, je vais aller chercher tous les éléments H2 et je vais associer un élément « .click » à ces éléments H2. et puis, je vais aussi changer le texte, mais de quoi ? Eh bien, de « this », et c'est quoi ? C'est l'élément sur lequel je clique. Donc, le sélecteur, qui est ici, va rechercher tous les H2 de la page, sans exception, le sélecteur « this », qui est ici, va ne rechercher que celui des H2 sur lequel j'ai cliqué. Alors, qu'est-ce que cela va donner ? Eh bien, je reviens dans ma page web, je rafraîchis ma page et je ne change, ici, en cliquant sur ces titres, que le texte, que le contenu du titre H2, sur lequel je clique. Donc, vous voyez que le mot clé « this », ici, est très important pour pouvoir spécifier quel élément je veux manipuler. Alors, autre chose que je peux faire avec « this », on va utiliser les effets, alors, je vais aller chercher tous les paragraphes de ma page, et quand je clique sur ces paragraphes, je vais faire un « fadeOut », en deux secondes, je vais les faire disparaître en deux secondes, mais je vais faire disparaître quoi ? Eh bien, uniquement celui des paragraphes sur lequel je clique, c'est-à-dire « this ». Je reviens dans le navigateur, je rafraîchis, je vais cliquer sur un paragraphe, je clique dessus, il n'y a que celui-là qui disparaît, si je clique sur un autre, il n'y a que celui-là qui disparaît, c'est grâce au mot clé « this » de jQuery et du JavaScript. Dernière petite chose que l'on va voir ensemble, on a parlé souvent, dans ce cours, d'un événement qui est « window.onload », qui me permet d'attendre que la page soit chargée, eh bien, cet événement, en JavaScript, a un inconvénient assez important, c'est que je ne peux l'appeler qu'une seule fois. Si, par mégarde, je l'utilise plusieurs fois, uniquement le dernier d'entre eux sera pris en compte. Ici, dans jQuery, j'ai un événement qui est un peu plus flexible, c'est l’événement « .ready », qui fait, à peu près, la même chose que « window.onload », il me permet d'attendre que la page soit complètement chargée. La grosse différence, c'est que je peux appeler cet événement plusieurs fois. Regardez, je vais l'appeler deux fois, ici, une et deux, une fois pour changer le texte de l'élément « pageID » et pour le rendre égal à ceci, le DOM est prêt, et une seconde fois pour changer la couleur de tous les titres H1, vous voyez, ici, le .css, qui est une autre méthode de jQuery. Si je fais cela avec « onload », en JavaScript, eh bien je n'aurai que le dernier d'entre eux qui sera pris en compte. En jQuery, j'aurai les deux qui seront pris en compte, la preuve, je reviens dans mon navigateur, je recharge ma page, et regardez, le texte a changé et tous les H1 de ma page sont en rouge, donc les deux éléments ont été pris en compte. Voici quelques unes des fonctionnalités du jQuery, on a levé qu'un tout petit coin du voile sur la puissance de cette bibliothèque, mais j'espère que vous voyez déjà en quoi ces bibliothèques peuvent vous aider et en quoi elles vous rendent la vie plus facile.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !