Bienvenue dans le cours de KnowledgeCity sur JavaScript avancé. Dans ce chapitre de notre cours, nous examinerons jQuery. Parlons un peu d'abord des raisons pour lesquelles vous pourriez vouloir envisager d'utiliser jQuery, car il y a beaucoup des bibliothèques JavaScript là-bas. Qu'est-ce qu'il y a de si bon dans celui-ci? Eh bien, tout d'abord, c'est assez populaire. J'ai lu une statistique l'autre jour qui disait, 96% de tous les sites Web utilisant JavaScript utilisent jQuery, ce qui représente plus de 75% de tous les sites partout. Donc, c'est assez populaire. Il doit y avoir une raison à cela, et, oui, il y a des raisons. Vous pouvez faire plus avec moins de code. Tout d'abord, manipuler le modèle d'objet de document. Avec JavaScript standard, disons par exemple, que je voulais sélectionner tous les paragraphes du DOM, Je le ferais avec document.querySelectorAll par exemple. Avec jQuery, c'est tout ce que j'ai à faire. Et le moins de code que nous pouvons écrire, plus nous pouvons lancer de code et être plus productifs, et nous voulons vraiment cela. Ainsi jQuery excelle dans la manipulation DOM. Cela facilite également considérablement les appels AJAX que quote-unquote, JavaScript normal ferait l'affaire. Et il a une bibliothèque d'effets assez grande qui exploite les effets de CSS. Et le plus important est, Parce que nous ne voulons pas nous inquiéter à propos de ça non plus, il résume les problèmes inter-navigateurs. jQuery est juste une bibliothèque, c'est une bibliothèque assez étendue comme vous le verrez une fois que nous l'avons installé dans cette leçon. Mais une des choses qu'il fait est-ce qu'il résume les problèmes liés à plusieurs navigateurs, pour que nous n'ayons pas à nous inquiéter. Notre code jQuery doit également fonctionner dans tout type de navigateur sans que nous ayons se soucier de la plupart des spécificités des navigateurs dans le monde. Donc, après avoir dit tout cela, j'espère que nous avons fait un cas où vous allez être intéressé à faire cela. Voyons comment nous pouvons installer cela. Maintenant pour ce cours, Je vais utiliser Visual Studio. Et voici le Visual Studio complet, Community Edition est plutôt ce que j'ai ici. Donc, tous les outils sont disponibles ici, vous pouvez aller le télécharger gratuitement si vous ne l'avez pas. Maintenant, je me rends compte qu'il y en a beaucoup de différents endroits pour lesquels vous voudrez peut-être écrire jQuery ou à partir de différentes technologies que vous utilisez avec lui, donc je vais montrer quelques approches différentes ici et ensuite nous parlerons de ce que nous devons faire pour l'intégrer spécifiquement à l'application que je cours ici. Mais avant tout, la chose la plus simple est juste d'aller le chercher. Nous pouvons donc aller sur jquery.com, il y a la documentation là-bas, de très bons exemples sur la façon de l'utiliser. Mais vous pouvez télécharger jQuery ici. La version actuelle à l'époque de cet enregistrement est 3.5.1, c'est ce que je vais utiliser dans mes projets. Si vous ne souhaitez pas l'installer directement, comme avec la plupart des bibliothèques de toute sorte de popularité, vous pouvez également utiliser le CDN. Vous créez donc un lien vers la version la plus proche de, et avec jQuery, ils vous donnent ces quatre options. Le non compressé, le minifié, le mince et le mince minifié. Donc en fonction de votre position dans votre projet, vous en utiliseriez des différents ici. En règle générale, nous utilisons la version non compressée au moment du développement afin que nous puissions faire du débogage, puis le minifié au moment de la production afin que notre application est plus performant, fonctionne plus facilement, les fichiers sont plus petits. Tout ce genre de trucs. Si vous souhaitez utiliser le CDN, il vous suffit de cliquer dessus et il y a votre lien de script. Donc je peux juste copier ça là-dedans, et comme il est dit, l'origine croisée et l'intégrité sont là-dedans pour le contrôle SRI. Donc si je vais faire ça, alors c'est tout ce que j'ai à avoir dans n'importe quel document dans lequel je souhaite que cela soit disponible. Les autres options, si vous utilisez NPM, ce que nous pouvons faire à partir de Visual Studio. Ce que je dois faire est d'ouvrir une ligne de commande ici, et un joli petit outil que j'ai pour ça, Ouvrez la ligne de commande. Il s'agit d'une extension que vous pouvez ajouter à Visual Studio. Donc, si vous n'utilisez pas spécifiquement Visual Studio, ne vous inquiétez pas trop de cette partie. Mais j'aime ça comme une extension et vous pouvez simplement ajouter des extensions ici via le menu Extensions. Mais la ligne de commande ouverte me donne soit PowerShell ou mon invite de commande Dev ou l'invite de commande par défaut. Et pour celui-ci, cela n'a pas vraiment d'importance. Mais la belle chose que je n'ai pas s'inquiéter quand je fais ça, c'est remarquer que ça me met juste là dans le dossier dans lequel je dois être, Parce que ce que je vais faire ici est juste d'installer jQuery en utilisant NPM, donc Node Package Manager. Et le nom du package est simplement jQuery. Et vous pouvez voir à partir de là, il semble que nous n'avons pas installé NPM. Eh bien, c'est assez facile à réparer. On y va. Vous pouvez réunir Node js et NPM. Alors je vais aller de l'avant et installer celui-là. Et nous allons laisser cela faire son travail et revenir dans une seconde. Très bien, nous sommes de retour à travers la magie de la vidéo. Voyons si NPM est actuellement installé. C'est bien, nous obtenons la documentation. Et en s'assurant que jQuery entre là-dedans, encore une fois, c'est une question assez simple du package est juste nommé jQuery et cela devrait tout installer pour nous. Donc, dans ce projet particulier, ce que ça a fini par faire pour moi créait un dossier de modules de nœud. Maintenant, si cela apparaît grisé dans votre projet ou si vous ne le voyez pas du tout, voici comment nous l'obtenons dans Visual Studio. Tout d'abord, nous voulons nous assurer que tous les fichiers s'affichent affiche tous les fichiers. Et vous verrez des dossiers ici et des fichiers qui ne sont pas réellement considérés comme faisant partie de votre solution mais ils sont dans le répertoire. Donc, si le vôtre apparaît comme ça, par exemple, alors nous voulons y inclure dans le projet, afin qu'il fasse partie du projet. Et c'est là que tous nos packages de nœuds vont aboutir. Et c'est là que se trouve jQuery. Maintenant, pour ce type particulier de projet, Je fais une application ASP.NET Core. Et pour ce type de projet particulier, pour que les fichiers statiques soient diffusés, Je dois apporter une modification au fichier startup.cs. Donc, encore une fois, si vous n'utilisez pas Visual Studio ou la méthode du projet d'application Core pour le construire, ne t'inquiète pas pour cette partie, demandez à NPM d'installer jQuery comme vous pouvez le faire puis allez-y et utilisez-le. Mais pour ce type d'application particulier, nous avons besoin de cet appel pour utiliser des fichiers statiques, c'est juste quelque chose dont l'application a besoin. Et je prends juste le chemin racine de mon application, y plaçant le dossier des modules de nœuds, afin qu'il serve le jQuery de cet endroit particulier. Maintenant, quand je finis par faire ça, puis de retour sur ma page afin d'obtenir la référence, ce n'est encore qu'une référence de script. Et la source là-bas, nous allons y aller à partir des modules de nœuds vers le bas. Nous avions donc notre package jQuery là-dedans. Et, voyons, je crois que c'est dans un autre sous-dossier. Donc il y a dist et je vais juste utiliser quel que soit le fichier jQuery qui s'y trouve. Ce serait donc jQuery.js. Donc, n'importe lequel de ces moyens est très bien. Cependant, vous souhaitez insérer ce script là-dedans, tout ce qui fonctionne pour vous, alors c'est très bien. Et testons et assurons-nous que nous avons réellement quelque chose. Ce que nous appelons toujours, c'est la fonction jQuery. Et vous pouvez donc utiliser le mot réel, jQuery. Mais ce que vous verrez probablement la plupart des gens faire utilise le signe dollar. Nous pouvons donc faire l'un ou l'autre, c'est très bien. Maintenant il y a une possibilité qu'une autre bibliothèque utiliserait le signe dollar comme quelque chose d'important. Alors qu'est-ce que tu peux faire alors, c'est essentiellement abandonner le contrôle du signe dollar à cette autre bibliothèque si vous l'avez, et vous pouvez faire ce qu'on appelle le mode sans conflit. Donc, par exemple, je pourrais nommer tout ce que je veux, jq est assez standard, puis nous appellerions jquery.noConflict. Alors maintenant pour le reste de ce que nous allons faire, jq appelle la fonction jQuery et alors nous pouvons faire tout ce que nous devons faire. Document prêt est quelque chose que vous vous retrouverez à utiliser assez souvent dans les applications jQuery. C'est ce qui fonctionne quand tout se charge. Donc, je n'ai pas besoin de mode conflit, Je vais simplement utiliser la fonction jQuery ici. Et ce que nous faisons, c'est regarder l'objet document et puis tout cela s'exécute lorsque notre document se charge. Alors faisons juste un petit bonjour le monde ici, et assurez-vous que la méthode que nous avons choisie fonctionne. Je vais juste continuer et utiliser ce CDN pour le moment. Et nous allons tout sauver et nous devrions avoir nous-mêmes une page. Prêt pour le monde Hello le plus mémorable de tous les temps? Mieux que tous les autres que vous ayez jamais vus. On y va. Salut. Vous voyez, c'est mal orthographié, c'est très mémorable. Donc, dans cette leçon, nous avons examiné diverses façons pour installer jQuery dans votre projet. Restez à l'écoute pour la prochaine leçon, nous examinerons plus en détail la fonction jQuery et l'ensemble d'éléments enveloppés et comment utiliser les sélecteurs.
