Bon, alors il est temps pour notre premier Jay queery exercice de la façon dont celui-ci fonctionne, c'est que je vais vous donner quelques échantillons hymnale âgés pour divs certains ont des classes certains ont des idées et ils vont prendre ceux pour divs et les mettre en Votre propre fichier HTML d'âge et vous aurez besoin d'inclure la requête Jay correctement à vous comment vous le faites si vous souhaitez utiliser un Cdn ou si vous voulez le télécharger.
Et puis il ya quatre défis rapides que je veux que vous essayiez d'utiliser Jay Querrey et en particulier le signe de dollar pour sélectionner et Dot voir SS à style.
Donc le premier.
Sélectionnez toutes les divs et donnez-leur un arrière-plan pourpre.
La suivante est de sélectionner les divs avec la classe en surbrillance et de les rendre 200 pixels de large.
Le troisième est de sélectionner le div avec le troisième ID et lui donner une bordure orange jusqu'à vous comment large et quel style de la frontière.
Et puis le bonus est de sélectionner la première div seulement et de changer sa couleur de police pour être rose.
Donc, allez-y donner un coup de feu.
Vous devrez poster une vidéo.
Créez un fichier HTML Nouvel Âge.
Incluez une requête, puis copiez ce code ou tapez-le vous-même, puis vous aurez besoin de résoudre ces quatre défis.
Alors allez-y poster une vidéo.
Je serai de retour en quelques secondes avec la solution déjà.
Allons-y et tapez une solution rapide à cela.
Comme toujours la première chose que nous devons faire est de faire notre chaque fichier de temps.
J'ai donc un nouveau fichier.
Je l'ai appelé exercice que html et je vais l'enregistrer et puis ajouter dans mon régulier h tim l boilerplate et nous allons appeler cet exercice de requête J dans le titre et puis je vais aller de l'avant et ajouter dans notre démarreur DML et je Il suffit de le copier plutôt que de le taper.
OK, nous avons donc les quatre éléments.
Maintenant, allons y ajouter Jay Querrey.
Rappelez-vous que nous avons deux façons de faire que nous pouvons l'inclure localement ou nous pouvons relier à un CDN.
Donc, je vais vous montrer la première.
Je vais simplement copier le fichier.
Donc je dois modifier la version ici juste pour commander la commande V.
Donc je l'ai maintenant dans le même répertoire que mon exercice que l'âge Simmo.
Et puis je vais aller ici et la première chose que je veux faire est d'ajouter un script de script script, puis je vais ajouter des sources égales et puis je dois m'assurer que je correspondre à ce qui est correctement Jay tire au point 1.4 Hommes.
Oui.
Donc Jay queery tirez au point un point pour les hommes Dot.
Jésus, nous allons sauver cela et l'ouvrir dans notre navigateur et faire notre petit test pour voir si cela fonctionne.
On dirait qu'il a trouvé le fichier.
Sinon, il nous donnerait une erreur et nous pouvons toujours essayer de faire quelque chose comme un dollar signe div et voir ce que nous obtenons.
Et ça marche.
C'est le choix de nos 4 divs.
Nous pouvons également inclure des requêtes A-J CDN.
Et je viens de Google pour cela.
Jay quercetin et puis choisir notre version.
Donc, nous ne voulons pas 3.0.
Je suis sûr que ça marche bien.
Mais c'est la version la plus récente et c'est encore un alpha.
Il ya donc probablement quelques bugs et quelques problèmes.
Donc au point un point quatre est la version stable la plus récente puis nous copierons cette URL et ensuite nous ajouterons une autre étiquette de script et je les laisserai les deux ici et juste commenter un et réinitialiser la source égale à celle que vous êtes faux.
Donc, soit l'un fonctionne, je vais utiliser le Cdn depuis que je vous ai déjà prouvé que nous utilisons tous le Cdn.
Puisque j'ai déjà prouvé que celui-ci a travaillé juste pour le saké de variété.
Donc, nous allons enregistrer, puis rafraîchir et vérifier que notre code fonctionne toujours.
Oui, il est de trouver des signes de dollars très bien.
Il est connecté à J Qwerty.
Un point que je voudrais faire est que nous incluons J queery haut en haut dans la tête et nous l'utilisons dans nos scripts que nous écrivons dans le corps.
Et la raison que nous faisons que se souviennent des choses chargent dans l'ordre qu'ils sont déclarés Ainsi nous voulons la requête d'Arjay pour charger définitivement avant que nous l'utilisions au lieu d'un manuscrit.
Donc, notre script que nous devons définir est l'endroit où nous allons écrire notre code et nous allons simplement l'appeler exercice.
J s.
Et puis nous avons besoin de faire ce fichier d'exercice que J nous et nous mettrons ce droit ici dans le même répertoire et ce que nous pouvons faire est un test très simple pour voir si elle est connectée à la fois à notre fichier tim et à la requête J Si elle est capable de voir et d'utiliser la méthode de requête J, nous allons simplement faire quelque chose comme ça.
Si la requête J va faire autre chose alors s'il ya une requête J nous alerterons une requête chargée sinon nous allons alertes savoir Jay Querrey face triste et sauver.
Et si nous rafraîchissons maintenant nous avons J requête chargée.
Cela nous dit deux choses.
Un script est en cours d'exercice que Jésus est connecté et deux ont pu utiliser les méthodes de Jay Querrey.
Si nous avons fait ceci dans l'ordre inverse cependant et j'ai posé la question de Jay après que j'ai inclus mon exercice Jay Oui et je sauve et rafraîchit nous obtenons une erreur qui nous indique la requête de J n'est pas définie ainsi vous pouvez voir l'importance de l'ordre que nous mettons des choses dans.
Donc, nous voulons toujours mettre nos bibliothèques que notre code dépend de haut en haut dans la tête au moins nous voulons les mettre avant nos scripts qui les utilisent.
Revenons à l'affectation et la première chose que nous devons faire est d'inclure correctement Jay Querrey que nous avons déjà fait.
Ensuite, nous devons sélectionner toutes les divs et leur donner un fond violet.
Nous allons donc aller de l'avant et sélectionner tous les divs en utilisant le signe dollar au lieu de guillemets.
Tout ce que nous devons faire est de sélectionner div avec CSSA.
Alors div diviser C S S et nous allons les rendre violet.
Donc la couleur ou l'arrière-plan dans ce cas est violet ou nous aurions pu utiliser notre propre R.G. B ombre de pourpre.
Et si vous ne vous rappelez pas comment nous faisons violet avec RGV, alors vous devez aller jouer le R.G. Est devenu un peu plus.
C'est donc le premier que nous pouvons enregistrer et vérifier que cela a fonctionné en rafraîchissant.
Et nous obtenons quatre fonds pourpres.
D'ACCORD.
Voilà.
C'est la sélection de tous les divs et de leur donner un arrière-plan pourpre.
Je vais juste ajouter une petite note ici et commenter ça.
Ensuite, nous voulons sélectionner les div avec une classe égale à mettre en surbrillance et les faire 200 pixels de large.
Donc, cela fonctionnera de manière très similaire, mais pour sélectionner les divs avec la classe égale à mettre en évidence ce que nous devons faire est d'utiliser le signe dollar à nouveau.
Et plutôt que div, nous pouvons utiliser point de surbrillance et puis faire C Ss avec et qui sera de 200 pics.
Il est intéressant de noter que cela sélectionne techniquement tout ce qui a une classe de mettre en évidence.
Si vous voulez qu'il soit explicite et dire seulement les divs qui ont la classe de mettre en évidence, nous pourrions avoir une balise d'ancrage ou un paragraphe qui ont aussi cette classe, nous écrire ce sélecteur.
Et c'est C S S qui dit tous les divs avec la classe de mise en évidence.
Mais dans ce cas, il fera une différence.
So 200 pixels avec rafraîchissement et vous pouvez voir ces deux divs ont la classe de mettre en évidence le deuxième et le quatrième div et ils ont un avec 200 pixels.
OK le suivant est de sélectionner le div avec l'idée de troisième.
Et pour lui donner une frontière orange afin de sélectionner le div avec ce signe Dollar Id à nouveau et au lieu de point, nous avons besoin de notre Thorpe.
Et puis le nom de l'ID que l'ordre SS et c'est à nous.
Tout ce que j'ai dit, c'est que la couleur est orange.
Alors faisons une bordure orange pleine de deux pixels et sauvegardons et rafraîchissons et nous avons maintenant cette frontière orange juste là.
Je vais faire un peu plus grand pour qu'il montre mieux dans le screencast.
Voilà.
Et c'est autour d'un troisième div qui a l'ID du mot.
Donc le dernier défi qui a été un bonus est de sélectionner la première div seulement et de changer sa couleur de police à rose la façon dont va sélectionner la première div est à l'aide d'un sélecteur pseudo CSSA.
Tout d'abord de type div ainsi col deux premières tiret de type que vous devriez être familier avec quelques-unes des vidéos sélecteur CSSA.
Et puis nous allons juste faire rose, c'est la couleur SS rose et nous économiser et rafraîchir et vous pouvez voir la couleur est rose.
L'autre option que nous avons est il ya effectivement un construit dans le raccourci de requête J qui est juste Colan premier et qui fonctionne aussi bien.
Une note intéressante est que l'utilisation du colon d'abord est en fait un peu plus lent que le premier de type parce que d'abord de type est intégré à voir évaluer c'est un sélecteur CSSA versus premier est un raccourci de requête J.
Donc, ce n'est pas natif C Ss c'est tout simplement un peu plus lent.
Donc je voudrais utiliser le premier type.
OK, voilà pour cet exercice dans les prochaines vidéos.