1
00:00:00,110 --> 00:00:00,530
D'accord.

2
00:00:00,530 --> 00:00:01,500
Nous saluons le retour.

3
00:00:01,500 --> 00:00:03,350
Commençons donc à écrire du code.

4
00:00:03,480 --> 00:00:07,290
Et la première chose que nous allons apprendre à faire est de savoir comment sélectionner des éléments.

5
00:00:07,290 --> 00:00:13,310
Donc, tout comme avec la relation dominante régulière ou la phonologie Oui, nous devons sélectionner les choses et ensuite manipuler.

6
00:00:13,380 --> 00:00:18,300
Je sais que je suis un peu un disque cassé là-bas, mais c'est un processus vraiment important de sélectionner et puis de changer les choses.

7
00:00:18,300 --> 00:00:24,230
Cette vidéo va être principalement axée sur la sélection d'éléments avec J Query pour deux objectifs principaux ici.

8
00:00:24,390 --> 00:00:33,500
Le premier est d'apprendre à sélectionner des éléments avec la fonction de signe dollar, puis aussi en utilisant la méthode évaluée C pour les éléments de style.

9
00:00:33,630 --> 00:00:45,210
Donc, nous ne sommes pas seulement obtenir des choses justes les imprimer, mais pour le rendre plus visuel Nous allons les sélectionner, puis changer la couleur de fond et requête Jay, nous pouvons sélectionner tout ce que nous voulons en utilisant une seule fonction.

10
00:00:45,570 --> 00:00:46,800
Le signe du dollar.

11
00:00:46,920 --> 00:00:55,650
Donc contrairement à la vanille J.S. Où nous avons le document qui obtiennent l'élément par le sélecteur de requête d'interrogation d'identification tous les éléments d'obtention d'un nom de classe obtiennent des éléments par le nom d'étiquette.

12
00:00:55,650 --> 00:01:00,840
Il ya tellement de façons différentes de sélectionner le signe dollar et requête Jay va remplacer tous les.

13
00:01:00,990 --> 00:01:07,230
Il fonctionne essentiellement comme sélecteur de requêtes tout en ce que nous lui donnons un sélecteur de style C Ss.

14
00:01:07,320 --> 00:01:12,370
Et alors la requête de Jay retourne tous les éléments assortis qui correspondent au sélecteur que nous lui donnons.

15
00:01:12,720 --> 00:01:25,460
Donc, j'ai un exemple ici si nous voulions sélectionner toutes les balises d'image sur la page, il ressemble à ceci si nous voulions sélectionner tous les éléments avec la classe d'échelle, nous faisons l'échelle de points.

16
00:01:25,620 --> 00:01:28,380
N'oubliez pas qu'il s'agit de sélecteurs de style.

17
00:01:28,380 --> 00:01:39,000
Donc, pour un ID, nous avons besoin de l'arc de Thorpe pour une classe qui ont besoin du point et nous pouvons également faire des choses plus avancées comme celui-ci en sélectionnant toutes les balises d'ancrage qui sont à l'intérieur des éléments de liste.

18
00:01:39,360 --> 00:01:41,900
Je vais donc faire une démonstration rapide de la façon dont cela fonctionne.

19
00:01:42,060 --> 00:01:47,750
Donc, nous avons notre démo Jake Querrey vieilli notre page mis en place où j'ai le Cdn inclus.

20
00:01:48,300 --> 00:01:54,180
Et ce n'est pas grave si nous utilisons le mot N ou si vous voulez utiliser la copie téléchargée, il fonctionnera de la même manière.

21
00:01:54,180 --> 00:01:58,110
Nous avons donc besoin de ce script ici et nous avons besoin d'un certain contenu pour jouer.

22
00:01:58,110 --> 00:02:00,410
Donc je vais garder le H-1 S.J. Core demo.

23
00:02:00,510 --> 00:02:06,270
Je vais changer ces alliés pour les rendre un peu plus uniques, donc je vais le remplir avec certains de mes animaux préférés.

24
00:02:06,480 --> 00:02:08,260
Donc fin est pour Newt.

25
00:02:08,520 --> 00:02:15,510
La partie préférée de mon animal de cinq ans de la chanson alphabet animal ajoutera dans un autre de mes albums favoris Monkey.

26
00:02:15,870 --> 00:02:19,050
Et enfin le pin Martin.

27
00:02:19,680 --> 00:02:24,820
Et si vous n'avez jamais vu la martre de pin, ils sont tout aussi adorable et animal terrifiant.

28
00:02:24,950 --> 00:02:27,190
Donc vous pouvez voir assez adorable ici.

29
00:02:28,060 --> 00:02:32,690
Mais si vous jetez un oeil à eux en action, ils sont des prédateurs fous et assez effrayant.

30
00:02:33,000 --> 00:02:33,270
D'ACCORD.

31
00:02:33,300 --> 00:02:38,770
Donc, certains de mes animaux préférés dans la liste va sauver et nous allons ouvrir ce maintenant.

32
00:02:39,720 --> 00:02:41,150
Assurez-vous que nous sommes dans le bon répertoire.

33
00:02:41,200 --> 00:02:53,620
Jay a extrait la démo que chaque Chimo et ce que je vais faire est de déplacer cela dans sa propre fenêtre et nous allons simplement aller dans la console de faire la taille de la police un peu plus grand et nous allons utiliser une requête pour sélectionner certaines de ces choses.

34
00:02:53,640 --> 00:02:56,100
Rappelez-vous donc qu'un signe dollar est une fonction.

35
00:02:56,520 --> 00:03:00,490
Et si je tape juste dollar signe sur son propre sans les parenthèses.

36
00:03:00,720 --> 00:03:08,700
C'est comme si j'écrivais l'alerte sans parenthèses ni con. Dot log sans les parenthèses ne fait vraiment rien sauf me dire.

37
00:03:08,940 --> 00:03:12,610
Oui, je connais ce code, mais il ne l'exécute pas.

38
00:03:13,170 --> 00:03:16,860
Commençons par sélectionner le seul H-1 sur la page pour le faire.

39
00:03:16,860 --> 00:03:24,550
Nous pouvons utiliser le signe dollar et le sélecteur s pour sélectionner h ones est juste H-1 et nous avons frappé entrer.

40
00:03:24,600 --> 00:03:27,480
Vous pouvez le voir renvoie la démo J queery H-1.

41
00:03:27,630 --> 00:03:30,110
Aussi remarquer que c'est à l'intérieur d'une liste.

42
00:03:30,300 --> 00:03:36,480
Donc, contrairement au sélecteur de requêtes où il retourne la première instance le sélecteur de signe dollar pour.

43
00:03:36,480 --> 00:03:43,310
Query renvoie une liste même s'il n'y a qu'un seul élément qui est réellement utile et nous verrons cela dans un petit peu.

44
00:03:43,320 --> 00:03:53,150
Alors essayons de sélectionner tous les alliés maintenant afin que nous puissions faire quelque chose comme l'allié Dollar Sign et nous avons trois alliés juste comme ça.

45
00:03:53,490 --> 00:03:59,130
Nous pouvons également sélectionner le corps en tapant le corps et pour rendre les choses un peu plus intéressantes.

46
00:03:59,130 --> 00:04:20,430
Revenons à notre âge e-mail et ajoutez dans un I.D. À pin martin nous allons appeler adorable comme l'id et puis nous pouvons également sur notre singe hurleur ajoutera un singe howler étiquette A et il sera juste aller à com de point de singe et ce sera juste monkey dot com.

47
00:04:20,730 --> 00:04:30,550
Et si nous nous rafraîchissons si je veux sélectionner ce lien, je voudrais utiliser le signe dollar et je pourrais simplement faire de l'étiquette d'ancrage et qui me le donnera.

48
00:04:30,600 --> 00:04:34,740
Je pourrais aussi dire balise d'ancrage à l'intérieur d'un allié.

49
00:04:34,980 --> 00:04:40,770
Je pourrais aussi si je voulais vraiment dire que les balises d'ancrage à l'intérieur des alliés qui sont au lieu d'une volonté.

50
00:04:41,100 --> 00:04:43,990
Et dans tous les cas jusqu'à présent ceux-ci sont identiques.

51
00:04:44,160 --> 00:04:51,270
Mais si j'ajoute une autre balise d'ancrage juste en bas de la page Google dot com et je rafraîchis.

52
00:04:51,810 --> 00:04:55,290
Et maintenant je fais mon étiquette d'ancre de signe de dollar.

53
00:04:55,290 --> 00:04:57,350
Je reçois les deux balises d'ancrage.

54
00:04:57,820 --> 00:05:05,820
Si je fais un signe dollar UL avec un allié avec une balise d'ancrage à l'intérieur de cela, il ne me donne cette balise d'ancrage.

55
00:05:05,970 --> 00:05:27,890
Ou ils pourraient simplement raccourci à ce ici et là nous allons sélectionner l'élément avec l'idée adorable, il fonctionne comme queery select ou tout ou sélecteur de requête ou C Ss pour cette question où j'ai besoin de l'Arctique ou le symbole de hachage Plus le ID nom adorable et qui me donne l'allié de martre de pin.

56
00:05:27,940 --> 00:05:33,660
Nous avons donc vu comment nous choisissons et il n'est pas très excitant juste d'imprimer des choses sur la console ou simplement de les voir retournés ici.

57
00:05:33,670 --> 00:06:00,440
Mais en fait, je veux faire est d'introduire une méthode, nous allons voir beaucoup plus de méthodes dans les prochaines vidéos, mais je vais en montrer un maintenant qui nous aidera à rendre les choses visuelles et nous aider à modifier le style de sorte que Méthode s'appelle Dotsie SS et la façon dont il fonctionne est que nous tapons un signe dollar sélecteur et un sélecteur et puis nous pouvons ajouter Dotsie SS sur la fin de celui-ci et le passer dans certaines propriétés et valeurs à changer.

58
00:06:00,450 --> 00:06:11,220
Alors voici un exemple que je suis en train de sélectionner quelque chose avec l'idée de spéciale et puis je suis en cours d'exécution CSSA sur elle et le changement de la frontière à deux pixels rouges solides.

59
00:06:11,500 --> 00:06:13,190
Permettez-moi de le démontrer.

60
00:06:13,300 --> 00:06:15,400
Faisons-le à la H-1.

61
00:06:15,390 --> 00:06:21,390
Alors je choisis le signe dollar H-1 Dotsie SS Comme ça.

62
00:06:21,610 --> 00:06:30,380
Et puis au lieu d'ici, nous allons changer la couleur pour être jaune juste comme ça.

63
00:06:30,630 --> 00:06:31,480
Et j'ai touché l'entrée.

64
00:06:31,600 --> 00:06:34,980
Et vous pouvez voir qu'il change de jaune qui est génial.

65
00:06:35,310 --> 00:06:39,420
Donc, il est toujours bon de garder à l'esprit comment vous le feriez sans j Querrey.

66
00:06:39,630 --> 00:06:54,840
Donc, nous allons faire quelque chose comme le document qui obtiennent et nous allons faire le sélecteur de requête de document H-1 point et B n'ont pas que C Ss Donc, nous avons besoin de faire point couleur de style point de couleur.

67
00:06:54,940 --> 00:06:56,700
Et changeons-le en orange.

68
00:06:57,690 --> 00:06:58,400
Et voilà.

69
00:06:58,440 --> 00:07:06,300
Nous l'avons changé en orange, mais cette ligne ici est en fait beaucoup plus puissante et peut faire beaucoup plus que nous ne pouvons faire avec cette seule ligne ici.

70
00:07:06,550 --> 00:07:14,100
Supposons donc que je voulais changer de styles multiples sur ce H-1 que je voulais changer la couleur et la couleur d'arrière-plan et la bordure.

71
00:07:14,110 --> 00:07:19,240
Ce que je peux faire est de définir mes styles dans un objet et de passer un objet dans.

72
00:07:19,480 --> 00:07:24,250
Donc, je n'ai pas à faire juste une chaîne de Porter virgule la valeur de Porter.

73
00:07:24,550 --> 00:07:31,070
Je peux définir un objet avec de multiples propriétés plusieurs paires de valeurs de clé et passer que dans et ils seront tous appliqués.

74
00:07:31,360 --> 00:07:32,500
Alors, faisons-le maintenant.

75
00:07:32,760 --> 00:07:37,080
Définissons nos styles et nous n'avons pas à faire un objet distinct.

76
00:07:37,120 --> 00:07:38,250
Je vais vous montrer ça.

77
00:07:38,350 --> 00:07:56,340
Et au lieu d'ici dira que la couleur devrait être le fond rouge devrait être rose et nous ferons la frontière devrait être deux pixels violet solide juste comme cela.

78
00:07:56,740 --> 00:08:02,460
Et si nous frappons Enter, nous avons maintenant notre objet styles et encore une fois qui peut être appelé quelque chose.

79
00:08:02,740 --> 00:08:05,060
Et puis ce que nous allons faire est de sélectionner le H-1.

80
00:08:05,310 --> 00:08:14,950
Donc dollar signe H-1 encore gutsiest nous et nous passons juste dans notre objet styles et tous ces styles sont appliqués.

81
00:08:15,190 --> 00:08:19,720
Donc, pour ce faire, sans requête j nous obligerait à faire trois lignes distinctes.

82
00:08:19,750 --> 00:08:32,400
Vous devriez faire le document que le querist laisse votre H-1 couleur foncée du modèle est égal au rouge et puis dot le point de fond de modèle est égal au rose et puis que le style que la frontière est égal à deux pixels pourpre plein.

83
00:08:32,710 --> 00:08:35,580
J'espère que vous pouvez le voir déjà avec juste quelques lignes.

84
00:08:35,640 --> 00:08:38,240
J Query est déjà prouvé être assez puissant.

85
00:08:38,520 --> 00:08:44,370
Et bien que nous puissions faire tout sans elle, c'est certainement nous faire gagner du temps et rendre notre code plus propre.

86
00:08:44,710 --> 00:08:58,160
Il ya une autre caractéristique de la méthode CSSA point qui rend encore plus utile que je vais montrer maintenant ce que nous pouvons faire est en fait le style de plusieurs éléments à la fois plutôt que de simplement sélectionner le premier et le rendre jaune.

87
00:08:58,260 --> 00:09:03,290
Nous pourrions sélectionner tous les alliés ou tous les alliés et nous avons juste besoin d'une ligne pour le faire.

88
00:09:03,340 --> 00:09:04,110
Donc, je vais vous montrer cela.

89
00:09:04,110 --> 00:09:06,430
Maintenant, faisons tous les mensonges.

90
00:09:06,970 --> 00:09:09,580
Donc, pour ce faire, j'ai besoin de sélectionner des alliés.

91
00:09:09,730 --> 00:09:11,550
Alors, juste comme ça.

92
00:09:11,550 --> 00:09:12,650
Et si je touche entrer.

93
00:09:12,780 --> 00:09:31,940
Vous verrez que cela me donne les trois alliés et puis je dois chaîner sur C Ss et je vais juste lui donner une couleur de propriété unique et le changer pour être bleu juste comme ça et je vais frapper entrer et remarquer celui-ci La ligne change les trois alliés.

94
00:09:32,350 --> 00:09:34,610
Donc certainement très puissant.

95
00:09:34,650 --> 00:09:46,030
Tout ce que nous faisons est de sélectionner avec notre sélecteur signe dollar allié et qui nous donne trois alliés et en faisant Dotsie SS sur un tableau ici de ALWIS cette liste d'alliés.

96
00:09:46,240 --> 00:09:52,320
Il va en fait les rendre tous bleus et nous n'avons même pas à boucler manuellement comme nous le ferions sans une requête.

97
00:09:52,360 --> 00:09:59,360
Donc, juste pour vous rappeler si je veux changer tous d'eux pour être vert sans requête, j'ai d'abord besoin de sélectionner tous.

98
00:09:59,500 --> 00:10:06,570
Ainsi, var allies est égal au document que le sélecteur de requête passe dans l'allié de chaîne.

99
00:10:06,790 --> 00:10:08,390
Et puis je dois boucler.

100
00:10:08,520 --> 00:10:15,350
Donc, pour var I est égal à zéro est inférieur à Elvises à la longueur I plus plus.

101
00:10:16,260 --> 00:10:30,100
Et puis à l'intérieur de la boucle, nous devons faire des alliés, je que le style que la couleur égale et nous ferons vert comme ça et nous allons frapper entrer.

102
00:10:30,390 --> 00:10:32,850
Et vous pouvez voir qu'ils changent tous en vert.

103
00:10:32,860 --> 00:10:36,800
Donc, encore une fois, il est faisable sans une requête, mais c'est beaucoup plus de code.

104
00:10:36,900 --> 00:10:40,780
Nous devons les sélectionner tous d'abord et même juste le choix est douloureux.

105
00:10:40,770 --> 00:10:43,820
C'est beaucoup plus long qu'un simple signe de dollar.

106
00:10:43,870 --> 00:10:53,450
Et puis nous avons aussi besoin de boucle manuellement avec une boucle for ou une boucle while et ensuite changer chacun d'eux individuellement et puis nous avons terminé avec une requête bien.

107
00:10:53,560 --> 00:11:02,900
Tout ce que nous avons eu à faire pour revenir au bleu est de sélectionner tous les alliés Dotsie SS et puis passer dans notre propriété qui est de couleur bleu bleu.

108
00:11:03,420 --> 00:11:05,260
Je vais vous montrer quelques exemples.

109
00:11:05,430 --> 00:11:20,970
Sélectionnons toutes les balises d'ancrage juste comme ceci une étiquette que C Ss et fera leur taille de police plus grande ainsi la taille de police et elle sera 40 pixels et là nous allons.

110
00:11:20,980 --> 00:11:31,140
Nous obtenons de gros liens. Je vais également montrer que nous pouvons définir un objet plein de styles comme nous l'avons fait plus tôt et nous pouvons l'utiliser pour mettre en forme plusieurs éléments, pas seulement un.

111
00:11:31,240 --> 00:11:44,890
Donc nous allons sélectionner tous les mensonges et les styler ensemble et plutôt que de simplement faire le SS et en passant dans une corde comme la couleur, nous allons lui donner un objet et de le définir en place ici.

112
00:11:45,550 --> 00:11:47,920
Et nous allons ajouter dans un certain espace ici pour taper.

113
00:11:48,420 --> 00:11:52,340
Et la première chose que nous allons faire est de changer la taille de la police de tous.

114
00:11:52,540 --> 00:12:01,300
Donc NCSA que la taille de la police est la taille de la police Dasch ou la taille et la taille en javascript et dans la requête J, nous devons utiliser le cas de chameau.

115
00:12:01,480 --> 00:12:21,140
Donc, la taille de police pas d'espace ou pas de tiret, mais nous majuscule s membre qui est affaire Kimbal et nous allons les faire 10 let's faire encore 10 pixels et puis nous allons ajouter dans une bordure et celui-ci sera de trois pixels daht violet.

116
00:12:21,340 --> 00:12:23,610
Ces frontières pointillées sont toujours étonnantes.

117
00:12:23,980 --> 00:12:27,840
Et puis enfin ajouter dans l'arrière-plan de couleur de fond.

118
00:12:28,140 --> 00:12:30,490
Et composons notre propre R.G. Couleur.

119
00:12:30,660 --> 00:12:31,670
Donc R.G. B.

120
00:12:31,710 --> 00:12:33,540
Et nous allons faire notre G.P.A. réellement.

121
00:12:33,690 --> 00:12:36,640
Et le premier lire aussi.

122
00:12:37,070 --> 00:12:43,340
89 rouge 45 vert 20 bleu.

123
00:12:43,480 --> 00:12:49,490
Et puis 0.5 Alpha qui est le canal d'opacité ou de transparence.

124
00:12:49,620 --> 00:12:54,490
Et si nous frappons entrer vous pouvez voir que tous ceux sont appliqués à la fois.

125
00:12:54,630 --> 00:12:58,110
Donc, notre taille de police diminuer Nous avons 10 pixels.

126
00:12:58,260 --> 00:13:13,060
Nous avons ces frontières étonnantes autour des alliés qui sont trois pixels daht violet et puis nous avons la couleur de fond qui est quelle que soit cette couleur s'est avéré être il ressemble à une sorte de couleur brunâtre clair.

127
00:13:13,090 --> 00:13:13,360
D'accord.

128
00:13:13,360 --> 00:13:22,070
J'espère que vous pouvez voir à partir de cette démonstration rapide que deux choses différentes que nous faisons la sélection avec le signe dollar et que sur ses propres est incroyablement puissant.

129
00:13:22,090 --> 00:13:26,390
Il fonctionne fondamentalement comme Slickter queery et queery sélecteur tous combinés.

130
00:13:26,640 --> 00:13:29,620
Et c'est une syntaxe beaucoup plus courte et plus facile à écrire.

131
00:13:29,910 --> 00:13:45,040
Et puis il ya la méthode CSSA qui est également extrêmement puissant parce que nous pouvons changer les propriétés individuelles comme nous l'avons fait ici, mais nous pouvons aussi massas signer les propriétés CSSA comme nous l'avons fait ici où nous passons dans un objet plein de paires valeur clé.

132
00:13:45,100 --> 00:14:03,830
Probablement la partie la plus importante de tout cela est que lorsque je sélectionne une collection comme tous les alliés comme je l'ai fait ici, je n'ai pas à faire une boucle manuellement et à appliquer quelque chose individuellement comme je l'ai fait ici où nous avons dû boucler tous les Alliés et changer la couleur une à la fois avec la requête J.

133
00:14:03,930 --> 00:14:12,990
Si j'ai une collection d'éléments, il passe automatiquement au-dessus de cela et applique Dotsie évaluer à chacun.

134
00:14:12,990 --> 00:14:14,600
C'est donc extrêmement puissant.

135
00:14:14,770 --> 00:14:19,770
Et c'est pourquoi, comme une note de côté, c'est pourquoi il retourne toujours un tableau ici.

136
00:14:19,890 --> 00:14:28,370
Même si j'ai juste un élément avec l'ID adorable, il retourne toujours dans la liste parce que toute la logique derrière les scènes implique en boucle sur cette liste.

137
00:14:28,470 --> 00:14:31,860
Donc, il va boucler sur ce et il se trouve qu'il ya un élément ici.

138
00:14:31,890 --> 00:14:33,030
Donc, il ne boucle pas vraiment.

139
00:14:33,040 --> 00:14:34,540
Cela ne fait qu'une fois.