jQuery MasterClass - avec des animations de site Web

1. Introduction: Bienvenue dans le cours ultime de jQuery. Dans ce cours, vous apprendrez tout sur jQuery, comment ajouter une animation à l'aide de jQuery, comment appeler une API avec Ajax et bien plus encore sur l'africain. En lisant ce cours, vous pouvez immédiatement commencer à utiliser jQuery pour vos sites Web. Et vous apprendrez ces incroyables astuces d'animation, que possèdent aujourd'hui les sites Web modernes. Je suis très enthousiaste à propos de ce cours et j'espère que vous l'êtes aussi. Plongeons-nous dans le vif du sujet. 2. 01 Qu'est-ce que jQuery: Alors, qu'est-ce que jQuery ? Jquery est une bibliothèque JavaScript légère qui permet d' accéder facilement aux éléments du DOM et d'y ajouter de l'action. Un dialogue où il est dit que jQuery moins raison et fait plus de choses. En termes simples. Jquery est le moyen le plus rapide d' écrire du code JavaScript. Exemple. Si nous voulions ajouter un écouteur d'événements de clic pour un bouton, vous pouvez écrire le même code avec jQuery sur une seule ligne. C'est la puissance de jQuery. La bibliothèque Jquery possède de nombreuses fonctionnalités telles que la manipulation du DOM, la manipulation du style, les auditeurs d' événements, les effets, les animations, Ajax pour effectuer des requêtes HTTP et bien plus encore. Il existe de nombreuses bibliothèques JavaScript, mais jQuery est la bibliothèque la plus populaire et la meilleure pour JavaScript. Et si vous travaillez sur presque tous les projets de sites Web, jQuery est très utile pour cela. De nombreuses grandes entreprises réduisent jQuery pour leurs sites Web, comme Netflix, Google, Microsoft, Reddit, Stack Overflow et bien d'autres. Ainsi, après avoir appris jQuery, vous pouvez ajouter jQuery à votre stack technologique. Cela vous aidera également à obtenir le poste ou à devenir un meilleur développeur Web. 3. 02 Configuration de l'environnement: Configurons rapidement notre environnement pour ce cours. Dans la zone de description, vous obtiendrez le fichier zip des ressources, téléchargé et décompressé. Dans ce dossier Resources, vous obtenez ce dossier de démarrage jQuery, ouvrez et vous ouvrez ce dossier dans VS Code. Voici maintenant un fichier index.html et un fichier script.js. Je lie ce fichier script.js à notre fichier HTML. Exécutons donc ce fichier HTML avec Live Server. Nous n'avons donc pas besoin de réprimer notre navigateur, et à chaque fois ? Si vous n'avez pas ce pouce supplémentaire, je vous suggère d'installer cette accélération. Maintenant, ouvrons la console et voyons qu'elle fonctionne. 4. 03 Comment installer jQuery: Voyons maintenant comment ajouter un projet jQuery, HTML, CSS et JavaScript. Il existe donc deux manières d' ajouter jQuery dans notre projet. Nous pouvons télécharger le fichier jQuery. Comment commencer à utiliser le lien CDN. Tu peux utiliser ce que tu veux. C'est entièrement à toi de décider. Tout d'abord, voyons comment télécharger le fichier jQuery. Rendez-vous sur jquery.com et cliquez sur ce bouton Télécharger jQuery. Maintenant, si nous voulons voir code signifie ce qui se trouve dans le fichier, cliquez sur la version de développement de jQuery. Et si vous ne voulez pas voir ce noyau, vous pouvez utiliser la version compressée de jQuery. deux accords sont identiques, mais la différence est que le fichier de version compressé est plus petit que le fichier de version de développement car dans les glomérules ou les zones, ils suppriment tous les espaces inutiles. C'est pourquoi nous ne pouvons pas lire le code contenu dans ce fichier. Je copie ici la compression de la personne notée. En code VS. Nous créons un nouveau fichier appelé jQuery point js et collons ce code dans ce fichier. Enregistrez ceci et maintenant dans notre fichier HTML à la fin du corps. Et avant la balise script, nous ajoutons une autre balise de script. Et source, jQuery point js. Et c'est tout. Nous installons notre jQuery. Voyons maintenant la deuxième méthode, qui est la plus simple et la plus facile. Revenons à notre navigateur. Et faites défiler cette page vers le bas dans la section Autres CDN. Ici, nous avons le CDN de Google. Cliquez dessus et copiez ce dernier quartier A3x. Revenons maintenant à VS Code et décommentez cette balise de script. Et ensuite, basez ce lien CDN. Si vous ne souhaitez pas utiliser la méthode post, vous pouvez supprimer cette balise de script la plus ancienne. Je vais le garder pour référence. Et c'est tout. Nous avons installé avec succès jQuery dans notre projet. 5. 04 Syntaxe de jQuery: Comme je vous l'ai dit, jQuery est très utile pour accéder aux éléments du DOM et effectuer des actions pour eux. Voici donc une syntaxe de base de jQuery. Quels éléments du DOM d'accès ne prêtent pas à confusion à ce sujet. C'est vraiment très simple. Permettez-moi de vous montrer que la syntaxe comporte trois parties principales. Le premier est ce dollar. Dollar est assigné à accéder à jQuery depuis le CDN. Téléchargez ce fichier jQuery localement. Ensuite, nous avons un sélecteur, qui est utilisé pour définir l' élément ou les éléments, par exemple réécrire dollar p. Ensuite, il sélectionnera tous les éléments de paragraphe dans notre fichier HTML. Et enfin, nous avons l'action, c' est-à-dire l'action que nous voulons accomplir. Quel exemple ici nous ajoutons simplement hide. Masquer est l'action que nous voulons effectuer pour tous les éléments du paragraphe. Ce simple bout de code masque donc tous les éléments de paragraphe de notre page Web. Vous pouvez voir à quel point il est simple et facile de masquer tous les éléments de paragraphe. Donc, les développeurs de sites et les grandes entreprises aiment tellement jQuery. 6. 05 sélecteurs dans jQuery: sélecteurs jouent un rôle très important dans jQuery car ils sont utilisés pour sélectionner des éléments HTML à partir page Web en fonction de leur nom de balise, de leur nom famille, de leur identifiant, de leurs attributs et de leur valeur d'attribut. Voyons comment nous pouvons y parvenir. Pratiquement. Ce que Stovall dans le fichier index.html, nous y ajoutons une balise de paragraphe. Ajoutez simplement un texte aléatoire avec Laura et Phi au début du premier paragraphe. Maintenant, je duplique ce paragraphe deux fois de plus et le change en paragraphe par paragraphe T. Cellules et jette un œil. Nous avons trois paragraphes. Maintenant, dans le fichier script.js, réécrivez variable excédentaire jQuery, qui est dollar. Et puis entre parenthèses, nous ajoutons B entre guillemets doubles. Maintenant, papa, il faut ajouter de l'action, disons se cacher. Vous savez donc ce qui se passera lorsque nous enregistrerons le fichier ? Écrivez votre réponse dans la zone de commentaires afin que je puisse voir combien de personnes apprennent avec moi. Maintenant, sauvegardez ceci. Et C sont toutes des balises p ou masquées. C'est ainsi que nous sélectionnons tous les éléments du paragraphe. Si nous écrivons ici H1, cela sélectionnera toutes les balises H1 de la page Web. Maintenant, dans le fichier HTML, j'ajoute du verre dans le deuxième paragraphe appelé second. Maintenant, intégrité, j'étais de P. Nous ajoutons le point en second. Cela sélectionnera tous les éléments qui sont en verre en second, ce qui constitue notre deuxième paragraphe. Enregistrez ceci et découvrez que notre deuxième paragraphe est désormais masqué. Si nous ajoutons ici le point P en second, cela sélectionnera tous les paragraphes dont le nom de classe est le second. Il fonctionne de la même manière que les sélecteurs CSS. Passons maintenant au troisième paragraphe, id, troisième. Maintenant, pouvez-vous deviner comment nous pouvons sélectionner les éléments en fonction de leur identifiant ? Si nous utilisons un point par nom de classe, alors nous utilisons here has ID. est aussi simple que ça. Hein ? Il en a un troisième. Remplissez ceci et jetez-y un coup d'œil. Le paragraphe dont l'identifiant est le troisième est masqué. Vous pouvez voir à quel point il est facile de sélectionner des éléments dans jQuery. En JavaScript, nous devons écrire le document point get element par nom de classe ou par ID. Il existe maintenant de nombreux sélecteurs douaniers dans jQuery. Je ne veux pas vous ennuyer chaque sélecteur individuellement. Voici donc un tableau de sélecteurs, et dans la colonne de description, vous pouvez lire sa description. C'est très simple et facile. Si vous avez des doutes, vous allez me le demander dans la section des commentaires. 7. 06 événements: Les événements sont donc une partie très importante de toute page Web. Il s'agit essentiellement d'une réponse aux actions de l'utilisateur. Par exemple, sur le site Web YouTube, vous appuyez sur F pour voir la vidéo en plein écran. Cliquez sur le bouton Play pour lire la vidéo. Donc, en appuyant sur G et Gleick lors d'événements. Il existe donc quatre types d' événements DOM disponibles dans jQuery. Événements de la souris, événements du clavier, mouvements de liaison et document. Quels sont les événements que nous organisons ? Supposons donc que Jack Miles urine. Notez que je ne vous montre pas tous les événements car c'est un peu ennuyeux et prend du temps. Nous verrons les événements qui nous sont généralement utiles. Si nous voulons vérifier tous les événements, vous pouvez consulter la documentation officielle. Le premier événement est donc de cliquer sur le fichier HTML. J'ajoute un bouton, disons masquer. Et donnez-lui un identifiant appelé btn hide. Maintenant, ce que je veux faire c'est que lorsque nous cliquons sur ce bouton Masquer, nous voulons masquer ce deuxième paragraphe dans le fichier script.js. Nous sélectionnons d'abord le bouton Masquer. Donc, le dollar a une hauteur de soulignement BTN. Maintenant, nous ajoutons ici un événement point and click. Maintenant, dans cette méthode Click, nous devons ajouter une fonction de rappel, qui s'exécutera lors de cet événement de clic. Alors, fonctionnez. Et dans cette fonction, réécrivez le dollar. Masquer le deuxième point. En gros, cette expression signifie que lorsque vous cliquez sur ce bouton btn Hide, exécutez cette fonction. Et cette fonction masquera le deuxième paragraphe. Enregistrez ceci et jetez-y un coup d'œil. Cliquez sur le bouton Masquer. Et le deuxième paragraphe est masqué. Vous pouvez constater à quel point il est simple d'ajouter un événement de clic. Maintenant, pour la souris, nous avons autant d'événements. Tu peux les écrire toi-même. Désormais, le clavier ne comporte que trois événements. Appuyez sur la touche N enfoncée. Ici, sur cette page Web. Lorsque j'appuie sur la touche Esc , ce deuxième paragraphe est masqué. Et puis si nous appuyons sur ASCII, le deuxième paragraphe sera visible. Pour cela, nous ajoutons ici dollar et parenthèses. Maintenant, sur quel élément nous voulons ajouter cet événement clé. Nous souhaitons ajouter cet événement sur la page Web complète. J'ajoute donc ici le corps maintenant la touche point enfoncée. Et nous passons ici la fonction. Notre tâche consiste maintenant à identifier si l'utilisateur appuie sur la touche H ou ASCII. Si vous faites cela auparavant dans ce script, vous savez que tout le monde a son objet d'événement. Et nous obtenons cet objet d'événement comme paramètre de cette fonction de rappel ici, event. Et cet événement important, appelé la plage, renverra la valeur ASCII de k. Comment allons-nous utiliser le point core de votre événement, qui nous donnera le nom de la clé. Mais j'aime bien ça, qu'est-ce qui importe ? Il suffit donc d'écrire l'événement console.log , puis d'appuyer sur Edge. Vois-le. Donc 72, qui est la valeur ASCII de l'arête, puis appuyez sur S et cela renvoie un T3. Revenons donc à notre fichier de script. Nous ajoutons ici la condition si l'événement est un point égal à 72, 10 dollars. Deuxième. Masquer. Ensuite, nous ajoutons un autre événement en direct, point v est égal à un T3. Puis dollar. Deuxième chaussure, jours de soldes et Degas regardez le bord et sa hauteur et appuyez sur S pour qu'elle soit visible. Découvrez à quel point c'est facile avec jQuery. Et si j'étais en panne ? Nous les additionnons et y jetons un coup d'œil. Maintenant, j'appuie sur la touche Esc et je ne m'en rends pas compte. Maintenant, je m'en rends compte. Et le paragraphe est masqué. Ainsi, lorsque nous appuyons sur la touche et que nous réalisons qu'elle fonctionnera 99 % du temps, nous n'utiliserons que l'événement touche enfoncée pour le clavier. Maintenant, nous avons des événements à Guam, ce qui est très utile lorsque nous travaillons avec des formulaires. La syntaxe de tous les événements est donc la même pour chaque événement. Après lavage, vous devez définir un sélecteur puis un nom d'événement à points, puis ajouter une fonction de rappel, qui s'exécutera lors de cette action. est aussi simple que ça. Vous allez écrire ces événements vous-même. Si je vous explique cela, tous les événements un par un que ce tutoriel ne se termineront pas en 2 h. Alors essayez-le vous-même. Et si vous avez des doutes, vous allez me le demander dans la section des commentaires. 8. 07 Masquer et afficher les effets: La méthode Hide and Show est déjà décrite dans la dernière leçon la méthode la plus simple pour masquer et afficher les éléments de notre page Web. Maintenant, dans la méthode hide and show, nous pouvons également spécifier l'heure à laquelle cette action doit être terminée. Disons que nous voulons masquer ce paragraphe en quelques secondes. Cette fonction de hauteur. Nous passons votre temps en millisecondes, soit 2000. Et Taylor. Lorsque nous cliquons sur ce bouton, il faut 2 secondes pour le masquer. Ici, nous pouvons également acheter la fonction de rappel pour cet effet de hauteur, qui s'exécutera une fois cet effet terminé. Laisse-moi te montrer ce que je veux dire. Donc, après un certain temps, je passe votre fonction de rappel. Et dans cette fonction de rappel, la tâche iodide console.log est terminée. Ceci. Et maintenant, je clique sur ce bouton Masquer pour voir comment notre animation est terminée. Ensuite, cette classe a terminé le sprint sur console. Dans cette fonction de rappel, nous allons également masquer d'autres éléments, qui seront masqués après avoir lu cette animation. Maintenant que R1, plus d' impact est activé. Chaînes latérales, ce haut défaut à alterner. Et également dans un fichier HTML, modifiez le texte du bouton pour l' activer et y jeter un œil. Ainsi, lorsque nous cliquons sur ce bouton, si notre paragraphe est visible, il se masquera. Et si ce n'est pas visible, cela apparaîtra aussi simple que cela. Maintenant, avant de passer au sujet suivant, je voulais vous donner un conseil très important pour jQuery. Ainsi, chaque fois que vous utilisez jQuery ou JavaScript, écrivez votre code dans la fonction document.ready. Cette fonction permet de s'assurer que notre contenu complet est chargé. Ainsi, dans jQuery, nous pouvons écrire un document en dollars prêt à l'emploi. Et à l'intérieur de celui-ci, nous transmettons retours de fonction une fois que notre document est prêt. Pourquoi le dollar fonctionne-t-il encore une fois ? Il s'agit de l' abréviation de document.ready. Mais j'aime bien écrire le premier car si après un jour je ne faisais pas cet accord, je pourrais oublier ce tri. Mais tu peux utiliser ce que tu veux. C'est tout à fait juste. Maintenant. Plus de code dans cette fonction. Parfait. 9. 08 effets de fade et de glissière: Dans jQuery, nous avons quatre types de défauts qui sont utilisés pour payer la visibilité d'un élément. Fade-in, Fade-Out, Toga et V2. Maintenant, ces effets sont assez simples. La lecture est utilisée pour effacer l'élément. Laissez-moi vous montrer l'endroit où se produit cet effet de bascule. J'ajoute simplement « fade out more » ces arguments à ce sujet. D'ailleurs, si nous ne les supprimons pas, cela fonctionnera également car ses arguments désignent presque tous les effets. Enregistrez ceci et jetez-y un coup d'œil. Cliquez sur ce bouton. Et Z, le deuxième paragraphe est effacé. Maintenant, la décoloration sert à l'effet de décoloration. Et le bouton de fondu est très utile pour un effet de décoloration. À l'endroit de ce fondu, nous ajoutons un bouton de fondu. Alors, jetez-y un œil, cliquez sur, cliquez sur le bouton et dites délai expiré. Et les effets de décoloration se font sentir. Maintenant, for it to Effect est utilisé pour gérer la valeur de décoloration, qui est 0 à 10 signifie une opacité nulle et un signifie une opacité totale. Ici, non ? Convient à deux. Dans la fonction, nous devons d' abord passer la période de cet effet, qui est, disons, lente. Et puis on passe en face de D , soit, disons, 01 phi. Enregistrez ceci et jetez-y un œil, cliquez sur le bouton et voyez le paragraphe s'afficher. Parlons maintenant secondaires qui ne sont que trois effets de diapositives. Voyons tous les effets en même temps. J'ai donc simplement remplacé cet effet de fondu. Ces glissières basculent. Activez cet argument. Enregistrez ceci et jetez-y un coup d'œil. Cliquez sur ce bouton et vous verrez d'abord glisser vers le haut, puis vers le bas. Ici. Vous pouvez également augmenter la vitesse en millisecondes, lentement ou rapidement. Cette bascule coulissante est très utile pour créer un effet de barre latérale. 10. 09 Méthode d'animation: Parlons maintenant de la méthode animate dans jQuery. Animate with her permet de créer des animations personnalisées. Cette méthode possède les mêmes propriétés que les autres effets, la vitesse et le rappel. Mais en tout cas, nous devons transmettre les propriétés de l'objet du CSS. Le premier argument, je vais vous le montrer. Ici. J'ajoute une offre avec boîte en verre et j'ajoute un texte factice ici. Et je voudrais ajouter quelques styles pour cette boîte. Donc, après le titre, nous ajoutons une balise de style. Et pour la boîte, nous ajoutons le poids à 200 pixels, la hauteur à 100 pixels. Couleur de fond sur matière noire. Enregistrez ceci et jetez-y un coup d'œil. Tu vois, nous avons une boîte à stomates. Maintenant, lorsque je clique sur ce bouton, je souhaite modifier la largeur, hauteur et la taille de police de ce texte. Pour cela, nous utilisons la propriété animée. Supprimons donc cet effet. Juste ici. Boîte à points en forme de dollar animée. Maintenant, en première position, nous devons transmettre l'objet des propriétés CSS. Nous voulons enchaîner. Ajoutez donc un objet. Et d'abord, nous voulons changer bit Garland entre guillemets doubles, 200 pixels. Maintenant, pour ajouter plusieurs propriétés, nous devons utiliser une virgule, comme nous le faisons dans un objet JavaScript. Maintenant, la hauteur passe à 200 pixels, virgule. Maintenant, si nous avons le nom de la propriété en mots tels que taille unique, nous devons le convertir en CamelCase, sodium déplace ces décès et en fait un capital. Et 20 pixels. Enregistrez ceci et jetez-y un coup d'œil. Cliquez sur ce bouton pour voir la largeur, hauteur et la taille unique changées. Maintenant, nous voulons parfois ajouter 200 pixels à la largeur actuelle. Nous pouvons également le faire avec cette méthode. Ici. L'iodure plus équivaut à 200 pixels. Enregistrez ceci et vous verrez que nous augmenterons de 200 pixels dans le débat actuel. Maintenant, comme autres effets, nous pouvons également transmettre ici la vitesse et la fonction de rappel. Alors, ici, j'écris lentement. Remplissez ceci, jetez-y un coup d'œil et voyez. Nous obtenons cette petite animation. 11. 10 Modifier le HTML avec jQuery: Dans une certaine mesure, nous avons quelques méthodes pour manipuler les éléments du DOM. Nous pouvons choisir le texte, éléments HTML, à partir des valeurs de cet attribut, etc. Il existe donc trois méthodes pour cela. Texte à points, qui est utilisé pour obtenir ou définir le contenu textuel des éléments sélectionnés. Dot HTML, qui est utilisé pour obtenir notre ensemble, le contenu avec le balisage HTML des éléments sélectionnés. Eh bien, qui est utilisé pour obtenir ou définir la valeur des champs de formulaire tels que la saisie, le texte, la valeur sélectionnée, la valeur des cases à cocher, etc. Voyons cela pratiquement ici. Je voudrais obtenir le texte du deuxième paragraphe. Dans le bouton, cliquez sur. Je viens d'essayer le dollar. Texte du deuxième point. Ensuite, saisissez-le avec les agendas de terrain du journal à points de la console et jetez-y un œil. Cliquez sur ce bouton et z, le texte contenu dans ce deuxième paragraphe. Maintenant, nous pouvons également définir le texte comme nous le voulons dans ce deuxième paragraphe pour cette hauteur, ici, deuxième point en dollars. Et ici, dans ce texte, je passe juste un autre texte comme celui-ci est le didacticiel jQuery. Ces agendas. Et vous voyez, lorsque nous cliquons sur ce bouton, le texte change. Nous avons maintenant une deuxième méthode appelée HTML, qui est très similaire à cette méthode de texte. Donc, dans le deuxième paragraphe, j'ajoute simplement ici une balise en gras. Ce paragraphe deux. Maintenant, dans ce fichier script.js, je duplique cette ligne de console et remplace ce texte par du HTML. Ceci, et cliquez sur ce bouton. Désolé, nous devons commenter cette ligne. Maintenant, le fichier et voyez ici, nous obtenons le texte avec des éléments HTML. La méthode fiscale ne renverra donc que le texte. Et la méthode STR renvoie le texte avec des éléments HTML. est aussi simple que ça. Maintenant, pouvez-vous deviner comment nous pouvons définir le code HTML ? Comme nous l'avons dit, le texte, non ? Nous écrivons simplement ici au format HTML. Et une mauvaise conformation. J'ajoute ici mon tag. Qu'est-ce qui met l'accent sur cela ? Et z, nous recevons un texte en italien. C'est donc assez simple. Et si je veux obtenir la valeur de l'élément HTML ? Disons ce bouton. Ici. L'iodure a une peau radieuse. Et après cela, j' ai utilisé la méthode point val pour obtenir la valeur de cet élément. Donc, ceux-ci et dans le bouton, nous devons ajouter de la valeur, la valeur de la propriété étant égale à b, d, et ceux-ci et z nous obtenons ici. Maintenant, si nous voulions modifier cette valeur, nous pouvons également la modifier en transmettant la valeur ici dans la matière du puits. Il existe maintenant une méthode ou des attributs supplémentaires. Donc, si nous voulons obtenir une valeur d'attribut trop spécifique, nous utilisons la méthode d'attribut. Voyons l'exemple. Donc, en oubliant la valeur de l'attribut, nous devons transmettre ici le nom de l'attribut. Et si nous voulons définir la valeur de cet attribut, nous pouvons passer ici un deuxième argument, aussi simple que cela. 12. 11 Modifier CSS avec jQuery: Ainsi, dans jQuery, nous pouvons facilement ajouter, supprimer et basculer des classes, les insérer. Nous pouvons manipuler le CSS de n'importe quelle manière. Et c'est très utile pour créer des animations. Ici, disons que nous voulons ajouter une boîte de classe. Quel est notre deuxième paragraphe. Sur ce bouton, cliquez sur Réécrire le dollar. Cours de deuxième année. Et passez ici le nom de la classe entre guillemets doubles. Ceux-là. Lorsque nous cliquons sur ce bouton, le verre See Walks est ajouté. Vérifions-le. Inspectez. Cliquez donc avec le bouton droit sur la case et accédez à Inspecter. Le verre See Walks est ajouté ici. Maintenant, vous savez déjà ce que fera la méthode de classe à distance. Cela supprimera la classe. Mais voici une question utile qui concerne les fermoirs à bascule. Donc, à la place de cette classe d'ajout, j'ajoute une classe à bascule. Maintenant, la méthode Struggle Glass consiste essentiellement à alterner une classe que nous avons passée entre guillemets doubles. Enregistrez ceci et jetez-y un coup d'œil. Vous voyez, lorsque nous cliquons sur un bouton, boîte en verre est ajoutée, puis cliquez à nouveau. Ensuite, il supprime la classe de boîte. Cette méthode est utile à de nombreux endroits, comme l'icône de la barre latérale lorsque nous cliquons sur l'icône du hamburger. Et cela ajoutera de la classe, ce qui affichera la barre latérale. Et puis nous cliquons à nouveau. Cela masquera le côté, mais technique simple, mais très utile. Maintenant, laisse-moi te montrer quelque chose de vraiment cool. Ici. J'ajoute du style par classe. Ensuite, disons 300 pixels. Et dirige Jason. Tout cela pour tous les biens. Cinnabon, en second lieu, facilite l'entrée et la sortie. Un style de boîte de réception. Il suffit de supprimer cette hauteur, qui n'est pas forcément une annonce ici, importante pour la largeur. Enregistrez ceci et jetez-y un œil, cliquez sur le bouton et voyez que nous avons cette animation douce. Cela est dû à cette propriété de transition. Donc, si nous voulons ajouter ou supprimer le verre pour l'animation, vous allez utiliser cette propriété de transition, qui ajoutera une animation douce pour vous. Ces astuces que j'ai apprises très tard dans ma carrière de développeur Web. J'aimerais le savoir pour mes projets de publication. C'est pourquoi je vous montre ces astuces. Nous avons maintenant une autre méthode pour modifier le CSS, qui est la méthode CSS. Elle est similaire à la méthode d'animation que nous avons vue précédemment. La méthode CSS est utilisée pour obtenir ou définir les propriétés CSS de l'élément sélectionné. Disons que nous voulons connaître la couleur de fond de cette offre. J'écris donc ici, dollar db point box, point CSS. Nous transmettons ici le nom de notre propriété, qui est la couleur de fond. Cette expression, la religion, la couleur de fond de la boîte. Stockons cela dans une variable appelée couleur. Et simplement considéré comme un journal. Ces couleurs changent et z. Nous obtenons ici cette couleur. Maintenant, allons encore plus loin. Alors maintenant, je veux définir la même couleur. Quel est le texte de ce troisième paragraphe ici. J'aime que le dollar ait un troisième point CSS. Et quelle propriété nous voulons définir, non ? C'est de la couleur. Et quelle que soit la valeur que nous voulons définir, nous devons la transmettre lors d'un deuxième argument. Disons que nous voulions régler ceci pour le lire ici, comme ceci. Nous voulons maintenant définir cette couleur, que nous obtenons de cette boîte. écrivons donc simplement ici la couleur. Enregistrez ceci et voyez couleur du texte écrit sur la couleur d'arrière-plan de cette case. Maintenant, vous vous demandez peut-être comment nous pouvons définir ici plusieurs propriétés CSS. Pour cela, nous devons transmettre des propriétés dans l'objet, comme Variety en CSS, mais nous devons écrire les propriétés entre guillemets doubles. Laisse-moi te montrer ici. J'ai lu cette propriété avec des crochets au lieu de cette virgule, réécrivez les deux-points. Maintenant, si nous voulons transmettre la deuxième propriété, nous ajoutons ici une virgule et entre guillemets, j'ajoute l'arrière-plan, le tiret, la couleur, le caoutchouc, le noir. Notez que nous pouvons écrire ici le nom de la propriété , comme V écrit en CSS. Mais dans n'importe quelle méthode met, nous devons l'écrire dans camelcase. Et c'est pour cela que les développeurs utilisent plus souvent cette propriété CSS. Enregistrez ceci et vous verrez, nous avons trouvé notre style ici. 13. 12 méthodes de formulaire utiles: bombardements sont également importants dans jQuery car vous allez les utiliser pour gérer le formulaire. Il existe donc de nombreuses formes d'événements, mais ce sont les événements qui ont le plus de valeur. Nous avons affaire à tout type de poème. Si nous voulions connaître tous les événements, vous allez utiliser la documentation jQuery. Mais en général, vous n'aurez besoin que de ces pauvres palmiers. Concentrez-vous, brouillez, Jane, soumettez. Je supprime simplement tout le code HTML pour le nouveau et j'ajoute un formulaire avec deux entrées et deux boutons radio pour le sexe et un bouton Soumettre. Voyons maintenant les événements du formulaire. Le premier est donc concentré, ce qui se déclenchera lorsque nous nous serons concentrés sur quelque chose. Disons que nous sélectionnons cette zone de saisie. Vous pouvez voir ce contour qui est un signe de concentration. Et lorsque nous cliquons en dehors de cette entrée, elle disparaît du focus. Dans ce fichier script.js. Entrée en dollars hydrure pour sélectionner toutes les entrées, puis ajouter un événement cible pour celles-ci. Maintenant, nous ajoutons ici la fonction qui s' exécutera lors de l'événement focus. Et dans ce cas, je souhaite changer la couleur d'arrière-plan de cette entrée spécifique, qui est en cours. Une fois l'ajout, n' utilisez pas la syntaxe constante de flèche ici car jQuery a un problème avec cette syntaxe. Je change donc la couleur de fond ici. Mais tu peux faire ce que tu veux. n'y a aucune limite à cela. Maintenant, dollar, il s'agit de sélectionner l'élément d'entrée actuel et d'ajouter ici la méthode CSS. Et à l'intérieur, du fond, coma, de la tomate. Enregistrez les modifications. Et David, C, lorsque nous nous concentrons sur les entrées, cette couleur de fond est avare. Maintenant, je veux le refaire, non ? Lorsque cette donnée est floue, il y a un événement sanguin. Je duplique ce code. Encore une fois, cette focalisation sur le flou et biaise la couleur jaune pour vider et voir que lorsque nous nous concentrons sur la dette, sa couleur de fond changera. Et puis retour à la normale. Voyons maintenant l'événement de changement. Cet événement se déclenchera lorsque la valeur de quelque chose changera. Je duplique ce noyau une fois de plus. Et à l'endroit du flou, j'ajoute un console.log. Dollar, cette toile noire. Enregistrez ceci et vous verrez que lorsque nous modifierons la valeur de ce bouton radio, nous obtenons cette valeur. Et si nous écrivons quelque chose dans une zone de texte, puis que nous supprimons le glucose de cette entrée, une valeur d'entrée changera. Et puis nous pouvons voir cette valeur ici. Voyons maintenant l'événement de soumission. Jusqu'à présent, soumettez un événement, nous devons donner l'identifiant de notre formulaire, disons le formulaire d'inscription. Maintenant, dans le fichier script.js, le dollar, les transitions de danger et le formulaire. Et puis nous ajoutons l'événement de soumission. Maintenant, passez la fonction, qui s' exécutera lors de la soumission. Dans cette fonction, je soumets simplement le formulaire point log de console avec succès et j'y jette un coup d'œil. Lorsque nous cliquons sur ce bouton. Encore une fois, voyez ce message dans la console, mais juste une milliseconde. Et puis notre actualisation de base. Alors arrêtons ça. Ainsi, dans l'événement d'envoi, nous obtenons ici l'objet de l'événement au premier paramètre. Et dans cet objet, nous avons une méthode appelée prevent default, qui empêchera le comportement par défaut de l'événement d'envoi, qui consiste à réprimer la page. Alors oui, événement, point empêcher la valeur par défaut. Sauve-les et Degas. voyez, vous pouvez voir ici les formulaires soumis. Voici donc ces événements de formulaire dans jQuery qui vous aideront dans la gestion des formulaires. 14. 13 AJAX dans jQuery: Donc, avant de commencer à apprendre l'Ajax, voyons quels sont h, x et y dont nous avions besoin. Asic est l'abréviation de Asynchronous JavaScript. Et XML. En termes simples, is x consiste à charger des données en arrière-plan et à les afficher sur la page Web sans recharger la page entière. De nombreuses applications populaires comme Gmail, Instagram, Facebook, YouTube et bien d'autres utilisent Ajax pour charger des données en arrière-plan et mettre à jour les données existantes. Si vous remarquez qu'une fois que vous chargez ce site Web, même si les élèves ont envoyé quelque chose ou quelqu'un à votre adresse e-mail, il ne chargera pas l'intégralité du site Web. Cela peut être fait par HX. Hx en soi, c'est un peu complexe, mais on peut aussi utiliser Ajax dans jQuery de manière très simple. jQuery fournit donc plusieurs méthodes pour les fonctionnalités Ajax. Le premier est inférieur, qui est utilisé pour charger des données depuis le serveur dans du contenu HTML. Ensuite, il est utilisé pour charger des données depuis le serveur à l'aide de la requête HTTP GET et de la publication, qui est utilisé pour envoyer et charger des données depuis le serveur à l'aide d'une requête HTTP de publication. Commençons par le numéro un, qui est faible. J'ai donc fait une démonstration de cet accord précédent dans un fichier JS. Nous n'en avons plus besoin. Et aussi à partir d'un fichier HTML. Et ajoutez ici une seule offre avec la sortie de l'identifiant. Maintenant, je crée un nouveau fichier appelé sample.txt. Et à l'intérieur, j'ajoute du texte, comme s'il s'agissait d'un exemple de texte. Qu'est-ce que x dans D ? Grady ? Enregistrez ceci. Maintenant, dans cette sortie, est-ce que je veux afficher le texte nous écrivons dans ce fichier sample.txt. Ainsi, dans le fichier script.js, rewrite dollar a une sortie dans laquelle nous voulons afficher le texte. Seigneur des Ténèbres. Maintenant, au premier paramètre, nous allons ajouter ici l'URL de notre fichier, qui est un exemple de point dx dy. Ensuite, si nous voulons envoyer des données avec cette demande, nous pouvons transmettre ces données dans le deuxième paramètre. Mais ici, nous ne voulons pas transmettre de données, donc nous n'écrivons rien. Maintenant, nous avons enfin une fonction avec trois paramètres, des statistiques de réponse, un XHR. Consolons chacun d'eux. Et z, qu'est-ce qu'on obtient ? Ça ? Et Degas, voyez ici, nous recevons nos textes et dans la console, en réponse, nous recevons nos textos. Plutôt sous forme de texte. Nous réussissons parce que nous obtenons ces données avec succès. Et un XHR, qui est un objet de requête HTTP XML. Nous pouvons faire quelque chose comme ça. Ici, je passe la condition. Si x est égal à un succès, alors signalez un succès. Et si le texte d'état est égal à deux erreurs, alors l'additionneur d'alerte et le texte d'état à points XHR. Enregistrez ceci et vous verrez, nous y arriverons avec succès. Maintenant, je fais une faute de frappe dans le nom de fichier, puis je scelle ce z où nous obtenons ici n'est pas trouvé. C'est ainsi que nous obtenons des données en utilisant la méthode de chargement. Voyons maintenant comment utiliser GetMethod. Je commente cet objectif. Et après ce point d'iodure, un dollar obtient. Maintenant, en utilisant la commande plus star, vous devez transmettre notre API, vous ajoutez n. Revenez donc au navigateur et recherchez le titulaire de la place Jason. Ouvrez ce lien. Faites défiler l'écran vers le bas et vous obtiendrez ici une API pour la dégustation. Je souhaite obtenir les données de cet utilisateur. Je copie donc cette URL. Maintenant, pour le deuxième paramètre, nous devons transmettre la fonction de rappel, qui s'exécutera après avoir obtenu les données. Et nous obtenons également des données et un statut en tant que paramètres. Maintenant, il suffit de console.log ces données et de les classer. Et jetez un œil. Nous avons ici un éventail d'utilisateurs. Et le statut, c'est le succès. Dans cette fonction, vous allez faire que vous voulez pour afficher ces données en utilisant une boucle sur notre page Web ou quoi que ce soit d'autre. Les possibilités sont illimitées. Il suffit de réfléchir. Voyons maintenant comment utiliser la méthode post. La méthode est généralement utilisée pour envoyer des données. Alors j'écris juste ici Dollar Dot Post. Devinez maintenant quel sera le premier argument ? Hein ? C'est l'URL de l'API. Je colle simplement la même API et les mêmes utilisateurs à la publication, qui est utilisée pour ajouter une nouvelle publication. Maintenant, précédemment, nous ajoutons fonction de rappel, deuxième argument. Mais ici, nous ajoutons des données comme deuxième paramètre. Ces données dépendent de l'APA, d'une API différente, mais un objet de données différent avec un titre. Il s'agit de données et de corps. C'est un corps. Et enfin, nous devons transmettre la fonction de rappel. Je viens donc de copier depuis GetMethod et de le coller ici. Et jetez un œil. Vous voyez, nous obtenons ici ces données avec 101 Post ID et le statut est un succès. C'est ainsi que fonctionne Ajax dans jQuery. De nos jours, nous utilisons la méthode des recettes, ce qui est encore plus simple que cela. Je voulais juste vous le montrer en jQuery, mais vous pouvez utiliser ce que vous voulez. Cela dépend totalement de toi. 15. 14 site Web animer sur défilement: Il est maintenant temps d'apprendre quelque chose de plus passionnant, que chaque développeur Web doit apprendre. Et il s'agit d'une intégration verticale sur scroll. Regardez comme ce site Web est magnifique lorsque nous ajoutons une animation au défilement. J'ai donc donné le site web de ce projet. Vous pouvez donc pratiquer directement l' animation sur ce site. Ce projet a été créé lorsque je travaillais sur le cours HTML et CSS. Mais j'ai arrêté la création de ce cours pendant un certain temps. Et juste en se concentrant sur les tutoriels YouTube. J'ouvre ce projet, ce fichier index.html, qui héberge le serveur. Comprenons la logique de cette animation. Nous faisons défiler la page Web. Quand cette section s'affichera. Ensuite, nous devons afficher cette section avec une animation. Nous devons donc effectuer ici deux étapes seulement. Nous devons identifier à quel point ce contenu sera affiché. Ensuite, nous devons ajouter une animation pour ce contenu. La première question est donc de savoir comment identifier le contenu. Pour cela, nous utilisons un plugin jQuery appelé pay points, l'eau ajoutant des missions, nous utilisons une bibliothèque appelée Animate ab.js. Cette bibliothèque contient près de 100 styles d'animations. Les deux problèmes sont-ils résolus ? Voyons maintenant cela dans le charbon. Donc, tout d'abord, nous devons ajouter trois liens CDN pour cela. Le premier est pour jQuery, puis pour les waypoints, puis pour n'importe quel main.css, jQuery CDN, ouvrez ce premier lien et optez pour ce CDN minifié. Copiez ceci, et à la fin du corps. ai basé. Revenons maintenant au navigateur et recherchez le CDN des waypoints. Et ouvrez ce lien CDN GAS. Assurez-vous maintenant de copier ce lien CDN jQuery point js point js. Maintenant, après le CDN jQuery, lien CDN. Encore une fois, le navigateur vectoriel a répondu au CSS animé sur ce premier lien. Et dans la section Installation et utilisations, vous obtiendrez le lien CDN, copiez-le et collez-le dans la section d'en-tête. Maintenant, pour écrire du code jQuery, nous devons créer un fichier js. Je crée un dossier appelé Jazz. Et dans ce dossier, créez un nouveau fichier appelé script.js. Lions maintenant ce fichier à notre fichier index.html. Après le lien CDN du waypoint, nous ajoutons un script avec la source. Et ici, oui, c'est moins script.js. Enregistrez-le et revenez dans le fichier script.js. Ici, nous ajoutons un document en dollars prêt à l'emploi. Et à l'intérieur, nous ajoutons de la fonction. L'installation est terminée. Voyons maintenant à propos de l'animation. Disons West, nous voulons ajouter animation sur le titre de cette table des matières. Dans le fichier HTML, nous devons donc donner à cet élément une classe ou un identifiant. Nous pouvons sélectionner cet élément spécifique en utilisant cette vue latérale. Ici, classe est égale à deux tables des matières. Données. Enregistrez ceci. Et dans le fichier script.js, titre de la table des matières dollar, waypoint. Et dans ce cas, nous devons transmettre une fonction qui s' exécutera lorsque cet élémentaire sera en haut de la page. Maintenant, dans cette fonction, on appelle ce que notre animation. En gros, que voulons-nous faire lorsque cet élément atteindra le sommet ? Donc pour l'instant, j'écris simplement console.log juste en haut. Les ventes, c'est. Et jetez un œil, ouvrez la console et faites défiler la page. Vous voyez, lorsque ces données atteignent le sommet, nous recevons ce message. Le waypoint fonctionne donc. Ajoutons maintenant une animation pour cela. Donc de toute façon, site web point css. De là, vous pouvez sélectionner les différents types d'animations. Et lorsque nous les survolons, vous obtenez une icône de copie. Maintenant, je veux cette période en animation de gauche. Copiez donc ces ennemis dans le nom de la classe. Dans le fichier script.js. Juste ici. Tableau en dollars du contenu. Classe Dot Agg. Tout d'abord, nous devons écrire ici, animer, souligner deux fois n'importe quelle classe de méthode car sans dette, aucune animation ne fonctionnera. Ensuite, nous collons simplement notre animation. Donc cette Cordillère des Andes et ses couleurs marquent cette page. Et quand ce titre atteint le sommet, voyez, nous pouvons voir l'animation. Mais voici le seul problème. Lorsque nous n'atteignons pas le sommet , ce titre est toujours visible. Nous devons donc d'abord le cacher. Dans le dossier Styles. Ouvrez ce style dans ce fichier CSS. Bonjour Dan, iodure, un style de commentaire pour l'animation. Pour un titre de table des matières en verre. Nous avons réduit l'opacité à zéro. Et après ce titre de table des matières en verre animé, double soulignement animé. Nous réduisons l'opacité à un. C'est le verre que nous avons ajouté dans notre méthode de classe ED. Enregistrez ceci pour voir quel état n'est pas visible. Ensuite, nous atteignons le sommet. Ensuite, cette animation s'exécute. Voici maintenant un dernier numéro. C'est ça, nous voulons voir l'animation lorsque le titre passe à la moitié de l'écran juste au début. Pour montrer que dans cette fonction de waypoint, nous devons transmettre un deuxième paramètre, qui est objet et objet indirect. Nous avons une propriété appelée offset. Et entre guillemets, passez 50 à 80 %, comme vous le souhaitez. Enregistrez ceci et jetez-y un coup d'œil. voyez, lorsque ce titre atteindra 80 % du sommet , cette animation sera diffusée. Vous pouvez donc voir à quel point il est simple d'appliquer cette animation. Maintenant, je veux que vous essayiez cette même animation de ces trois titres principaux. Mettez la vidéo en pause et essayez de résoudre le problème. Ensuite, vous allez voir la solution pour ces titres. Je leur ai déjà donné des pièces d'identité. Je duplique donc ce code. Sur le lieu de ce cours. Nous ajoutons une intro. Ici, il y a aussi une introduction. Et dans style.css, nous devons ajouter le même style pour l'introduction de l'identifiant. Nous ajoutons ici une virgule et ajoutons une intro. Ici. Introduisez, animez, soulignez deux fois, animez-les, et voyez, nous aurons cette animation. Maintenant, dans le fichier script.js, j'ai créé une variable. Laissez décaler cet objet décalé. Alors coupez ceci et collez-le ici. Maintenant, il suffit d'écrire ici, décaler ici également, supprimer cet objet et d'ajouter Offset. Tu vois, maintenant notre code est plus beau. Maintenant, je ne veux pas vous ennuyer en montrant toutes les animations de ce projet. Tu vas essayer ça par toi-même. Alors très vite, j'ajoute toutes les animations de ce projet sauf les liens et la durée. Parce que nous devons ajouter ici un délai pour ces deux derniers liens. Pour ce délai, nous devons attribuer à chaque lien une classe ou un identifiant unique dans le fichier HTML. Ici, listez l'élément, maintenez la touche Alt enfoncée sous Windows et l'option sous Mac. Et créez plusieurs curseurs en cliquant. Et la bonne classe. un trait de soulignement sur la liste, soulignez un. Maintenant, appuyez sur Escape Engines, ces deux-là pour un ou trois jours. Dans le fichier script.js. Je copie l'animation de ce titre. Et à la fin, je le colle. Maintenant, juste dans le sélecteur. Donc, liste noire, liez-en un ici. Donc, faites le premier lien sur la liste des points. Et dans l'animation, je veux être payé, non ? Maintenant, reproduisez cet objectif sur plus de temps et modifiez les sélecteurs. Écouter, écouter et moins connecté. Liste liée pendant trois jours. Et dans le fichier CSS Shine point, nous faisons de même pour ces trois classes. Ces couleurs NDA. Vous vous demandez peut-être quel est le retard. Jusqu'à présent, retard dans le fichier style.css, nous ajoutons un lien de liste de points à un délai d'animation de 0,15 s. Maintenant, dupliquez ce style et remplacez par Liste liée trois et retardez par 0,3 s. Donc, les participants, et jetez-y un coup d'œil. Tu vois, nous avons cette incroyable animation. Mais à chaque lien et à chaque achat de cette animation, l'utilisateur saura que nos liens individuels. Vous pouvez donc voir à quel point il est simple et facile d'ajouter une animation lors du défilement. Tu dois juste comprendre la logique. J'espère que vous apprendrez beaucoup de choses grâce à ce tutoriel.