1
00:00:00,270 --> 00:00:05,870
Alcuni video fa ho introdotto questo concetto di selezione degli elementi e quindi di manipolarli.

2
00:00:06,120 --> 00:00:13,050
Quindi selezioniamo un H1 o tutti i tag immagine e quindi possiamo cambiare il colore o animarli o farli fare qualcosa quando

3
00:00:13,050 --> 00:00:14,660
fai clic su di essi.

4
00:00:14,670 --> 00:00:18,360
Finora abbiamo coperto solo la metà di selezione e questo video.

5
00:00:18,360 --> 00:00:24,090
Introdurremo alcuni dei molti modi per manipolare gli elementi una volta che li abbiamo selezionati.

6
00:00:24,120 --> 00:00:26,760
Quindi ecco le quattro cose principali di cui voglio parlare.

7
00:00:26,970 --> 00:00:29,320
Il primo è come si modifica uno stile di elemento.

8
00:00:29,340 --> 00:00:32,050
Come possiamo renderlo blu o farlo nascondere.

9
00:00:32,070 --> 00:00:34,070
Cambia la dimensione del carattere.

10
00:00:34,080 --> 00:00:40,320
Di seguito parleremo di aggiungere e rimuovere classi con javascript e quindi modificare il contenuto di

11
00:00:40,320 --> 00:00:40,920
un tag.

12
00:00:41,010 --> 00:00:44,490
Quindi, come posso cambiare il testo all'interno di un tag H-1, per esempio.

13
00:00:44,490 --> 00:00:46,590
E infine cambiare gli attributi.

14
00:00:46,590 --> 00:00:52,040
Quindi, come possiamo cambiare la fonte su un tag immagine o il ref su un tag AA.

15
00:00:52,230 --> 00:00:55,260
Cominceremo parlando della proprietà dello stile.

16
00:00:55,260 --> 00:01:00,900
è un oggetto enorme centinaia di proprietà una per ogni singola proprietà CSSA che potremmo impostare.

17
00:01:00,900 --> 00:01:07,560
Quindi, quando il DOM viene costruito e viene creato un singolo nodo o viene creato un oggetto per ogni singolo

18
00:01:07,830 --> 00:01:11,220
elemento, esiste una proprietà chiamata style e la proprietà style

19
00:01:11,370 --> 00:01:15,460
Quindi possiamo scrivere javascript che poi passerà allo stile e agli elementi in modo diverso.

20
00:01:15,480 --> 00:01:23,580
Quindi qui sto selezionando un elemento con la sua evidenziazione Id, quindi selezionalo e salvalo in una variabile chiamata tag

21
00:01:23,580 --> 00:01:24,730
e quindi manipolandola.

22
00:01:24,750 --> 00:01:26,370
E quello che sto facendo è ambientarmi.

23
00:01:26,370 --> 00:01:34,190
Il colore del punto di stile del punto di tag è il bordo del punto di stile del punto blu tag uguale a 10 pixel di colore rosso fisso.

24
00:01:34,200 --> 00:01:37,830
È importante notare che il lato destro deve essere una stringa.

25
00:01:38,280 --> 00:01:43,430
Quindi, anche se in C Ss non abbiamo bisogno di mettere virgolette intorno al blu o intorno a 70 P x.

26
00:01:43,440 --> 00:01:44,730
Questo non è C Ss.

27
00:01:44,730 --> 00:01:45,720
Questo è javascript.

28
00:01:45,720 --> 00:01:48,820
Quindi dobbiamo ancora seguire le normali regole javascript.

29
00:01:49,080 --> 00:01:53,550
Così ho una semplice pagina web che ho intenzione di usare per dimostrare alcune di queste proprietà.

30
00:01:54,240 --> 00:02:00,190
Quindi questa pagina web è super semplice solo un H-1 un paragrafo invece di quel paragrafo.

31
00:02:00,200 --> 00:02:05,310
C'è un tag forte e poi due immagini di due adorabili mix di corgi.

32
00:02:05,640 --> 00:02:11,100
e devo iniziare selezionando qualcosa e cambierò il colore e il bordo di questo H-1.

33
00:02:11,100 --> 00:02:13,770
Quindi quello che farò è andare al Console

34
00:02:13,770 --> 00:02:19,470
Quindi ho bisogno di selezionarlo e ci sono diversi modi per farlo in un nuovo

35
00:02:20,650 --> 00:02:22,800
documento che interroga il selettore H-1.

36
00:02:25,320 --> 00:02:33,030
E poi ti mostrerò lo stile H-1 che è un oggetto gigante, tonnellate e tonnellate di proprietà.

37
00:02:33,600 --> 00:02:41,680
Quindi proverò a cambiare uno di loro come il colore scuro in stile H-1 e renderlo giallo.

38
00:02:42,520 --> 00:02:45,560
E potresti vederlo immediatamente cambiato in giallo.

39
00:02:45,570 --> 00:02:54,300
Stessa cosa con il bordo H-1 che lo stile di quel bordo equivale a fare cinque pixel in tinta unita.

40
00:02:56,100 --> 00:02:56,950
E noi andiamo.

41
00:02:57,210 --> 00:03:01,190
Quindi, ovviamente, se volessimo che fosse giallo con un bordo rosa.

42
00:03:01,290 --> 00:03:04,910
Dal momento in cui la pagina è stata caricata non c'è motivo di usare javascript per farlo.

43
00:03:04,920 --> 00:03:09,990
Lo inseriamo nel nostro file CSSA, useremmo javascript se volessimo che fosse giallo e con un bordo rosa

44
00:03:09,990 --> 00:03:15,210
quando l'utente è rimasto sulla pagina per cinque secondi o se voleva che succedesse quando l'utente scorresse verso una

45
00:03:15,210 --> 00:03:18,670
parte specifica di la pagina o l'utente ha fatto clic su qualcosa.

46
00:03:18,690 --> 00:03:23,450
Si tratta di rendere le cose interattive e vedremo come farlo a breve.

47
00:03:24,960 --> 00:03:29,310
è che se ti ritrovi a manipolare un gruppo di file su un

48
00:03:29,310 --> 00:03:35,430
singolo elemento come sto facendo qui e cambiando cinque diverse proprietà su questo tag c'è sicuramente un modo migliore.

49
00:03:35,430 --> 00:03:38,150
Beh, la cosa bella dell'utilizzo della proprietà style

50
00:03:38,460 --> 00:03:40,740
E ci sono alcuni motivi per cui esiste un modo migliore.

51
00:03:40,740 --> 00:03:43,350
Il primo è che questo non è un codice molto asciutto.

52
00:03:43,350 --> 00:03:46,740
C'è un sacco di stile taggato stile tagged ripetuto.

53
00:03:46,740 --> 00:03:50,670
Ancora più importante anche se c'è questo concetto chiamato la separazione delle preoccupazioni.

54
00:03:50,820 --> 00:03:57,210
Quindi la separazione delle preoccupazioni è questo concetto che il nostro H M L R C S non è javascript.

55
00:03:57,210 --> 00:04:00,840
Ciascuno è responsabile del proprio piccolo dominio e noi non lo vogliamo.

56
00:04:00,840 --> 00:04:02,830
Non vogliamo un sacco di crossover tra di loro.

57
00:04:02,850 --> 00:04:08,190
Quindi in questo diagramma puoi vedere che c'è un po 'di crossover tra ogni squadra con la quale

58
00:04:08,190 --> 00:04:12,930
è la struttura e javascript che è quel comportamento e quindi vedere valutare è la presentazione.

59
00:04:12,930 --> 00:04:18,690
E c'è un po 'di sovrapposizione con H html javascript ma ricorda che prima c'era

60
00:04:18,690 --> 00:04:25,050
C Ss, dovevi scrivere i tuoi stili individualmente in ogni singolo elemento in cui effettivamente utilizziamo

61
00:04:25,050 --> 00:04:25,840
l'attributo style.

62
00:04:26,130 --> 00:04:32,310
In quel caso la nostra presentazione è stata effettivamente intessuta nella struttura e con C Ss ora

63
00:04:32,310 --> 00:04:33,500
li abbiamo separati.

64
00:04:33,570 --> 00:04:38,710
Quindi il nostro HMO è pura struttura e quindi il nostro successo è puro stile.

65
00:04:38,880 --> 00:04:44,430
Quindi, quello che javascript si adatta è che dovrebbe controllare il comportamento di una pagina e, a volte,

66
00:04:44,460 --> 00:04:50,490
ciò significa cambiare il modo in cui le cose appaiono, piuttosto che cambiare semplicemente le proprietà all'interno del javascript

67
00:04:50,490 --> 00:04:52,620
che effettivamente fa lo styling in javascript.

68
00:04:52,680 --> 00:04:57,530
Quello che possiamo fare è accenderli e spegnerli all'interno del file CSSA.

69
00:04:57,570 --> 00:05:04,270
Quindi uno dei pattern che è molto comune è che definiamo una classe CSSA come highlight e che la classe

70
00:05:04,270 --> 00:05:08,380
highlight avrà cinque o sei o comunque molte proprietà differenti che stiamo cambiando.

71
00:05:08,380 --> 00:05:13,210
E quindi possiamo selezionare un elemento con javascript e dargli quella classe highlight.

72
00:05:13,210 --> 00:05:18,930
Quindi in Javascript con una riga possiamo aggiungere una classe che cambierà cinque proprietà differenti.

73
00:05:19,150 --> 00:05:22,660
Diamo un'occhiata a come questo sarebbe stato implementato in Javascript.

74
00:05:22,690 --> 00:05:29,020
Quindi, piuttosto che selezionare un tag e quindi cambiare lo stile, ma il colore deve essere blu e poi il bordo stilizzato

75
00:05:29,020 --> 00:05:35,770
deve essere 10 pixel rosso fisso, quello che potremmo fare è trovare una classe in quella classe che possa essere chiamata qualsiasi cosa.

76
00:05:36,250 --> 00:05:41,940
Di solito vuoi che sia alquanto significativo per riflettere ciò che la classe dovrebbe fare.

77
00:05:42,040 --> 00:05:45,040
È qualcosa che viene evidenziato o è una risposta corretta.

78
00:05:45,040 --> 00:05:49,840
Un punteggio elevato per qualunque ragione tu stia applicando la lezione cercando di trovare un buon nome.

79
00:05:50,170 --> 00:05:56,320
Quindi questo non è un buon nome, ma in alcune classi alcune classi stanno cambiando il colore in blu

80
00:05:56,320 --> 00:05:57,820
e 10 pixel in rosso.

81
00:05:57,820 --> 00:06:06,280
Quindi tutto ciò che devo fare è selezionare il mio tag e quindi tagare dot class list dot aggiungere qualche classe e

82
00:06:06,310 --> 00:06:12,730
questo darà al mio tag l'idea di evidenziare una nuova classe chiamata qualche classe in tutti questi

83
00:06:12,730 --> 00:06:13,790
stili verranno applicati.

84
00:06:13,810 --> 00:06:16,030
Ci sono alcune altre cose che possiamo fare con l'elenco delle classi.

85
00:06:16,270 --> 00:06:22,990
Quindi in questo esempio mostrerò tre metodi che abbiamo già visto e che è come aggiungere una classe remove che

86
00:06:23,020 --> 00:06:29,200
prende un nome di classe e rimuove il nome di classe dall'elenco classe e quindi l'elenco di classi

87
00:06:29,230 --> 00:06:30,760
che è estremamente utile.

88
00:06:30,760 --> 00:06:31,960
Prende un nome di classe.

89
00:06:32,080 --> 00:06:37,570
E se l'elemento dato ha già quella classe, lo rimuoverà se l'elemento non ha quella

90
00:06:37,570 --> 00:06:39,270
classe, quindi lo accenderò.

91
00:06:39,280 --> 00:06:40,550
Quindi molto molto utile.

92
00:06:40,630 --> 00:06:42,180
Lo useremo tutto il tempo più tardi.

93
00:06:42,400 --> 00:06:46,990
Lascia che te lo dimostri prima di tornare al mio esempio qui.

94
00:06:46,990 --> 00:06:49,300
In realtà sto per definire una nuova classe.

95
00:06:49,690 --> 00:06:58,630
Quindi, piuttosto che creare un nuovo foglio di stile e utilizzare un collegamento, userò semplicemente un tag di stile solo per

96
00:06:59,500 --> 00:07:00,390
il tempo.

97
00:07:00,530 --> 00:07:04,140
Quindi definirò una classe che la chiamerai grande.

98
00:07:04,990 --> 00:07:14,320
E quello che ho intenzione di fare è cambiare la dimensione del font in 100 pixel e cambiare il colore in arancione.

99
00:07:15,010 --> 00:07:22,540
E infine diamo un bordo rosso scuro a cinque pixel.

100
00:07:22,960 --> 00:07:24,280
Quindi lo lascerò a quello.

101
00:07:24,370 --> 00:07:30,700
Se aggiorno la mia pagina non cambia nulla, ma quando voglio applicare questa classe a qualcosa.

102
00:07:30,950 --> 00:07:37,120
Quindi ho intenzione di fare in modo che questo paragrafo abbia la grande classe per farlo che ho bisogno di selezionarlo finora.

103
00:07:37,120 --> 00:07:44,900
Il paragrafo equivale a documentare il paragrafo relativo al selettore di query.

104
00:07:47,180 --> 00:07:47,820
OK.

105
00:07:48,010 --> 00:07:53,130
Cominciamo dando un'occhiata all'elenco delle classi e puoi vedere che è vuoto.

106
00:07:53,140 --> 00:07:55,970
Non ci sono ancora classi assegnate a questo paragrafo.

107
00:07:56,140 --> 00:08:04,090
Quindi, se voglio assegnarne uno, tutto quello che devo fare è aggiungere l'elenco delle classi P-Dub e aggiungere

108
00:08:04,180 --> 00:08:05,310
la classe big.

109
00:08:06,190 --> 00:08:07,240
E noi andiamo.

110
00:08:07,720 --> 00:08:11,370
Quindi riflette automaticamente le nuove modifiche dal mio foglio di stile.

111
00:08:11,440 --> 00:08:13,540
Tutto quello che dovevo fare è aggiungere la grande classe.

112
00:08:13,780 --> 00:08:18,880
Quindi spero che tu possa vedere che questo è molto più facile e che stiamo separando le responsabilità.

113
00:08:18,880 --> 00:08:24,940
Quindi tutto ciò che fa javascript è di attivare o disattivare una parte specifica delle SS

114
00:08:24,940 --> 00:08:27,610
piuttosto che manipolare manualmente le singole proprietà.

115
00:08:27,610 --> 00:08:32,120
Ora stiamo semplicemente cambiando le cose il meno possibile invece del nostro Javascript.

116
00:08:32,470 --> 00:08:42,430
Quindi, se voglio rimuoverlo tutto ciò che devo fare è fare in classe classless non rimuovere big e il mio preferito che

117
00:08:42,610 --> 00:08:45,940
ho menzionato è super utile è toggle.

118
00:08:45,940 --> 00:08:52,170
Quindi se premo toggle in questo momento e premi invio non c'è una classe assegnata, quindi la assegnerà

119
00:08:52,180 --> 00:08:52,940
alla classe.

120
00:08:53,320 --> 00:08:56,420
Ora il grande è già assegnato, quindi lo rimuoverà.

121
00:08:56,440 --> 00:09:04,030
Quindi questo è utile ovviamente non in questo caso per rendere questo pazzo arancione nella classe di font enormi, ma quello che potremmo fare è qualcosa di simile a

122
00:09:04,030 --> 00:09:09,610
una lista di cose da fare se vogliamo che l'utente sia in grado di fare clic su di esso per farlo.

123
00:09:09,880 --> 00:09:11,440
E questo lo cancellerà.

124
00:09:11,650 --> 00:09:15,400
Ma possono fare nuovamente clic e poi si annulleranno o torneranno alla normalità.

125
00:09:15,430 --> 00:09:16,400
Sarebbe fatto.

126
00:09:16,410 --> 00:09:23,080
Oppure potremmo farlo attivando una classe in modo da avere una classe chiamata done e faccio di nuovo clic

127
00:09:23,080 --> 00:09:23,700
su applicato.

128
00:09:23,800 --> 00:09:24,820
È rimosso.

129
00:09:24,820 --> 00:09:27,000
Questo è solo un esempio di quando potresti usare l'interruttore.

130
00:09:27,100 --> 00:09:29,740
Ma è davvero molto utile.

131
00:09:29,740 --> 00:09:34,090
L'ultimo punto che tratterò sulla lista delle classi è che tecnicamente non è un array.

132
00:09:34,090 --> 00:09:37,840
Ciò significa che dobbiamo utilizzare un annuncio per aggiungere una classe.

133
00:09:37,870 --> 00:09:39,900
Non possiamo fare qualcosa come push.

134
00:09:40,150 --> 00:09:44,000
Quindi, solo una nota minore, ma è importante sapere che non è tecnicamente un array.

135
00:09:44,470 --> 00:09:48,260
Quindi abbiamo coperto due diversi modi di manipolare lo stile attraverso il nostro javascript.

136
00:09:48,280 --> 00:09:53,980
facendo manualmente una proprietà alla volta che è onestamente bene se stai facendo solo una o due cose.

137
00:09:53,980 --> 00:09:55,340
Il primo lo sta

138
00:09:55,690 --> 00:10:01,150
Ma se lo fai in un batch o lo fai su più elementi, è molto meglio lo stile

139
00:10:01,180 --> 00:10:04,930
più convenzionale per usare una classe e basta accendere o spegnere la classe