1
00:00:00,110 --> 00:00:00,530
Tutto ok.

2
00:00:00,530 --> 00:00:01,500
Ben tornato.

3
00:00:01,500 --> 00:00:03,350
Quindi iniziamo a scrivere del codice.

4
00:00:03,480 --> 00:00:07,290
E la prima cosa che impareremo a fare è come selezionare gli elementi.

5
00:00:07,290 --> 00:00:13,190
Quindi, proprio come nella normale relazione dominante o nella fonologia. Sì, dobbiamo selezionare le cose e poi manipolarle.

6
00:00:13,380 --> 00:00:17,880
So che sono un po 'un disco rotto lì, ma è un processo molto importante selezionare e poi cambiare

7
00:00:17,880 --> 00:00:18,300
le cose.

8
00:00:18,300 --> 00:00:23,790
video sarà principalmente focalizzato sulla selezione di elementi con J Query per due obiettivi principali qui.

9
00:00:23,790 --> 00:00:24,230
Questo

10
00:00:24,390 --> 00:00:30,600
Il primo sta imparando come selezionare gli elementi con la funzione del segno del dollaro e quindi anche usando

11
00:00:30,740 --> 00:00:33,500
il metodo C valutato per gli elementi di stile.

12
00:00:33,630 --> 00:00:38,160
Quindi non stiamo solo selezionando alcune cose, ma stampandole, ma rendendole più visive. Li

13
00:00:38,160 --> 00:00:44,010
selezioneremo e poi cambieremo il colore di sfondo e la query di Jay possiamo selezionare tutto ciò che vogliamo

14
00:00:44,010 --> 00:00:45,210
usando una sola funzione.

15
00:00:45,570 --> 00:00:46,800
Il segno del dollaro.

16
00:00:46,920 --> 00:00:52,860
Quindi a differenza della vaniglia J. S. di un nome di classe ottengono gli elementi in base al nome del tag.

17
00:00:52,920 --> 00:00:55,650
dove abbiamo il documento che ottiene l'elemento dal selettore di query del selettore dell'interrogazione di query tutti ottengono gli elementi

18
00:00:55,650 --> 00:01:00,660
Ci sono tanti modi diversi per selezionare il simbolo del dollaro e la query di Jay sostituirà tutti.

19
00:01:00,990 --> 00:01:07,230
Funziona fondamentalmente come il selettore di query in quanto gli diamo un selettore di stile C Ss.

20
00:01:07,320 --> 00:01:12,370
E poi la query di Jay restituisce tutti gli elementi corrispondenti che corrispondono al selettore che gli diamo.

21
00:01:12,720 --> 00:01:18,360
Quindi qui ho un esempio se volessimo selezionare tutti i tag immagine sulla pagina che

22
00:01:18,360 --> 00:01:25,460
assomiglia a questo se volessimo selezionare tutti gli elementi con classe di scala che facciamo scala dei punti.

23
00:01:25,620 --> 00:01:28,380
Ricorda che questo è impostato sui selettori di stile.

24
00:01:28,380 --> 00:01:33,840
anche fare cose più avanzate come questa selezionando tutti i tag di ancoraggio che si trovano all'interno degli elementi della lista.

25
00:01:33,840 --> 00:01:39,000
Quindi per un ID abbiamo bisogno dell'arco per Thorpe per una classe che ha bisogno del punto e possiamo

26
00:01:39,360 --> 00:01:41,900
Quindi farò una breve demo qui su come funziona.

27
00:01:42,060 --> 00:01:47,750
Quindi abbiamo la nostra demo di Jake Querrey che gli ha invecchiato la nostra pagina dove ho incluso il Cdn.

28
00:01:48,300 --> 00:01:53,190
E non importa se usiamo la parola N o se vuoi usare la copia scaricata, funzionerà

29
00:01:53,190 --> 00:01:54,180
allo stesso modo.

30
00:01:54,180 --> 00:01:58,110
Quindi abbiamo bisogno di questo script qui e quindi abbiamo bisogno di alcuni contenuti con cui giocare.

31
00:01:58,110 --> 00:02:00,410
Quindi terrò l'H-1 S. J. demo principale.

32
00:02:00,510 --> 00:02:05,970
Cambierò questi alleati per renderli un po 'più unici, quindi lo riempirò con alcuni dei miei animali preferiti.

33
00:02:06,480 --> 00:02:08,260
Quindi la fine è per Newt.

34
00:02:08,520 --> 00:02:14,100
La parte preferita del mio animale da cinque anni della canzone alfabeto animale aggiungerà in un altro dei

35
00:02:14,410 --> 00:02:15,510
miei album preferiti Monkey.

36
00:02:15,870 --> 00:02:19,050
E infine la pineta.

37
00:02:19,680 --> 00:02:24,820
E se non hai mai visto la martora, sono animali altrettanto adorabili e terrificanti.

38
00:02:24,950 --> 00:02:27,190
Quindi puoi vedere piuttosto adorabile qui.

39
00:02:28,060 --> 00:02:32,690
Ma se li guardi in azione sono dei pazzi predatori e piuttosto spaventosi.

40
00:02:33,000 --> 00:02:33,270
OK.

41
00:02:33,300 --> 00:02:38,770
Quindi alcuni dei miei animali preferiti nella lista salveranno e apriamolo ora.

42
00:02:39,720 --> 00:02:41,150
Assicurati di essere nella giusta directory.

43
00:02:41,200 --> 00:02:47,730
Jay ha estratto la demo che ogni Chimo e quello che farò è spostarlo nella sua finestra e andremo nella

44
00:02:47,730 --> 00:02:53,190
console per aumentare le dimensioni del carattere e useremo una query per selezionare alcune di queste cose.

45
00:02:53,640 --> 00:02:56,100
Quindi ricorda che un simbolo del dollaro è una funzione.

46
00:02:56,520 --> 00:03:00,490
E se scrivo solo il simbolo del dollaro da solo senza le parentesi.

47
00:03:00,720 --> 00:03:06,930
È proprio come me che digito avviso senza parentesi o contro. il diario dei punti senza le parentesi non fa

48
00:03:06,930 --> 00:03:08,700
veramente nulla se non dirmelo.

49
00:03:08,940 --> 00:03:12,610
Sì, so di quel codice ma in realtà non lo esegue.

50
00:03:13,170 --> 00:03:16,860
Iniziamo selezionando l'unico H-1 sulla pagina per farlo.

51
00:03:16,860 --> 00:03:24,550
Possiamo usare il simbolo del dollaro e il selettore s per selezionare h è solo H-1 e premiamo Invio.

52
00:03:24,600 --> 00:03:27,480
Potete vedere che restituisce la demo di J queery H-1.

53
00:03:27,630 --> 00:03:30,110
Quindi, nota anche che è all'interno di una lista.

54
00:03:30,300 --> 00:03:36,480
Quindi, a differenza del selettore di query, dove restituisce la prima istanza per il selettore del simbolo del dollaro.

55
00:03:36,480 --> 00:03:42,360
Query restituirà una lista anche se c'è un solo elemento che è effettivamente utile e lo vedremo tra

56
00:03:42,360 --> 00:03:43,310
un po '.

57
00:03:43,320 --> 00:03:51,570
Quindi proviamo a selezionare tutti gli alleati ora in modo che possiamo fare qualcosa come alleati di Dollar Sign e otteniamo

58
00:03:51,570 --> 00:03:53,150
tre alleati proprio così.

59
00:03:53,490 --> 00:03:59,130
Possiamo anche selezionare il corpo digitando il corpo e rendere le cose un po 'più interessanti.

60
00:03:59,130 --> 00:04:08,550
Torniamo alla nostra e-mail di età e aggiungiamo una I. D. a pino martin lo chiameremo adorabile come id

61
00:04:08,550 --> 00:04:16,560
e poi potremo anche aggiungere alla scimmia urlatrice una scimmia urlatrice a tag A e andrà solo a scimmia

62
00:04:16,620 --> 00:04:20,430
dot com e questo sarà semplicemente scimmia dot com.

63
00:04:20,730 --> 00:04:28,640
E se aggiorniamo se voglio selezionare quel collegamento, utilizzerei il simbolo del dollaro e potrei semplicemente fare il tag di ancoraggio e

64
00:04:29,130 --> 00:04:30,550
questo me lo darà.

65
00:04:30,600 --> 00:04:34,740
Potrei anche dire tag di ancoraggio all'interno di un alleato.

66
00:04:34,980 --> 00:04:40,040
Potrei anche se volessi davvero dire solo i tag di ancoraggio all'interno degli alleati che sono invece di una volontà.

67
00:04:41,100 --> 00:04:43,990
E in tutti i casi finora sono identici.

68
00:04:44,160 --> 00:04:51,270
Ma se aggiungo un altro tag di ancoraggio nella parte inferiore della pagina Google dot com e aggiorno.

69
00:04:51,810 --> 00:04:55,290
E ora faccio il mio segno di ancoraggio del segno del dollaro.

70
00:04:55,290 --> 00:04:57,350
Ottengo entrambi i tag di ancoraggio.

71
00:04:57,820 --> 00:05:05,370
Se faccio un segno di dollaro UL con un alleato con un tag di ancoraggio all'interno di questo mi dà solo questo tag di

72
00:05:05,370 --> 00:05:05,820
ancoraggio.

73
00:05:05,970 --> 00:05:13,660
Oppure avrebbero potuto accorciarlo a questo qui e lì andiamo a selezionare l'oggetto con l'idea adorabile funziona come selezione di

74
00:05:13,950 --> 00:05:19,700
queery o tutto o il selettore di query o C Ss per quella materia in

75
00:05:19,770 --> 00:05:27,890
cui ho bisogno del simbolo artico o hash più il Nome ID adorabile e che mi dà l'alleata della martora.

76
00:05:27,940 --> 00:05:32,250
Quindi abbiamo visto come selezioniamo e non è molto eccitante solo stampare le cose alla console

77
00:05:32,250 --> 00:05:33,660
o semplicemente vederle restituite qui.

78
00:05:33,670 --> 00:05:38,530
visive e aiutarci a modificare lo stile in modo che il metodo si chiama Dotsie

79
00:05:38,520 --> 00:05:43,300
SS e il modo in cui funziona è che digitiamo un selettore con il simbolo

80
00:05:43,300 --> 00:05:51,060
del dollaro e qualche selettore e quindi possiamo aggiungere Dotsie SS alla fine di quello e passarlo in alcune proprietà e valori per cambiare.

81
00:05:51,060 --> 00:05:57,580
Ma in realtà voglio fare è introdurre un metodo che vedremo molti più metodi nei prossimi video, ma ne mostrerò

82
00:05:57,610 --> 00:06:00,440
uno adesso che ci aiuterà a rendere le cose

83
00:06:00,450 --> 00:06:07,150
Quindi ecco un esempio sto selezionando qualcosa con l'idea di speciale e poi sto correndo su CSSA su di

84
00:06:07,140 --> 00:06:11,220
esso e cambiando il bordo per essere due pixel rosso fisso.

85
00:06:11,500 --> 00:06:13,190
Quindi fammelo dimostrare.

86
00:06:13,300 --> 00:06:15,400
Facciamolo per l'H-1.

87
00:06:15,390 --> 00:06:21,390
Quindi seleziono il simbolo del dollaro H-1 Dotsie SS Proprio come questo.

88
00:06:21,610 --> 00:06:30,380
E poi invece di qui cambiamo il colore per essere giallo proprio così.

89
00:06:30,630 --> 00:06:31,480
E ho colpito invio.

90
00:06:31,600 --> 00:06:34,980
E puoi vedere che cambia in giallo che è fantastico.

91
00:06:35,310 --> 00:06:39,420
Quindi è sempre bene tenere a mente come si farebbe senza j Querrey.

92
00:06:39,630 --> 00:06:49,270
Quindi dovremmo fare qualcosa come il documento che ottiene e facciamo il selettore di query documentali H-1 punto e B non hanno quel C Ss

93
00:06:49,260 --> 00:06:54,840
Quindi abbiamo bisogno di fare il punto di colore del punto di stile equals.

94
00:06:54,940 --> 00:06:56,700
E cambiamo in arancione.

95
00:06:57,690 --> 00:06:58,400
E noi andiamo.

96
00:06:58,440 --> 00:07:04,110
qui è in realtà molto più potente e può fare molto più di quello che possiamo fare con questa singola linea qui.

97
00:07:04,380 --> 00:07:06,300
L'abbiamo modificato in arancione, ma questa linea

98
00:07:06,550 --> 00:07:11,490
Supponiamo quindi che volessi cambiare più stili riguardo a questo H-1. Volevo cambiare il colore,

99
00:07:11,680 --> 00:07:14,100
il colore dello sfondo e il bordo.

100
00:07:14,110 --> 00:07:19,240
Quello che posso fare è definire i miei stili in un oggetto e passare un oggetto dentro

101
00:07:19,480 --> 00:07:24,250
Quindi non devo solo fare una stringa Porter virgola il valore per Porter.

102
00:07:24,550 --> 00:07:29,920
Posso definire un oggetto con più proprietà coppie di valori chiave multipli e passarlo e

103
00:07:29,910 --> 00:07:31,070
saranno tutti applicati.

104
00:07:31,360 --> 00:07:32,500
Quindi facciamolo ora.

105
00:07:32,760 --> 00:07:37,080
Definiamo i nostri stili e non dobbiamo creare un oggetto separato.

106
00:07:37,120 --> 00:07:38,250
Te lo mostrerò.

107
00:07:38,350 --> 00:07:50,220
E invece di qui dirà che il colore dovrebbe essere rosso lo sfondo dovrebbe essere rosa e faremo

108
00:07:50,230 --> 00:07:56,340
il bordo dovrebbe essere due pixel viola solido proprio così.

109
00:07:56,740 --> 00:08:02,460
E se premiamo Invio, ora abbiamo i nostri stili oggetto e di nuovo che può essere chiamato qualsiasi cosa.

110
00:08:02,740 --> 00:08:05,060
E poi quello che faremo è selezionare l'H-1.

111
00:08:05,310 --> 00:08:14,200
Quindi il simbolo del dollaro H-1 di nuovo ci gusta più e passiamo semplicemente nel nostro oggetto di stile e tutti questi stili

112
00:08:14,190 --> 00:08:14,950
sono applicati.

113
00:08:15,190 --> 00:08:19,720
Quindi per farlo senza j query ci richiederebbe di fare tre linee separate.

114
00:08:19,750 --> 00:08:26,830
Dovresti fare un documento che querist lasci che il tuo colore scuro in stile H-1 sia uguale al rosso e quindi lo sfondo punto in stile

115
00:08:26,880 --> 00:08:32,400
punto è uguale al rosa e quindi quello stile quel bordo è uguale a due pixel in tinta unita viola.

116
00:08:32,710 --> 00:08:35,580
Spero che tu possa già vederlo con poche righe.

117
00:08:35,640 --> 00:08:38,240
J Query ha già dimostrato di essere piuttosto potente.

118
00:08:38,520 --> 00:08:44,020
E mentre possiamo fare tutto senza di esso, ci sta sicuramente risparmiando un po 'di tempo e rendendo il nostro codice più pulito.

119
00:08:44,710 --> 00:08:51,330
caratteristica del metodo CSSA puntino che rende ancora più utile mostrare che ora quello che possiamo fare è

120
00:08:51,340 --> 00:08:57,570
in realtà lo stile di più elementi contemporaneamente piuttosto che selezionare solo il primo e renderlo giallo.

121
00:08:57,580 --> 00:08:58,160
C'è un'altra

122
00:08:58,260 --> 00:09:03,290
Potremmo selezionare tutti quelli o tutti gli alleati e abbiamo solo bisogno di una riga per farlo.

123
00:09:03,340 --> 00:09:04,110
Quindi te lo mostrerò.

124
00:09:04,110 --> 00:09:06,430
Ora facciamo tutte le bugie.

125
00:09:06,970 --> 00:09:09,580
Quindi per farlo ho bisogno di selezionare gli alleati.

126
00:09:09,730 --> 00:09:11,550
Quindi proprio così.

127
00:09:11,550 --> 00:09:12,650
E se premo invio.

128
00:09:12,780 --> 00:09:19,120
così e premo Invio e noterò questo la linea cambia tutti e tre gli alleati.

129
00:09:19,120 --> 00:09:28,410
Vedrai che mi dà i tre alleati e poi ho bisogno di incatenarmi su C Ss e gli darò un singolo colore

130
00:09:28,410 --> 00:09:31,940
di proprietà e lo cambierò in blu proprio

131
00:09:32,350 --> 00:09:34,610
Quindi decisamente molto potente.

132
00:09:34,650 --> 00:09:41,990
Tutto ciò che facciamo è selezionare con il nostro selettore alleato del segno del dollaro e questo ci dà tre alleati e facendo

133
00:09:42,000 --> 00:09:46,030
Dotsie SS su un array qui di ALWIS questa lista di alleati.

134
00:09:46,240 --> 00:09:51,310
In realtà li renderà tutti blu e non dovremo nemmeno eseguire il ciclo manualmente come faremmo

135
00:09:51,340 --> 00:09:52,320
senza una query.

136
00:09:52,360 --> 00:09:58,410
per ricordarti se voglio cambiarli tutti per essere verdi senza query, devo prima selezionarli tutti.

137
00:09:58,480 --> 00:09:59,360
Quindi, solo

138
00:09:59,500 --> 00:10:06,570
Quindi i vari alleati sono uguali al documento che il selettore di query passa tutti nella stringa alleata.

139
00:10:06,790 --> 00:10:08,390
E poi ho bisogno di collegarmi.

140
00:10:08,520 --> 00:10:15,350
Quindi per var I uguale a zero è inferiore a Elvises di lunghezza I plus plus.

141
00:10:16,260 --> 00:10:22,410
E poi dentro al loop dobbiamo fare alleati con lo stile che il colore è

142
00:10:25,170 --> 00:10:30,100
uguale e faremo il verde proprio così e faremo clic su enter.

143
00:10:30,390 --> 00:10:32,850
E puoi vedere che tutti cambiano in verde.

144
00:10:32,860 --> 00:10:36,800
Quindi di nuovo è fattibile senza una query, ma è significativamente più codice.

145
00:10:36,900 --> 00:10:40,780
Dobbiamo prima selezionarli tutti e anche solo selezionarli è doloroso.

146
00:10:40,770 --> 00:10:43,820
Questo è molto più lungo di un semplice segno di dollaro.

147
00:10:43,870 --> 00:10:49,060
E poi abbiamo anche bisogno di fare un ciclo manualmente con un ciclo for o un

148
00:10:49,060 --> 00:10:53,450
ciclo while e poi cambiarne uno singolarmente e poi abbiamo finito con una query.

149
00:10:53,560 --> 00:11:01,030
Tutto quello che dovevamo fare per tornare al blu è selezionare tutti gli alleati Dotsie SS e poi passare nella nostra proprietà che

150
00:11:01,090 --> 00:11:02,900
è blu di colore blu.

151
00:11:03,420 --> 00:11:05,260
Mostrerò qualche altro esempio qui.

152
00:11:05,430 --> 00:11:13,710
dimensioni del loro carattere più grandi in modo che la dimensione del font e sarà 40 pixel e ci andiamo.

153
00:11:13,710 --> 00:11:20,970
Selezioniamo tutti i tag di ancoraggio proprio come questo un tag che C Ss e renderà le

154
00:11:20,980 --> 00:11:27,460
Otteniamo grandi collegamenti Mostrerò anche che possiamo definire un oggetto pieno di stili come abbiamo fatto in precedenza

155
00:11:27,450 --> 00:11:31,140
e possiamo usarlo per modellare più elementi non solo uno.

156
00:11:31,240 --> 00:11:39,120
Quindi selezioneremo tutte le bugie e le combineremo insieme e invece di fare solo le SS e passare

157
00:11:39,120 --> 00:11:44,890
una stringa come il colore, gli daremo un oggetto e lo definiremo qui.

158
00:11:45,550 --> 00:11:47,920
E aggiungeremo qui uno spazio per scrivere.

159
00:11:48,420 --> 00:11:52,340
E la prima cosa che faremo è cambiare la dimensione del carattere di tutti loro.

160
00:11:52,540 --> 00:12:00,300
dimensione del font è la dimensione del font Dasch o altezza e dimensione in javascript e in J query dobbiamo usare il caso cammello.

161
00:12:00,310 --> 00:12:01,300
Quindi NCSA come

162
00:12:01,480 --> 00:12:09,540
Quindi la dimensione del font non ha spazio o nessun trattino, ma il membro di maiuscole è

163
00:12:09,820 --> 00:12:20,930
il caso Kimbal e noi li faremo 10 facciamo ancora 10 pixel e poi aggiungeremo un bordo e questo sarà tre pixel tratteggiati viola.

164
00:12:21,340 --> 00:12:23,610
Quei bordi tratteggiati sono sempre stupendi.

165
00:12:23,980 --> 00:12:27,840
E infine aggiungere lo sfondo del colore di sfondo.

166
00:12:28,140 --> 00:12:30,490
E facciamo solo la nostra R. G. colore.

167
00:12:30,660 --> 00:12:31,670
Quindi R. G. B.

168
00:12:31,710 --> 00:12:33,540
E faremo il nostro G. P. UN. in realtà.

169
00:12:33,690 --> 00:12:36,640
E anche il primo leggerà.

170
00:12:37,070 --> 00:12:43,340
89 rosso 45 Verde 20 blu.

171
00:12:43,480 --> 00:12:49,490
E poi 0. 5 Alpha che è il canale di opacità o trasparenza.

172
00:12:49,620 --> 00:12:54,490
E se premiamo Invio, puoi vedere che tutti quelli sono applicati contemporaneamente.

173
00:12:54,630 --> 00:12:58,110
Quindi la nostra dimensione del carattere si restringe. Abbiamo 10 pixel.

174
00:12:58,260 --> 00:13:05,910
Abbiamo questi splendidi bordi attorno agli alleati che sono tre pixel viola tratteggiati e quindi abbiamo il colore di

175
00:13:05,910 --> 00:13:11,620
sfondo che è ciò che questo colore si è rivelato essere una sorta di

176
00:13:11,620 --> 00:13:13,060
colore marrone chiaro.

177
00:13:13,090 --> 00:13:13,360
Tutto ok.

178
00:13:13,360 --> 00:13:18,330
Quindi, si spera, puoi vedere da quella rapida dimostrazione solo due cose diverse che stiamo selezionando

179
00:13:18,340 --> 00:13:22,070
con il simbolo del dollaro e che da solo è incredibilmente potente.

180
00:13:22,090 --> 00:13:26,390
Funziona fondamentalmente come Slichter di queery e selettore di queery tutto combinato.

181
00:13:26,640 --> 00:13:29,620
Ed è una sintassi molto più breve e più facile da scrivere.

182
00:13:29,910 --> 00:13:36,270
E poi c'è il metodo CSSA che è anche estremamente potente perché possiamo modificare singole proprietà come abbiamo

183
00:13:36,270 --> 00:13:42,300
fatto qui, ma possiamo anche massasare le proprietà CSSA come abbiamo fatto proprio qui dove passiamo in

184
00:13:42,310 --> 00:13:45,040
un oggetto pieno di coppie di valori chiave.

185
00:13:45,100 --> 00:13:51,270
Probabilmente la parte più importante di tutto questo è che quando seleziono una raccolta come tutti gli alleati

186
00:13:51,280 --> 00:13:57,550
come ho fatto proprio qui, non devo eseguire manualmente il looping e applicare qualcosa individualmente come ho fatto

187
00:13:57,550 --> 00:14:03,830
quassù dove dovevamo scorrere tutto il alleati e cambiare il colore uno alla volta con la query J.

188
00:14:03,930 --> 00:14:10,710
Se ho una collezione di elementi, essa scorre automaticamente su di essa e applica

189
00:14:10,710 --> 00:14:12,990
Dotsie a ciascuna di esse.

190
00:14:12,990 --> 00:14:14,600
Quindi è estremamente potente.

191
00:14:14,770 --> 00:14:19,770
Ed è per questo che una nota a margine è per questo che restituisce sempre un array qui.

192
00:14:19,890 --> 00:14:25,260
adorabile, lo ritorna sempre nell'elenco perché tutta la logica dietro le quinte coinvolge l'elenco.

193
00:14:25,270 --> 00:14:28,370
Anche se ho solo un elemento con l'ID

194
00:14:28,470 --> 00:14:31,860
Quindi andrà in loop su questo e succede solo che c'è un elemento qui.

195
00:14:31,890 --> 00:14:33,030
Quindi non fa davvero un loop.

196
00:14:33,040 --> 00:14:34,540
Va solo una volta.

197
00:14:34,890 --> 00:14:38,070
Bene, mi auguro si sia divertito e sto iniziando a vedere il potere di Equerry