1
00:00:00,110 --> 00:00:00,530
Tudo bem.

2
00:00:00,530 --> 00:00:01,500
Bem vindo de volta.

3
00:00:01,500 --> 00:00:03,350
Então vamos começar a escrever um código.

4
00:00:03,480 --> 00:00:07,290
E a primeira coisa que vamos aprender a fazer é como selecionar elementos.

5
00:00:07,290 --> 00:00:13,190
Então, como com relação dominante regular ou fonologia, sim, precisamos selecionar coisas e depois manipular.

6
00:00:13,380 --> 00:00:17,880
Eu sei que sou um disco quebrado, mas é um processo realmente importante, selecione e depois mude

7
00:00:17,880 --> 00:00:18,300
as coisas.

8
00:00:18,300 --> 00:00:23,790
vídeo será focado principalmente na seleção de elementos com J Query para dois objetivos principais aqui.

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

10
00:00:24,390 --> 00:00:30,600
O primeiro é aprender a selecionar elementos com a função de sinal de dólar e depois usar

11
00:00:30,740 --> 00:00:33,500
o método C avaliado para elementos de estilo.

12
00:00:33,630 --> 00:00:38,160
Então, não estamos apenas obtendo coisas selecionadas apenas imprima-as, mas para torná-la mais visual. Nós

13
00:00:38,160 --> 00:00:44,010
as selecionamos e, em seguida, alteramos a cor de fundo e a consulta Jay, podemos selecionar tudo o que queremos

14
00:00:44,010 --> 00:00:45,210
usando apenas uma função.

15
00:00:45,570 --> 00:00:46,800
O sinal de dólar.

16
00:00:46,920 --> 00:00:52,860
Então, ao contrário do J. Vanilla S. todos obtêm elementos de um nome de classe, obtenha elementos por nome de etiqueta.

17
00:00:52,920 --> 00:00:55,650
onde temos o documento que obtem o elemento por meio do seletor de consulta do seletor de consulta id,

18
00:00:55,650 --> 00:01:00,660
Há tantas maneiras diferentes de selecionar o sinal de dólar e a consulta Jay irá substituí-los.

19
00:01:00,990 --> 00:01:07,230
Basicamente, funciona como seletor de consultas, na medida em que lhe damos um seletor de estilo C Ss.

20
00:01:07,320 --> 00:01:12,370
E então a consulta Jay retorna todos os elementos correspondentes que combinam com o seletor que lhe damos.

21
00:01:12,720 --> 00:01:18,360
Então, eu tenho um exemplo aqui se quisermos selecionar todas as tags da imagem na

22
00:01:18,360 --> 00:01:25,460
página, apenas parece assim se quisermos selecionar todos os elementos com a classe de escala que fazemos escala de pontos.

23
00:01:25,620 --> 00:01:28,380
Lembre-se que este é set set selectors.

24
00:01:28,380 --> 00:01:33,840
fazer algumas coisas mais avançadas, como essa, selecionando todas as tags de âncora que estão dentro dos elementos da lista.

25
00:01:33,840 --> 00:01:39,000
Então, para uma identificação, precisamos do arco para Thorpe para uma classe que precisa do ponto e também podemos

26
00:01:39,360 --> 00:01:41,900
Então, vou fazer uma demonstração rápida aqui de como isso funciona.

27
00:01:42,060 --> 00:01:47,750
Então, temos nossa demo de Jake Querrey envelheceu ele nossa página configurada onde eu incluo o Cdn.

28
00:01:48,300 --> 00:01:53,190
E não importa se usamos a palavra N ou se você quiser usar a cópia baixada, ela

29
00:01:53,190 --> 00:01:54,180
funcionará da mesma maneira.

30
00:01:54,180 --> 00:01:58,110
Então precisamos desse script aqui e então precisamos de algum conteúdo para jogar.

31
00:01:58,110 --> 00:02:00,410
Então eu vou manter o H-1 S. J. demonstração básica.

32
00:02:00,510 --> 00:02:05,970
Vou mudar esses aliados para torná-los um pouco mais únicos, então vou preenchê-lo com alguns dos meus animais favoritos.

33
00:02:06,480 --> 00:02:08,260
Então o fim é para Newt.

34
00:02:08,520 --> 00:02:14,100
A parte favorita do meu amor de cinco anos da música do alfabeto animal adicionará em outro dos

35
00:02:14,410 --> 00:02:15,510
meus álbuns favoritos Monkey.

36
00:02:15,870 --> 00:02:19,050
E, finalmente, o pinho martin.

37
00:02:19,680 --> 00:02:24,820
E se você nunca viu a marta do pinheiro eles são igualmente animais adoráveis ​​e aterrorizantes.

38
00:02:24,950 --> 00:02:27,190
Então você pode ver adorável aqui.

39
00:02:28,060 --> 00:02:32,690
Mas se você der uma olhada neles em ação eles são predadores loucos e bastante assustadores.

40
00:02:33,000 --> 00:02:33,270
ESTÁ BEM.

41
00:02:33,300 --> 00:02:38,770
Então, alguns dos meus animais favoritos na lista irão salvar e vamos abrir isso agora.

42
00:02:39,720 --> 00:02:41,150
Certifique-se de que estamos no diretório certo.

43
00:02:41,200 --> 00:02:47,730
Jay pediu uma demo que cada Chimo e o que vou fazer é deslocar isso para fora em sua própria janela e nós vamos entrar

44
00:02:47,730 --> 00:02:53,190
no console, tornando o tamanho da fonte um pouco maior e vamos usar uma consulta para selecionar algumas dessas coisas.

45
00:02:53,640 --> 00:02:56,100
Então lembre-se de um sinal de dólar é uma função.

46
00:02:56,520 --> 00:03:00,490
E se eu apenas digitar sinal de dólar por conta própria sem os parênteses.

47
00:03:00,720 --> 00:03:06,930
Isso é como eu, digitando alerta sem parênteses ou con. O log de pontos sem os parênteses realmente não

48
00:03:06,930 --> 00:03:08,700
faz nada exceto me diz.

49
00:03:08,940 --> 00:03:12,610
Sim, eu sei sobre esse código, mas na verdade ele não o executa.

50
00:03:13,170 --> 00:03:16,860
Vamos começar selecionando o único H-1 na página para fazer isso.

51
00:03:16,860 --> 00:03:24,550
Podemos usar o sinal de dólar e o seletor s para selecionar h é apenas H-1 e nós entramos em Enter.

52
00:03:24,600 --> 00:03:27,480
Você pode vê-lo retornar o demo H-1 da J queery.

53
00:03:27,630 --> 00:03:30,110
Então, note que está dentro de uma lista.

54
00:03:30,300 --> 00:03:36,480
Então, ao contrário do seletor de consulta, retorna a primeira instância para o seletor de sinal de dólar.

55
00:03:36,480 --> 00:03:42,360
O Query retornará uma lista, mesmo se houver apenas um item que realmente seja útil e veremos

56
00:03:42,360 --> 00:03:43,310
isso um pouco.

57
00:03:43,320 --> 00:03:51,570
Então, vamos tentar selecionar todos os aliados agora para que possamos fazer algo como Dollar Sign ally e nós

58
00:03:51,570 --> 00:03:53,150
recebemos três aliados assim.

59
00:03:53,490 --> 00:03:59,130
Nós também podemos selecionar o corpo digitando o corpo e tornar as coisas um pouco mais interessantes.

60
00:03:59,130 --> 00:04:08,550
Vamos voltar para nossa idade e-mail e adicionar um I. D. Para pino martin, vamos chamá-lo de adorável como o

61
00:04:08,550 --> 00:04:16,560
id e, em seguida, podemos também em nosso macaco howler vai adicionar um macaco howler tag e ele vai apenas para mac

62
00:04:16,620 --> 00:04:20,430
com ponto com e isso só será monkey dot com.

63
00:04:20,730 --> 00:04:28,640
E se atualizarmos se quiser selecionar esse link, eu usaria o sinal de dólar e eu poderia apenas fazer uma marca de âncora

64
00:04:29,130 --> 00:04:30,550
e isso me daria.

65
00:04:30,600 --> 00:04:34,740
Eu também poderia dizer tag de âncora dentro de um aliado.

66
00:04:34,980 --> 00:04:40,040
Eu também poderia se eu realmente quis dizer apenas as marcas de âncora dentro de aliados que são em vez de uma vontade.

67
00:04:41,100 --> 00:04:43,990
E em todos os casos até agora são idênticos.

68
00:04:44,160 --> 00:04:51,270
Mas se eu adicionar outra marca de âncora apenas na parte inferior da página Google dot com e eu atualizo.

69
00:04:51,810 --> 00:04:55,290
E agora eu faço minha marca de âncora de sinal de dólar.

70
00:04:55,290 --> 00:04:57,350
Recebo as duas marcas de âncora.

71
00:04:57,820 --> 00:05:05,370
Se eu fizer um sinal de dólar UL com um aliado com uma marca de âncora dentro disso, ele só me dá essa marca de

72
00:05:05,370 --> 00:05:05,820
âncora.

73
00:05:05,970 --> 00:05:13,660
Ou eles poderiam ter encurtado isso aqui e ali, vamos selecionar o item com a idéia de adorável, funciona como se quiser

74
00:05:13,950 --> 00:05:19,700
selecionar ou todo ou seletor de consulta ou C Ss para esse assunto onde eu preciso

75
00:05:19,770 --> 00:05:27,890
do símbolo Arctic ou hash Plus the O nome de identificação é adorável e isso me dá o aliado de marmim de pinheiro.

76
00:05:27,940 --> 00:05:32,250
Então, nós vimos como selecionamos e não é muito emocionante apenas imprimir coisas no console ou

77
00:05:32,250 --> 00:05:33,660
apenas para vê-las retornar aqui.

78
00:05:33,670 --> 00:05:38,530
visuais e a nos ajudar a alterar o estilo para que O método é chamado

79
00:05:38,520 --> 00:05:43,300
Dotsie SS e a maneira como ele funciona é que nós digitamos um sinal

80
00:05:43,300 --> 00:05:51,060
de dólar seletor e algum seletor e então podemos adicionar Dotsie SS no final e passá-lo em algumas propriedades e valores a mudar.

81
00:05:51,060 --> 00:05:57,580
Mas eu realmente quero fazer é introduzir um método, vamos ver muitos mais métodos nos próximos vídeos, mas vou mostrar

82
00:05:57,610 --> 00:06:00,440
um agora que nos ajudará a tornar as coisas

83
00:06:00,450 --> 00:06:07,150
Então, aqui está um exemplo, eu estou selecionando algo com a idéia de especial e então estou executando o CSSA nela

84
00:06:07,140 --> 00:06:11,220
e mudando a borda para ser de dois pixels de vermelho sólido.

85
00:06:11,500 --> 00:06:13,190
Então, deixe-me demonstrar isso.

86
00:06:13,300 --> 00:06:15,400
Vamos fazer o H-1.

87
00:06:15,390 --> 00:06:21,390
Então eu selecionei o sinal de dólar H-1 Dotsie SS Assim como este.

88
00:06:21,610 --> 00:06:30,380
E então, em vez de aqui, vamos mudar a cor para ser amarelo assim.

89
00:06:30,630 --> 00:06:31,480
E eu entrei no enter.

90
00:06:31,600 --> 00:06:34,980
E você pode ver que muda para amarelo, o que é incrível.

91
00:06:35,310 --> 00:06:39,420
Portanto, é sempre bom ter em mente como você faria isso sem j Querrey.

92
00:06:39,630 --> 00:06:49,270
Então, faria algo como documento que obtivesse e fazemos o seletor de consulta de documentos H-1 ponto e B não possuímos C

93
00:06:49,260 --> 00:06:54,840
Ss. Portanto, precisamos fazer pontos de estilo de ponto com cores iguais.

94
00:06:54,940 --> 00:06:56,700
E vamos mudar para laranja.

95
00:06:57,690 --> 00:06:58,400
E nós vamos lá.

96
00:06:58,440 --> 00:07:04,110
aqui é realmente muito mais poderosa e pode fazer muito mais do que podemos fazer com essa única linha aqui.

97
00:07:04,380 --> 00:07:06,300
Nós mudamos para laranja, mas esta linha

98
00:07:06,550 --> 00:07:11,490
Então, suponhamos que queria mudar vários estilos sobre este H-1, queria mudar a cor e

99
00:07:11,680 --> 00:07:14,100
a cor de fundo e a borda.

100
00:07:14,110 --> 00:07:19,240
O que posso fazer é definir meus estilos em um objeto e passar em um objeto.

101
00:07:19,480 --> 00:07:24,250
Então eu não tenho que apenas fazer um string Porter coma o valor para o Porter.

102
00:07:24,550 --> 00:07:29,920
Posso definir um objeto com várias propriedades múltiplos pares de valores de chave e passar isso

103
00:07:29,910 --> 00:07:31,070
e todos serão aplicados.

104
00:07:31,360 --> 00:07:32,500
Então vamos fazer isso agora.

105
00:07:32,760 --> 00:07:37,080
Vamos definir nossos estilos e não precisamos fazer um objeto separado.

106
00:07:37,120 --> 00:07:38,250
Eu vou te mostrar isso.

107
00:07:38,350 --> 00:07:50,220
E, em vez de aqui, dirá que a cor deve ser fundo vermelho deve ser cor-de-rosa e nós faremos

108
00:07:50,230 --> 00:07:56,340
a borda deve ser de dois pixels sólidos, roxos assim.

109
00:07:56,740 --> 00:08:02,460
E se atingimos Enter, agora temos o nosso objeto de estilos e novamente, que pode ser chamado de qualquer coisa.

110
00:08:02,740 --> 00:08:05,060
E então, o que faremos é selecionar o H-1.

111
00:08:05,310 --> 00:08:14,200
Então, o sinal de dólar H-1 novamente nos irrita e nós apenas passamos no nosso objeto de estilos e todos esses estilos

112
00:08:14,190 --> 00:08:14,950
são aplicados.

113
00:08:15,190 --> 00:08:19,720
Então, para fazer isso sem consulta j exigiria que fizéssemos três linhas separadas.

114
00:08:19,750 --> 00:08:26,830
Você precisaria fazer o documento que o consultor permitir que sua cor escura de estilo H-1 seja igual ao vermelho e, em seguida, o estilo de ponto

115
00:08:26,880 --> 00:08:32,400
do ponto de fundo é igual a rosa e, em seguida, esse estilo que é igual a dois pixel sólido roxo.

116
00:08:32,710 --> 00:08:35,580
Espero que você veja já isso com apenas algumas linhas.

117
00:08:35,640 --> 00:08:38,240
J Query já está provado ser bastante poderoso.

118
00:08:38,520 --> 00:08:44,020
E enquanto podemos fazer tudo sem isso, definitivamente nos está salvando algum tempo e tornando nosso código mais limpo.

119
00:08:44,710 --> 00:08:51,330
característica do método CSSA ponto que torna ainda mais útil que eu mostrei agora o que podemos fazer

120
00:08:51,340 --> 00:08:57,570
é realmente criar vários elementos ao mesmo tempo, em vez de selecionar o primeiro e torná-lo amarelo.

121
00:08:57,580 --> 00:08:58,160
Há outra

122
00:08:58,260 --> 00:09:03,290
Podemos selecionar todos ou todos os aliados e precisamos apenas de uma linha para fazer isso.

123
00:09:03,340 --> 00:09:04,110
Então vou mostrar-lhe isso.

124
00:09:04,110 --> 00:09:06,430
Agora vamos fazer todas as mentiras.

125
00:09:06,970 --> 00:09:09,580
Então, para fazer isso, preciso selecionar aliados.

126
00:09:09,730 --> 00:09:11,550
Então, assim.

127
00:09:11,550 --> 00:09:12,650
E se eu entrar em cena.

128
00:09:12,780 --> 00:09:19,120
ser azul assim e vou entrar e perceber isso A linha muda todos os três aliados.

129
00:09:19,120 --> 00:09:28,410
Você verá que isso me dá os três aliados e então eu preciso encadear em C Ss e eu vou apenas dar

130
00:09:28,410 --> 00:09:31,940
uma única cor de propriedade e mudá-la para

131
00:09:32,350 --> 00:09:34,610
Então definitivamente muito poderoso.

132
00:09:34,650 --> 00:09:41,990
Tudo o que fazemos é selecionar com o seletor de sinalização do seletor e isso nos dá três aliados e fazendo a

133
00:09:42,000 --> 00:09:46,030
Dotsie SS em uma matriz aqui da ALWIS, essa lista de aliados.

134
00:09:46,240 --> 00:09:51,310
Isso realmente os tornará todos azuis e nem sequer devemos fazer um loop manual, como nós,

135
00:09:51,340 --> 00:09:52,320
sem uma consulta.

136
00:09:52,360 --> 00:09:58,410
para lembrá-lo se eu quero mudar todos eles para serem verdes sem consulta, primeiro preciso selecioná-los.

137
00:09:58,480 --> 00:09:59,360
Então, apenas

138
00:09:59,500 --> 00:10:06,570
Portanto, var allies é igual ao documento que o seletor de consulta passa no aliado de cordas.

139
00:10:06,790 --> 00:10:08,390
E então eu preciso percorrer.

140
00:10:08,520 --> 00:10:15,350
Então, para var, eu igual a zero é menor do que Elvises ao longo do tempo eu plus plus.

141
00:10:16,260 --> 00:10:22,410
E, então, dentro do loop, precisamos fazer aliados em que estilo essa cor

142
00:10:25,170 --> 00:10:30,100
é igual e vamos fazer o verde assim e vamos entrar.

143
00:10:30,390 --> 00:10:32,850
E você pode ver que todos mudaram para verde.

144
00:10:32,860 --> 00:10:36,800
Então, novamente é possível sem uma consulta, mas é significativamente mais código.

145
00:10:36,900 --> 00:10:40,780
Nós precisamos selecioná-los primeiro e até mesmo selecioná-los é doloroso.

146
00:10:40,770 --> 00:10:43,820
Isso é muito mais longo do que apenas um sinal de dólar.

147
00:10:43,870 --> 00:10:49,060
E então também precisamos fazer um loop manualmente com um loop for ou um loop while

148
00:10:49,060 --> 00:10:53,450
e, em seguida, mudar cada um individualmente e depois terminamos com uma consulta.

149
00:10:53,560 --> 00:11:01,030
Tudo o que precisamos fazer para mudar de volta para o azul é selecionar todos os aliados Dotsie SS e depois passar em nossa

150
00:11:01,090 --> 00:11:02,900
propriedade, que é azul cor azul.

151
00:11:03,420 --> 00:11:05,260
Vou demonstrar mais alguns exemplos aqui.

152
00:11:05,430 --> 00:11:13,710
e fará seu tamanho de fonte maior, então tamanho da fonte e será 40 pixels e lá vamos.

153
00:11:13,710 --> 00:11:20,970
Vamos selecionar todas as tags de âncora, assim como essa, uma tag que C Ss

154
00:11:20,980 --> 00:11:27,460
Recebemos grandes links. Também mostrar que podemos definir um objeto cheio de estilos como fizemos anteriormente e podemos

155
00:11:27,450 --> 00:11:31,140
usar isso para modelar vários elementos e não apenas um.

156
00:11:31,240 --> 00:11:39,120
Então, selecionaremos todas as mentiras e as modelaremos em conjunto e, ao invés de simplesmente fazer as SS e passando

157
00:11:39,120 --> 00:11:44,890
em uma string como a cor, vamos dar-lhe um objeto e simplesmente defini-lo aqui.

158
00:11:45,550 --> 00:11:47,920
E vamos adicionar em algum espaço aqui para digitar.

159
00:11:48,420 --> 00:11:52,340
E a primeira coisa que faremos é mudar o tamanho da fonte de todos eles.

160
00:11:52,540 --> 00:12:00,300
o tamanho da fonte é fonte Dasch tamanho ou altura e tamanho em javascript e em consulta J, temos que usar caso de camelo.

161
00:12:00,310 --> 00:12:01,300
Então, NCSA como

162
00:12:01,480 --> 00:12:09,540
Então, tamanho da fonte sem espaço ou não há traço, mas nós, o membro da maiúscula, que é

163
00:12:09,820 --> 00:12:20,930
o caso Kimbal e os faremos 10, vamos fazer ainda 10 pixels e depois adicionaremos uma borda e esse será três pixel dasht roxo.

164
00:12:21,340 --> 00:12:23,610
Essas bordas tracejadas são sempre deslumbrantes.

165
00:12:23,980 --> 00:12:27,840
E, em seguida, adicione o fundo da cor de fundo.

166
00:12:28,140 --> 00:12:30,490
E vamos fazer a nossa própria R. G. cor.

167
00:12:30,660 --> 00:12:31,670
Então R. G. B.

168
00:12:31,710 --> 00:12:33,540
E faremos o nosso G. P. UMA. na realidade.

169
00:12:33,690 --> 00:12:36,640
E a primeira leitura também será feita.

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

171
00:12:43,480 --> 00:12:49,490
E então 0. 5 Alpha, que é o canal de opacidade ou transparência.

172
00:12:49,620 --> 00:12:54,490
E se nós entramos, você pode ver que todos esses são aplicados de uma só vez.

173
00:12:54,630 --> 00:12:58,110
Então, o tamanho da fonte diminui. Nós temos 10 pixels.

174
00:12:58,260 --> 00:13:05,910
Nós temos essas fronteiras deslumbrantes em torno dos aliados que são três pixels dobrados em roxo e, então, temos a cor

175
00:13:05,910 --> 00:13:11,620
de fundo que é o que quer que essa cor acabe por ser parecer uma espécie

176
00:13:11,620 --> 00:13:13,060
de cor acastanhada clara.

177
00:13:13,090 --> 00:13:13,360
Tudo bem.

178
00:13:13,360 --> 00:13:18,330
Então, espero que você possa ver a partir dessa demonstração rápida apenas duas coisas diferentes que estamos fazendo

179
00:13:18,340 --> 00:13:22,070
selecionando com sinal de dólar e que por conta própria é incrivelmente poderoso.

180
00:13:22,090 --> 00:13:26,390
Basicamente, funciona como sequer Slichter e diferentes seletores todos combinados.

181
00:13:26,640 --> 00:13:29,620
E é uma sintaxe muito mais curta e fácil de escrever.

182
00:13:29,910 --> 00:13:36,270
E, em seguida, há o método CSSA que também é extremamente poderoso porque podemos alterar as propriedades

183
00:13:36,270 --> 00:13:42,300
individuais, como fizemos aqui, mas também podemos colocar as propriedades do CSSA como fizemos aqui onde

184
00:13:42,310 --> 00:13:45,040
passamos um objeto cheio de pares de valores-chave.

185
00:13:45,100 --> 00:13:51,270
Provavelmente, a parte mais importante de tudo isso é que quando eu seleciono uma coleção como todos os aliados

186
00:13:51,280 --> 00:13:57,550
como fiz aqui mesmo, não tenho que seguir manualmente e aplicar algo de forma individual, como fiz aqui, onde

187
00:13:57,550 --> 00:14:03,830
devemos fazer um loop para todos os aliados e mude a cor um de cada vez com a consulta J.

188
00:14:03,930 --> 00:14:10,710
Se eu tiver uma coleção de elementos, ele percorre automaticamente isso e aplica

189
00:14:10,710 --> 00:14:12,990
Dotsie a cada um.

190
00:14:12,990 --> 00:14:14,600
Então, é extremamente poderoso.

191
00:14:14,770 --> 00:14:19,770
E é por isso que, como uma nota lateral, é por isso que sempre retorna uma matriz aqui.

192
00:14:19,890 --> 00:14:25,260
ele sempre o retorna na lista porque toda a lógica nos bastidores envolve o loop sobre essa lista.

193
00:14:25,270 --> 00:14:28,370
Mesmo que eu apenas tenha um elemento com o ID adorável,

194
00:14:28,470 --> 00:14:31,860
Então, isso irá superar isso e acontece que há um item aqui.

195
00:14:31,890 --> 00:14:33,030
Então, ele realmente não faz o loop.

196
00:14:33,040 --> 00:14:34,540
Isso sobe ao longo de uma vez.

197
00:14:34,890 --> 00:14:38,070
Tudo bem, espero que gostei disso e comece a ver o poder do equador