1
00:00:00,270 --> 00:00:05,870
Alguns videos atrás, eu apresentei esse conceito de selecionar elementos e depois manipulá-los.

2
00:00:06,120 --> 00:00:13,050
Então, selecionamos um H1 ou todas as tags de imagem e então podemos mudar a cor ou animá-las ou fazê-las fazer

3
00:00:13,050 --> 00:00:14,660
algo quando você clica nelas.

4
00:00:14,670 --> 00:00:18,360
Até agora, nós só cobrimos a metade de seleção e esse vídeo.

5
00:00:18,360 --> 00:00:24,090
Vamos apresentar algumas das várias maneiras de manipular elementos uma vez que os selecionamos.

6
00:00:24,120 --> 00:00:26,760
Então, aqui estão as quatro coisas principais das quais eu quero falar.

7
00:00:26,970 --> 00:00:29,320
O primeiro é como mudamos um estilo de elemento.

8
00:00:29,340 --> 00:00:32,050
Como torná-lo azul ou fazê-lo esconder.

9
00:00:32,070 --> 00:00:34,070
Altere o tamanho da fonte.

10
00:00:34,080 --> 00:00:40,320
Em seguida, falaremos sobre adicionar e remover classes com javascript e, em seguida, alterar o conteúdo de

11
00:00:40,320 --> 00:00:40,920
uma etiqueta.

12
00:00:41,010 --> 00:00:44,490
Então, como eu altero o texto dentro de uma marca H-1, por exemplo.

13
00:00:44,490 --> 00:00:46,590
E, finalmente, alterar os atributos.

14
00:00:46,590 --> 00:00:52,040
Então, como mudamos a fonte em uma marca de imagem ou a referência em uma etiqueta AA.

15
00:00:52,230 --> 00:00:55,260
Vamos começar a falar sobre a propriedade de estilo.

16
00:00:55,260 --> 00:01:00,900
estilo é um objeto enorme, centenas de propriedades um para cada propriedade CSSA que poderíamos definir.

17
00:01:00,900 --> 00:01:07,560
Então, quando o DOM é construído e um nó individual é feito ou um objeto é feito para cada

18
00:01:07,830 --> 00:01:11,220
elemento, existe uma propriedade chamada estilo e a propriedade de

19
00:01:11,370 --> 00:01:15,460
Então, podemos escrever javascript que irá então estilo e elemento de forma diferente.

20
00:01:15,480 --> 00:01:23,580
Então, aqui, eu estou selecionando um elemento por seu ressalto Id, então selecione-o, salve-o em uma variável chamada tag

21
00:01:23,580 --> 00:01:24,730
e depois manipule-a.

22
00:01:24,750 --> 00:01:26,370
E o que estou fazendo está configurando.

23
00:01:26,370 --> 00:01:34,190
Tag ponto estilo ponto cor para ser azul tag ponto estilo ponto fronteira é igual a 10 pixels sólido vermelho.

24
00:01:34,200 --> 00:01:37,830
É importante notar que o lado direito deve ser uma string.

25
00:01:38,280 --> 00:01:43,430
Então, embora em C Ss não precisamos colocar citações em torno de azul ou em torno de 70 P x.

26
00:01:43,440 --> 00:01:44,730
Isso não é C Ss.

27
00:01:44,730 --> 00:01:45,720
Isso é javascript.

28
00:01:45,720 --> 00:01:48,820
Portanto, ainda temos que seguir as regras regulares de javascript.

29
00:01:49,080 --> 00:01:53,550
Então eu tenho uma página web simples configurada que eu vou usar para demonstrar algumas dessas propriedades.

30
00:01:54,240 --> 00:02:00,190
Então, esta página da web é super simples apenas um H-1 um parágrafo em vez desse parágrafo.

31
00:02:00,200 --> 00:02:05,310
Há uma marca forte e, em seguida, duas imagens de duas mixagens corgi adoráveis.

32
00:02:05,640 --> 00:02:11,100
Cônsul e eu preciso começar selecionando algo e eu vou mudar a cor e a borda deste H-1.

33
00:02:11,100 --> 00:02:13,770
Então, o que eu vou fazer é ir ao

34
00:02:13,770 --> 00:02:19,470
Então eu preciso selecioná-lo e há várias maneiras de fazer isso em um novo documento

35
00:02:20,650 --> 00:02:22,800
que consulta o seletor H-1.

36
00:02:25,320 --> 00:02:33,030
E então vou mostrar-lhe o estilo H-1, que é um objeto gigante toneladas e toneladas de propriedades.

37
00:02:33,600 --> 00:02:41,680
Então eu vou tentar mudar um deles como a cor escura do estilo H-1 e torná-lo amarelo.

38
00:02:42,520 --> 00:02:45,560
E você pode vê-lo imediatamente mudado para amarelo.

39
00:02:45,570 --> 00:02:54,300
A mesma coisa com a borda H-1 que o estilo que a borda é igual, vamos fazer cinco pixels de rosa sólido.

40
00:02:56,100 --> 00:02:56,950
E nós vamos lá.

41
00:02:57,210 --> 00:03:01,190
Então, é claro, se nós queríamos que isso fosse amarelo com uma borda rosa.

42
00:03:01,290 --> 00:03:04,910
A partir do momento em que a página carregada, não há motivo para usar o javascript para fazer isso.

43
00:03:04,920 --> 00:03:09,990
Nós simplesmente colocamos isso em nosso arquivo CSSA, usamos o javascript se quisermos que ele se torne amarelo e tenha

44
00:03:09,990 --> 00:03:15,210
uma borda cor-de-rosa quando o usuário estiver na página por cinco segundos ou se ele quisesse que acontecesse quando o usuário

45
00:03:15,210 --> 00:03:18,670
rolou para uma parte específica de A página ou o usuário clicaram em algo.

46
00:03:18,690 --> 00:03:23,450
Trata-se de tornar as coisas interativas e veremos como fazer isso em breve.

47
00:03:24,960 --> 00:03:29,310
de estilo é que, se você se encontrar manipulando um monte de arquivos em

48
00:03:29,310 --> 00:03:35,430
um elemento individual, como estou fazendo aqui e mudando cinco propriedades diferentes nesta marca, definitivamente há uma maneira melhor.

49
00:03:35,430 --> 00:03:38,150
Bem, a coisa legal sobre o uso da propriedade

50
00:03:38,460 --> 00:03:40,740
E há algumas razões pelas quais há uma maneira melhor.

51
00:03:40,740 --> 00:03:43,350
O primeiro é que este não é um código muito seco.

52
00:03:43,350 --> 00:03:46,740
Há muito estilo rotulado com estilo marcado repetido.

53
00:03:46,740 --> 00:03:50,670
Mais importante, porém, esse conceito é chamado de separação de preocupações.

54
00:03:50,820 --> 00:03:57,210
Portanto, a separação de preocupações é esse conceito de que nossos H M L R C S s não são javascript.

55
00:03:57,210 --> 00:04:00,840
Cada um é responsável por seu próprio domínio pequeno e não queremos isso.

56
00:04:00,840 --> 00:04:02,830
Nós não queremos muito cruzamento entre eles.

57
00:04:02,850 --> 00:04:08,190
Então, neste diagrama, você pode ver que há um pouco de cruzamento entre cada equipe com qual é

58
00:04:08,190 --> 00:04:12,930
a estrutura e javascript que é esse comportamento e, em seguida, ver avaliar é a apresentação.

59
00:04:12,930 --> 00:04:18,690
E há uma pequena sobreposição com H html javascript, mas lembre-se de que costumava ser antes de

60
00:04:18,690 --> 00:04:25,050
C Ss surgir, você precisava escrever seus estilos individualmente em cada elemento em que realmente usamos o atributo

61
00:04:25,050 --> 00:04:25,840
de estilo.

62
00:04:26,130 --> 00:04:32,310
Nesse caso, nossa apresentação o estilo foi realmente tecido na estrutura e com C Ss

63
00:04:32,310 --> 00:04:33,500
agora os separamos.

64
00:04:33,570 --> 00:04:38,710
Assim, o nosso HMO é uma estrutura pura e, em seguida, o nosso sucesso é um estilo puro.

65
00:04:38,880 --> 00:04:44,430
Então, o que o javascript se encaixa é que ele deve controlar o comportamento de uma página

66
00:04:44,460 --> 00:04:50,490
e às vezes isso significa mudar a aparência das coisas, e não apenas mudar as propriedades dentro do javascript,

67
00:04:50,490 --> 00:04:52,620
na verdade, fazer o estilo no javascript.

68
00:04:52,680 --> 00:04:57,530
O que podemos fazer é ativá-los e desligar dentro do arquivo CSSA.

69
00:04:57,570 --> 00:05:04,270
Portanto, um dos padrões que é muito comum é que definimos uma classe CSSA como um destaque e que a classe de

70
00:05:04,270 --> 00:05:08,380
destaque terá cinco ou seis ou, no entanto, muitas propriedades diferentes que estamos mudando.

71
00:05:08,380 --> 00:05:13,210
E, então, podemos selecionar um elemento com javascript e dar-lhe essa classe de destaque.

72
00:05:13,210 --> 00:05:18,930
Então, em Javascript com uma linha, podemos adicionar uma classe que mudará cinco propriedades diferentes.

73
00:05:19,150 --> 00:05:22,660
Vamos dar uma olhada em como isso seria implementado em Javascript.

74
00:05:22,690 --> 00:05:29,020
Então, ao invés de selecionar uma tag e, em seguida, alterar o estilo, mas a cor para ser azul e, em seguida,

75
00:05:29,020 --> 00:05:35,770
denominada borda para ser 10 pixels de vermelho sólido, o que poderíamos fazer é encontrar uma classe naquela classe poderia ser chamada qualquer coisa.

76
00:05:36,250 --> 00:05:41,940
Normalmente, você quer que seja um pouco significativo, então reflete o que a classe deveria fazer.

77
00:05:42,040 --> 00:05:45,040
É algo que está sendo destacado ou é uma resposta correta.

78
00:05:45,040 --> 00:05:49,840
Uma pontuação alta por qualquer motivo que você está aplicando a classe tentando apresentar um bom nome.

79
00:05:50,170 --> 00:05:56,320
Então, este não é um bom nome, mas algumas classes algumas classes estão mudando a cor para ser azul e com

80
00:05:56,320 --> 00:05:57,820
10 pixels de vermelho sólido.

81
00:05:57,820 --> 00:06:06,280
Então, tudo o que tenho a fazer é selecionar minha tag e, em seguida, marcar ponto da lista de pontos da classe adicionar alguma classe

82
00:06:06,310 --> 00:06:12,730
e isso dará a minha tag com a ideia de destacar uma nova classe chamada alguma classe em todos

83
00:06:12,730 --> 00:06:13,790
esses estilos será aplicada.

84
00:06:13,810 --> 00:06:16,030
Há algumas outras coisas que podemos fazer com a lista de aulas.

85
00:06:16,270 --> 00:06:22,990
Então, neste exemplo, mostro três métodos que já vimos, que é como podemos adicionar uma classe de remoção, que leva um

86
00:06:23,020 --> 00:06:29,200
nome de classe e ele remove esse nome de classe da lista de classes e, em seguida, a lista de

87
00:06:29,230 --> 00:06:30,760
classe que é extremamente útil.

88
00:06:30,760 --> 00:06:31,960
É preciso um nome de classe.

89
00:06:32,080 --> 00:06:37,570
E se o elemento dado já tiver essa classe, ele o removerá se o elemento não tiver essa

90
00:06:37,570 --> 00:06:39,270
classe, então eu vou ativá-lo.

91
00:06:39,280 --> 00:06:40,550
Então, muito muito útil.

92
00:06:40,630 --> 00:06:42,180
Vamos usar isso o tempo todo mais tarde.

93
00:06:42,400 --> 00:06:46,990
Então, deixe-me demonstrar isso para você antes de voltar para o meu exemplo aqui.

94
00:06:46,990 --> 00:06:49,300
Na verdade, vou definir uma nova classe.

95
00:06:49,690 --> 00:06:58,630
Então, ao invés de fazer uma nova folha de estilo e usar um link, eu apenas vou usar uma etiqueta de estilo apenas por causa

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

97
00:07:00,530 --> 00:07:04,140
Então eu vou definir uma classe que você vai chamar de grande.

98
00:07:04,990 --> 00:07:14,320
E o que eu vou fazer é mudar o tamanho da fonte para 100 pixels e mudar a cor para ser laranja.

99
00:07:15,010 --> 00:07:22,540
E, finalmente, vamos dar uma borda de cinco pixels de vermelho sólido.

100
00:07:22,960 --> 00:07:24,280
Então vou deixar isso.

101
00:07:24,370 --> 00:07:30,700
Se eu atualizar minha página nada muda, é claro, mas quando eu quero fazer é aplicar essa classe a algo.

102
00:07:30,950 --> 00:07:37,120
Então, vou fazer com que este parágrafo tenha a grande classe para fazer isso, eu preciso selecioná-lo até agora.

103
00:07:37,120 --> 00:07:44,900
Parágrafo igual ao documento que consulta o seletor do parágrafo.

104
00:07:47,180 --> 00:07:47,820
ESTÁ BEM.

105
00:07:48,010 --> 00:07:53,130
E vamos começar por dar uma olhada na lista de aulas e você pode ver que está vazio.

106
00:07:53,140 --> 00:07:55,970
Ainda não existem classes atribuídas a este parágrafo.

107
00:07:56,140 --> 00:08:04,090
Então, se eu quiser atribuir um tudo o que eu preciso fazer é dizer que a P-Dub classe lista ponto adicionar e eu quero adicionar

108
00:08:04,180 --> 00:08:05,310
a classe grande.

109
00:08:06,190 --> 00:08:07,240
E nós vamos lá.

110
00:08:07,720 --> 00:08:11,370
Então ele reflete automaticamente as novas mudanças na minha folha de estilo.

111
00:08:11,440 --> 00:08:13,540
Tudo o que eu tinha que fazer era adicionar a grande classe.

112
00:08:13,780 --> 00:08:18,880
Então, espero que você veja que isso é muito mais fácil e que estamos separando as responsabilidades.

113
00:08:18,880 --> 00:08:24,940
Então, tudo o que é javascript faz é ligar ou desligar uma parte específica do SS em

114
00:08:24,940 --> 00:08:27,610
vez de realmente manipular manualmente as propriedades individuais.

115
00:08:27,610 --> 00:08:32,120
Agora, estamos mudando as coisas o mínimo possível em vez do nosso Javascript.

116
00:08:32,470 --> 00:08:42,430
Então, se eu quiser remover tudo o que eu preciso fazer é fazer classe sem classe, não remover grande e meu favorito

117
00:08:42,610 --> 00:08:45,940
que eu mencionei é super útil é alternar.

118
00:08:45,940 --> 00:08:52,170
Então, se eu acertar toggle agora e pressione enter, não há nenhuma classe atribuída para que ele atribua a

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

120
00:08:53,320 --> 00:08:56,420
Agora grande já foi atribuído para que ele o remova.

121
00:08:56,440 --> 00:09:04,030
Então, isso é útil, obviamente, não neste caso, para tornar essa laranja louca em uma classe de fonte enorme, mas o que podemos fazer

122
00:09:04,030 --> 00:09:09,610
é algo como uma lista de tarefas se quisermos que o usuário possa clicar nela para fazer.

123
00:09:09,880 --> 00:09:11,440
E isso vai acabar com isso.

124
00:09:11,650 --> 00:09:15,400
Mas eles podem clicar de novo e, em seguida, serão desacelerados ou simplesmente voltarão ao normal.

125
00:09:15,430 --> 00:09:16,400
Isso seria feito.

126
00:09:16,410 --> 00:09:23,080
Ou nós poderíamos fazê-lo alternando uma aula para que possamos ter uma classe chamada concluída e eu clicar clic

127
00:09:23,080 --> 00:09:23,700
aplicado novamente.

128
00:09:23,800 --> 00:09:24,820
É removido.

129
00:09:24,820 --> 00:09:27,000
Esse é apenas um exemplo de quando você pode usar alternar.

130
00:09:27,100 --> 00:09:29,740
Mas é realmente muito útil.

131
00:09:29,740 --> 00:09:34,090
O último ponto que vou abordar sobre a lista de aulas é que, tecnicamente, não é uma matriz.

132
00:09:34,090 --> 00:09:37,840
Então, isso significa que temos que usar um anúncio para adicionar uma classe.

133
00:09:37,870 --> 00:09:39,900
Não podemos fazer algo como empurrar.

134
00:09:40,150 --> 00:09:44,000
Então, apenas uma nota menor, mas é importante saber que não é tecnicamente uma matriz.

135
00:09:44,470 --> 00:09:48,260
Então, abordamos duas formas diferentes de manipular o estilo através do nosso javascript.

136
00:09:48,280 --> 00:09:53,980
uma propriedade de cada vez, o que é honestamente bom se você está apenas fazendo uma ou duas coisas.

137
00:09:53,980 --> 00:09:55,340
O primeiro está fazendo manualmente

138
00:09:55,690 --> 00:10:01,150
Mas se você está fazendo isso em um lote ou está fazendo isso em vários elementos, é muito melhor o

139
00:10:01,180 --> 00:10:04,930
estilo mais convencional para usar uma classe e simplesmente ativar ou desativar a classe