1
00:00:00,210 --> 00:00:22,330
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.

2
00:00:22,650 --> 00:00:32,040
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.

3
00:00:32,070 --> 00:00:33,130
Donc le premier.

4
00:00:33,270 --> 00:00:36,590
Sélectionnez toutes les divs et donnez-leur un arrière-plan pourpre.

5
00:00:36,870 --> 00:00:43,200
La suivante est de sélectionner les divs avec la classe en surbrillance et de les rendre 200 pixels de large.

6
00:00:43,200 --> 00:00:51,930
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.

7
00:00:52,110 --> 00:00:58,630
Et puis le bonus est de sélectionner la première div seulement et de changer sa couleur de police pour être rose.

8
00:00:58,650 --> 00:01:00,120
Donc, allez-y donner un coup de feu.

9
00:01:00,120 --> 00:01:01,710
Vous devrez poster une vidéo.

10
00:01:01,710 --> 00:01:03,280
Créez un fichier HTML Nouvel Âge.

11
00:01:03,330 --> 00:01:09,660
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.

12
00:01:09,660 --> 00:01:11,130
Alors allez-y poster une vidéo.

13
00:01:11,130 --> 00:01:21,730
Je serai de retour en quelques secondes avec la solution déjà.

14
00:01:21,750 --> 00:01:24,700
Allons-y et tapez une solution rapide à cela.

15
00:01:25,050 --> 00:01:29,070
Comme toujours la première chose que nous devons faire est de faire notre chaque fichier de temps.

16
00:01:29,070 --> 00:01:30,220
J'ai donc un nouveau fichier.

17
00:01:30,240 --> 00:01:48,780
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.

18
00:01:49,520 --> 00:01:52,080
OK, nous avons donc les quatre éléments.

19
00:01:52,080 --> 00:01:54,660
Maintenant, allons y ajouter Jay Querrey.

20
00:01:54,780 --> 00:02:00,330
Rappelez-vous que nous avons deux façons de faire que nous pouvons l'inclure localement ou nous pouvons relier à un CDN.

21
00:02:00,480 --> 00:02:03,150
Donc, je vais vous montrer la première.

22
00:02:03,510 --> 00:02:05,710
Je vais simplement copier le fichier.

23
00:02:06,030 --> 00:02:10,430
Donc je dois modifier la version ici juste pour commander la commande V.

24
00:02:10,620 --> 00:02:14,350
Donc je l'ai maintenant dans le même répertoire que mon exercice que l'âge Simmo.

25
00:02:14,580 --> 00:02:31,000
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.

26
00:02:31,080 --> 00:02:32,110
Oui.

27
00:02:32,190 --> 00:02:38,230
Donc Jay queery tirez au point un point pour les hommes Dot.

28
00:02:38,390 --> 00:02:45,640
Jésus, nous allons sauver cela et l'ouvrir dans notre navigateur et faire notre petit test pour voir si cela fonctionne.

29
00:02:46,650 --> 00:02:47,950
On dirait qu'il a trouvé le fichier.

30
00:02:47,970 --> 00:02:56,910
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.

31
00:02:57,030 --> 00:02:57,910
Et ça marche.

32
00:02:57,900 --> 00:03:00,060
C'est le choix de nos 4 divs.

33
00:03:00,060 --> 00:03:02,670
Nous pouvons également inclure des requêtes A-J CDN.

34
00:03:03,180 --> 00:03:04,600
Et je viens de Google pour cela.

35
00:03:04,680 --> 00:03:07,510
Jay quercetin et puis choisir notre version.

36
00:03:07,980 --> 00:03:09,690
Donc, nous ne voulons pas 3.0.

37
00:03:09,930 --> 00:03:10,670
Je suis sûr que ça marche bien.

38
00:03:10,680 --> 00:03:12,940
Mais c'est la version la plus récente et c'est encore un alpha.

39
00:03:13,050 --> 00:03:15,070
Il ya donc probablement quelques bugs et quelques problèmes.

40
00:03:15,150 --> 00:03:28,830
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.

41
00:03:28,950 --> 00:03:38,460
Donc, soit l'un fonctionne, je vais utiliser le Cdn depuis que je vous ai déjà prouvé que nous utilisons tous le Cdn.

42
00:03:38,490 --> 00:03:42,360
Puisque j'ai déjà prouvé que celui-ci a travaillé juste pour le saké de variété.

43
00:03:42,510 --> 00:03:47,180
Donc, nous allons enregistrer, puis rafraîchir et vérifier que notre code fonctionne toujours.

44
00:03:47,460 --> 00:03:49,830
Oui, il est de trouver des signes de dollars très bien.

45
00:03:49,830 --> 00:03:51,510
Il est connecté à J Qwerty.

46
00:03:51,600 --> 00:04:01,330
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.

47
00:04:01,590 --> 00:04:11,120
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.

48
00:04:11,430 --> 00:04:18,620
Donc, notre script que nous devons définir est l'endroit où nous allons écrire notre code et nous allons simplement l'appeler exercice.

49
00:04:18,640 --> 00:04:19,720
J s.

50
00:04:19,850 --> 00:04:41,790
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.

51
00:04:41,820 --> 00:04:59,780
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.

52
00:05:00,020 --> 00:05:03,540
Et si nous rafraîchissons maintenant nous avons J requête chargée.

53
00:05:03,760 --> 00:05:05,240
Cela nous dit deux choses.

54
00:05:05,260 --> 00:05:12,570
Un script est en cours d'exercice que Jésus est connecté et deux ont pu utiliser les méthodes de Jay Querrey.

55
00:05:12,820 --> 00:05:28,260
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.

56
00:05:28,510 --> 00:05:37,540
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.

57
00:05:37,720 --> 00:05:44,020
Revenons à l'affectation et la première chose que nous devons faire est d'inclure correctement Jay Querrey que nous avons déjà fait.

58
00:05:44,020 --> 00:05:48,670
Ensuite, nous devons sélectionner toutes les divs et leur donner un fond violet.

59
00:05:49,000 --> 00:05:55,530
Nous allons donc aller de l'avant et sélectionner tous les divs en utilisant le signe dollar au lieu de guillemets.

60
00:05:55,690 --> 00:05:58,360
Tout ce que nous devons faire est de sélectionner div avec CSSA.

61
00:05:58,390 --> 00:06:02,520
Alors div diviser C S S et nous allons les rendre violet.

62
00:06:02,560 --> 00:06:09,230
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.

63
00:06:09,380 --> 00:06:15,560
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.

64
00:06:15,670 --> 00:06:20,110
C'est donc le premier que nous pouvons enregistrer et vérifier que cela a fonctionné en rafraîchissant.

65
00:06:20,530 --> 00:06:22,910
Et nous obtenons quatre fonds pourpres.

66
00:06:23,200 --> 00:06:23,770
D'ACCORD.

67
00:06:23,920 --> 00:06:25,050
Voilà.

68
00:06:25,090 --> 00:06:28,780
C'est la sélection de tous les divs et de leur donner un arrière-plan pourpre.

69
00:06:28,780 --> 00:06:32,360
Je vais juste ajouter une petite note ici et commenter ça.

70
00:06:32,620 --> 00:06:38,670
Ensuite, nous voulons sélectionner les div avec une classe égale à mettre en surbrillance et les faire 200 pixels de large.

71
00:06:38,990 --> 00:06:47,390
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.

72
00:06:47,950 --> 00:07:02,770
Et plutôt que div, nous pouvons utiliser point de surbrillance et puis faire C Ss avec et qui sera de 200 pics.

73
00:07:02,870 --> 00:07:07,660
Il est intéressant de noter que cela sélectionne techniquement tout ce qui a une classe de mettre en évidence.

74
00:07:07,660 --> 00:07:18,470
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.

75
00:07:18,670 --> 00:07:22,290
Et c'est C S S qui dit tous les divs avec la classe de mise en évidence.

76
00:07:22,390 --> 00:07:24,370
Mais dans ce cas, il fera une différence.

77
00:07:24,380 --> 00:07:35,260
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.

78
00:07:35,890 --> 00:07:41,100
OK le suivant est de sélectionner le div avec l'idée de troisième.

79
00:07:41,460 --> 00:07:51,850
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.

80
00:07:52,300 --> 00:07:59,060
Et puis le nom de l'ID que l'ordre SS et c'est à nous.

81
00:07:59,080 --> 00:08:00,680
Tout ce que j'ai dit, c'est que la couleur est orange.

82
00:08:00,870 --> 00:08:11,140
Alors faisons une bordure orange pleine de deux pixels et sauvegardons et rafraîchissons et nous avons maintenant cette frontière orange juste là.

83
00:08:11,190 --> 00:08:14,680
Je vais faire un peu plus grand pour qu'il montre mieux dans le screencast.

84
00:08:14,680 --> 00:08:15,280
Voilà.

85
00:08:15,500 --> 00:08:20,360
Et c'est autour d'un troisième div qui a l'ID du mot.

86
00:08:20,650 --> 00:08:32,380
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.

87
00:08:32,380 --> 00:08:42,710
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.

88
00:08:42,910 --> 00:08:55,730
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.

89
00:08:55,730 --> 00:09:05,350
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.

90
00:09:05,380 --> 00:09:19,970
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.

91
00:09:20,060 --> 00:09:23,590
Donc, ce n'est pas natif C Ss c'est tout simplement un peu plus lent.

92
00:09:23,770 --> 00:09:25,540
Donc je voudrais utiliser le premier type.

93
00:09:25,880 --> 00:09:28,870
OK, voilà pour cet exercice dans les prochaines vidéos.