Alors maintenant que vous avez entendu mon introduction à Jay Cory ainsi que mon propre opinion sur l'enseignement de requête Jay et l'approche que nous prenons ici qui pour résumer brièvement, nous avons commencé avec javascript vanilla et maintenant que nous sommes confiants faire des choses De cette façon, nous allons passer à Jay Querrey.
Donc, la première chose dont nous avons besoin de parler est comment pouvons-nous inclure une requête dans une application.
Donc je vais commencer avec une application très simple ici en ajoutant juste dans mon âge à la bouche et lui donner un titre.
Jay queery démo Jay sur Jay queery est toujours minuscules.
Ne me demandez pas pourquoi Q Est majuscule tout cela en quelques éléments.
J.
Corey démo.
Juste comme ça et peut-être un allié ou deux et ce sera juste du texte aléatoire.
OK si trois alliés etc vous.
Et H-1 et sauver.
Et bien sûr, nous allons aller de l'avant et ouvrir cela dans le navigateur.
Et voici notre page de démonstration.
Il ya quelques façons d'ajouter une requête à notre propre application et à nos propres fichiers html âge.
N'oubliez pas que la requête J est juste un fichier javascript.
Ce n'est pas différent des fichiers que nous avons écrits jusqu'à présent.
Comme notre jeu de couleurs dodge A-S ou notre liste de tâches.
Oui ou les fichiers javascript que nous avons créés et liés à l'aide d'une balise de script.
Dans les deux méthodes, nous utilisons une balise de script.
La seule différence est l'attribut source.
Et dans ce cas, nous sommes enchaînant vers le fichier localement et ce que cela signifie est que j'ai téléchargé le code pour une requête et ils le mettent dans le même répertoire que mon projet et puis je lié à elle.
Donc je vais vous montrer comment nous faisons que si nous allons à la documentation J Crew et nous cliquons sur le téléchargement et puis nous avons besoin de choisir une version et je vais aller avec la dernière qui est 2.1 point 4 et nous avons un Peu d'options.
Nous pouvons télécharger la production comprimée Jey requête 2.0 point 1.4 et la version de développement non compressé.
Je vais faire les deux.
Habituellement, je ferais juste celui-ci parce qu'il est comprimé le point entier est qu'il est plus rapide à charger.
Mais je veux vous montrer à quoi ça ressemble.
Donc, je vais obtenir le décompresser un et compressé et vous pouvez voir si nous obtenons deux fichiers différents.
Nous avons Jay queery de pointer un point pour Dot J.S. Et nous avons interrogé J 2,1 pour cent pour les hommes.
Oui.
Donc, je vais ouvrir les deux en sublime ici.
Il suffit de les faire glisser et nous allons jeter un oeil à eux.
Donc ce fichier ici est la version non compressée.
Et comme je défiler à travers.
Notez que c'est juste un très long fichier javascript.
C'est plus de 9000 lignes donc nous pouvons inclure ce fichier ou nous pouvons inclure la version minimisée qui est le même code dans les coulisses, mais quand quelque chose est minimisé ou compressé tous les espaces sont retirés.
Donc, tous ces retours tous les commentaires sont allés et tous les noms de variables et de propriétés sont raccourcies à des caractères simples, vous pouvez voir que nous avons des choses comme em ou nous avons des choses comme ABC qui ne sont certainement pas les noms des propriétés et des arguments à l'intérieur si Le fichier non compressé afin que nous puissions inclure l'un ou l'autre.
Et pour ce faire, nous devons juste nous assurer que nous ajoutons les fichiers dans le répertoire correct.
Donc je vais faire un nouveau dossier au lieu de mon projet et je vais l'appeler lib.
Et nous n'avons pas à le faire.
Nous pourrions simplement faire glisser nos deux fichiers pour être dans le même répertoire que notre équipe h.
Je vais déposer et je vais commencer avec elle de cette façon à vous montrer.
Donc, je vais ouvrir mon fichier H Tim L et ajouter un script ici tag script et j'ai besoin de source égale et j'ai besoin d'écrire ce nom ici qui est J question de pointer un point pour Dot J nous et nous avons besoin de tiret.
Donc, je vais le copier et il suffit de définir la source à un tableau de bord 2. 1.4.
J.
Oui et aussi longtemps que ce fichier J Curry démo vieilli il est au même endroit que Jay Querrey 2.1 14: 4, nous devrions être bons.
Donc, je vais enregistrer et l'ouvrir dans le navigateur et rafraîchir.
Si nous ouvrons la console, nous pouvons effectivement taper le mot J Query et appuyer sur enter.
Et si nous n'obtenons pas une erreur qui nous indique que la requête est correctement ajoutée à notre application.
Donc, une meilleure façon de structurer cela est de mettre réellement dans un répertoire distinct appelé lib pour que nous puissions séparer nos propres fichiers javascript à partir de fichiers javascript de bibliothèque afin que nous ne les confondons pas et nous n'emballons pas notre répertoire Structure de sorte qu'il n'est pas obligatoire à tous.
Comme vous l'avez vu, nous avions Jay travail de consultation.
Mais une meilleure façon de le faire est de faire un répertoire et nous pouvons appeler cela n'importe quoi.
Vous pourriez l'appeler J-courbe si vous le vouliez.
Je vais aller avec lib et puis je dois changer mon lien ici.
Ma source d'être lib slash requête Jay pointillé au point un point quatre et je vais faire le mien.
Oui et vous n'avez pas à le faire.
Il n'y a aucune différence dans la fonctionnalité.
La seule différence est que c'est plus rapide à charger, mais j'ai besoin d'avoir celui-là.
Donc, pour réitérer, nous n'avons pas besoin des deux.
Nous avons juste besoin d'un et nous devons lier à celui-ci correctement.
Vérifions donc que cela a fonctionné.
Si je rafraîchir le taux qui fonctionne bien.
Vous pouvez taper J query et nous pouvons aussi taper dollar sign et si ces travaux nous savons que la requête feuille est correctement installée.
C'est donc la première façon de télécharger une requête localement, puis de la lier à la balise script.
Il ya une autre option, cependant, qui est d'utiliser un CD dans le CD et stands pour le réseau de contenu distribué et pense que c'est juste une façon de saisir un fichier en ligne sans avoir à le télécharger sur votre machine.
Donc, je vais vous montrer si nous copions juste ce vous Arel ici qui se trouve être AJ queery CDN pour la version 2.0 1.4.
Et si je vais juste à que vous URL, vous verrez que c'est juste le fichier J Corey ici.
Ce que nous pouvons faire est de lier à ce que vous Arel ou tout autre CD de J queery et vous savez qu'il ya beaucoup d'entre eux en ligne et qui fonctionnera de la même manière que le lien vers le fichier ici localement.
La seule différence est que cela va effectivement charger un peu plus vite parce que c'est local sur notre ordinateur et si nous le remplacer par le CD, il ne sera pas perceptible pour nous.
Mais sous le capot il prend un peu plus longtemps, mais bien sûr, il est beaucoup plus facile et plus simple à utiliser, car nous n'avons pas à télécharger une copie de requête Jay pour chaque application que nous faisons.
Alors je vais rafraîchir.
Et si nous tapons J requête ici il devrait toujours fonctionner et il le fait.
Enfin, je vais vous montrer comment j'ai trouvé ce CDN.
Il suffit d'ouvrir un nouvel onglet et de chercher Cdn Jay queery et si nous faisons juste une recherche de Cdn et puis toute autre bibliothèque qui verra certains d'autres plus tard.
Mike J question.
Vous verrez que nous avons un tas de liens.
Donc, Jay a une requête officielle.
Il ya le Cdn dodge ville NJ s point com et nous avons un tas de vous ou bien ici que nous pouvons simplement copier.
Nous aurions à prêter attention à la version donc c'est pour 3,00.
Si nous passons au point 2.20, il nous donne un uncompress la version normale et une version modifiée.
Et juste pour vous montrer si je vais à ce que vous êtes bien.
Je les vois dans un fichier.
Donc pour conclure.
De toute façon fonctionne.
Nous avons besoin d'une balise de script dans les deux cas, mais la source est soit un fichier local ou un fichier qui est hébergé quelque part que nous sommes en liaison à l'aide d'un CDN.
La dernière chose que vous voulez faire est de vous donner un aperçu rapide de 30 secondes de ce qu'elle ressemble à la cour.
Alors, voici un peu de ce que ressemble à la requête J.
La première chose que vous pourriez remarquer est qu'il ya un signe dollar utilisé dans quatre endroits différents.
Nous avons un tas de méthodes comme le clic Dom qui voient SS dot fade out dot remove.
Donc, ce que ce code va réellement faire est de sélectionner un bouton avec le déclencheur d'ID et quand il est cliqué, il exécute tout ce code et quand il est cliqué, nous allons changer la couleur de fond du corps pour être jaune.
Nous allons effacer toutes les images sur la page.
Ça va prendre 3 secondes pour les faner et puis quand le fade out est fait, nous allons supprimer ces trois images de la page.
Cliquez sur le bouton avec le déclencheur IDF.
Changer les images de fondu de couleur de corps plus de trois secondes, puis supprimer des images quand ils sont faits.
D'accord, c'était l'aperçu de la vitesse d'une requête.
Maintenant, nous allons commencer à écrire quelques-uns dans la prochaine vidéo.