1
00:00:00,570 --> 00:00:01,430
Bem vindo de volta.

2
00:00:01,590 --> 00:00:06,000
Neste vídeo vamos pegar onde paramos e continuar falando sobre alguns desses

3
00:00:06,000 --> 00:00:11,220
métodos importantes que eu quero mostrar o próximo que vamos discutir é depois das oito.

4
00:00:11,370 --> 00:00:16,290
E é curto para o atributo, então eu vou para os documentos e só procurar atributos.

5
00:00:16,530 --> 00:00:19,550
Vai estar no topo aqui ETR.

6
00:00:19,680 --> 00:00:20,500
Aqui vamos nós.

7
00:00:20,730 --> 00:00:24,930
E o que usamos é para recuperar o valor de um atributo.

8
00:00:25,230 --> 00:00:30,510
primeiro elemento em um conjunto de elementos correspondentes ou defina um ou mais atributos para cada elemento correspondente.

9
00:00:30,540 --> 00:00:34,680
Então, de acordo com os documentos, ele obtém o valor de um atributo para o

10
00:00:34,680 --> 00:00:39,170
Então podemos recuperar um atributo ou podemos definir um atributo.

11
00:00:39,210 --> 00:00:45,240
Espero que você esteja percebendo um padrão até agora, onde com esses métodos, podemos obter informações

12
00:00:45,360 --> 00:00:51,320
para recuperar um atributo ou recuperar o estilo ou recuperar o texto ou o enfurecer.

13
00:00:51,540 --> 00:00:55,610
E então também podemos configurá-los passando um argumento para o método.

14
00:00:55,620 --> 00:00:57,810
Portanto, um método se comporta de duas maneiras diferentes.

15
00:00:57,960 --> 00:01:02,970
E este paradigma é chamado de paradigma getter e setter onde temos um getter para recuperar

16
00:01:03,000 --> 00:01:05,600
informações e um setter para definir um novo valor.

17
00:01:06,060 --> 00:01:08,520
Vejamos alguns exemplos aqui.

18
00:01:08,520 --> 00:01:15,140
Os documentos do código G sempre têm excelentes exemplos e documentação e escrita de estilo tutorial.

19
00:01:15,150 --> 00:01:16,570
Então vamos dar uma olhada aqui.

20
00:01:16,710 --> 00:01:25,170
Temos uma imagem e tem um I. D. uma fonte e um texto alternativo para que possamos

21
00:01:25,170 --> 00:01:30,610
selecionar isso para que possamos selecionar a imagem com uma ótima foto ID grande foto ponto H.

22
00:01:31,050 --> 00:01:35,160
E passamos o que estamos tentando mudar, o que é Alt.

23
00:01:35,250 --> 00:01:42,990
E então podemos passá-lo em um novo valor e você também pode ver aqui, podemos usar o TTR para definir vários valores

24
00:01:42,990 --> 00:01:45,050
ao mesmo tempo ou vários atributos.

25
00:01:45,120 --> 00:01:51,580
Então podemos definir o texto e o atributo do título passando em um objeto, assim como o método CSSA.

26
00:01:51,880 --> 00:01:52,130
ESTÁ BEM.

27
00:01:52,140 --> 00:01:53,540
Então vamos brincar com isso.

28
00:01:53,820 --> 00:01:56,050
Aqui está a nossa página com a qual estamos trabalhando.

29
00:01:56,130 --> 00:01:59,770
Eu vou adicionar um pouco mais de cada equipe que vou contente.

30
00:01:59,790 --> 00:02:06,750
Então, no fundo, vou adicionar uma marca de imagem e a fonte será o meu pinheiro preferido.

31
00:02:07,230 --> 00:02:08,460
Tão adorável.

32
00:02:08,460 --> 00:02:16,500
vamos fazer é usar a consulta J e o método TTR para mudar essa fonte de imagem para o terrível pinheiro martin.

33
00:02:16,560 --> 00:02:17,530
E o que

34
00:02:18,020 --> 00:02:18,620
ESTÁ BEM.

35
00:02:18,930 --> 00:02:20,500
Então, irá atualizar nossa página.

36
00:02:20,630 --> 00:02:27,540
Aqui está a nossa imagem e o que seria um bom primeiro exercício é selecionar a imagem e torná-la um pouco

37
00:02:27,540 --> 00:02:29,620
mais gerenciável de forma tão pequena.

38
00:02:29,780 --> 00:02:37,740
Então, nós selecionaremos a imagem nos veremos e podemos começar apenas olhando o que a largura atualmente

39
00:02:38,070 --> 00:02:42,550
é, que é 1133 pixels e vamos torná-lo muito menor.

40
00:02:42,630 --> 00:02:48,600
Então, mudaremos com 2 500 pixels assim.

41
00:02:48,920 --> 00:02:50,780
OK, isso parece muito melhor.

42
00:02:51,450 --> 00:02:57,050
E na verdade isso é um pouco menor e meses até 200.

43
00:02:57,060 --> 00:02:57,630
Aqui vamos nós.

44
00:02:57,720 --> 00:02:59,600
Há nosso adorável pinheiro Martin.

45
00:02:59,790 --> 00:03:04,150
Então, usaremos TTR para avançar e mudar a fonte da imagem.

46
00:03:04,350 --> 00:03:09,790
Então, precisamos selecionar a imagem novamente como esse ponto 8.

47
00:03:10,290 --> 00:03:14,580
E podemos obter o valor da fonte primeiro, basta recuperá-lo.

48
00:03:14,580 --> 00:03:21,060
no nosso segundo argumento, que é o URL que eu copi e tenho na minha área de transferência e lá vamos.

49
00:03:21,210 --> 00:03:25,380
Esta é a fonte da imagem e, em seguida, também podemos configurá-lo passando

50
00:03:25,410 --> 00:03:26,830
Ele atualiza automaticamente.

51
00:03:26,880 --> 00:03:29,910
E o nosso aterrador pintinho de Martin.

52
00:03:30,930 --> 00:03:32,460
Então, esse é um exemplo.

53
00:03:32,460 --> 00:03:38,850
Outra coisa que podemos fazer aqui é selecionar esta entrada que é tipo igual a texto e podemos

54
00:03:38,850 --> 00:03:41,110
alterar o valor do atributo de tipo.

55
00:03:41,280 --> 00:03:47,260
Então, vamos fazer isso aqui e então vamos ver o atributo.

56
00:03:47,400 --> 00:03:49,110
Bem, vamos começar apenas olhando a entrada.

57
00:03:49,170 --> 00:03:50,890
É o único na página.

58
00:03:51,270 --> 00:04:01,290
E então vamos fazer esse tipo de atributo e vemos que o tipo é texto e agora podemos brincar com ele e mudar isso para

59
00:04:01,290 --> 00:04:03,500
que o tipo seja colorido.

60
00:04:03,720 --> 00:04:07,000
E assista esta entrada aqui quando acertei no enter.

61
00:04:07,380 --> 00:04:11,670
Agora ele muda para uma entrada de cores e podemos fazer a mesma coisa.

62
00:04:11,760 --> 00:04:15,340
Mude-o desta vez para ser uma caixa de seleção.

63
00:04:15,360 --> 00:04:16,630
Aqui vamos nós.

64
00:04:17,430 --> 00:04:17,740
ESTÁ BEM.

65
00:04:17,760 --> 00:04:23,890
Vamos voltar ao texto porque vamos usar isso mais tarde no vídeo como entrada de texto.

66
00:04:24,090 --> 00:04:30,360
A última coisa que eu quero demonstrar é o comportamento do método TR em vários elementos, então

67
00:04:30,360 --> 00:04:32,700
vamos adicionar algumas tags de imagem.

68
00:04:32,820 --> 00:04:38,850
Então, vamos fazer uma duas três imagens e eu vou precisar atualizar para obter essas.

69
00:04:39,000 --> 00:04:40,890
E lá essas imagens gigantescas.

70
00:04:40,980 --> 00:04:53,880
Então eu vou redimensionar novamente e isso será Imagem ponto ver SS com Khama 200 atos e por causa da magia do J

71
00:04:53,880 --> 00:04:58,000
Query que vai fazer todos eles 200 pixels.

72
00:04:58,440 --> 00:05:04,380
que eu só quero mudar o primeiro aqui para ser a foto de marmelo de pinho assustadora com os dentes.

73
00:05:04,380 --> 00:05:05,070
OK, suponhamos

74
00:05:05,380 --> 00:05:12,120
O que fiz anteriormente não funcionará se eu tentar e simplesmente selecionar a imagem que é realmente todas as imagens e, portanto,

75
00:05:12,120 --> 00:05:14,620
irá mudar as três fontes da sua imagem.

76
00:05:14,610 --> 00:05:23,460
Então, se eu quiser apenas o primeiro, posso usar o colon da imagem e lembre-se de que é primeiro o tipo como

77
00:05:24,210 --> 00:05:31,380
o primeiro construído em J queery, que é mais curto, mas geralmente ligeiramente mais lento porque não está

78
00:05:31,620 --> 00:05:33,420
usando um seletor CSSA incorporado.

79
00:05:33,570 --> 00:05:40,010
Então vou voltar ao primeiro tipo e então podemos mudar a fonte para ser nossa imagem assustadora que você conhece.

80
00:05:40,140 --> 00:05:44,250
E se eu entrar, ele só afeta essa primeira imagem.

81
00:05:44,670 --> 00:05:51,060
E se eu quisesse atualizar a última imagem para ter a mesma fonte de imagem, este terrível

82
00:05:51,060 --> 00:05:59,400
pinho martin eu tenho algumas opções e a primeira que eu vou mostrar é selecionar todas as imagens assim e usar o

83
00:05:59,420 --> 00:06:05,280
último método que é algo você ainda não viu e isso retornará o último elemento de

84
00:06:05,280 --> 00:06:06,240
um determinado seletor.

85
00:06:06,420 --> 00:06:12,240
Então, isso seleciona as três imagens e depois estamos pedindo a última e depois podemos fazer essa fonte ATSDR

86
00:06:12,750 --> 00:06:16,820
e então podemos colar na fonte da nossa imagem e clicar em Enter.

87
00:06:17,070 --> 00:06:20,670
E você pode ver que a última imagem também foi alterada.

88
00:06:20,700 --> 00:06:25,800
E, finalmente, vou demonstrar mudar todos os três juntos, então eu tenho uma nova imagem que você é.

89
00:06:25,830 --> 00:06:32,440
Eu vou copiar aqui e mudarei o atributo de origem em todos eles, apenas selecionando todas as imagens

90
00:06:33,960 --> 00:06:41,280
como esta e, em seguida, executando essa vírgula fonte de atributo e colando no nosso Novo Você é tudo e

91
00:06:41,280 --> 00:06:43,310
todas as três imagens mudam simultaneamente.

92
00:06:43,750 --> 00:06:48,810
Então, para resumir a TTR, se acabamos de dar um argumento como fonte.

93
00:06:48,880 --> 00:06:51,020
Mas não passamos um segundo argumento.

94
00:06:51,090 --> 00:06:53,540
Apenas retornará o valor da fonte.

95
00:06:53,790 --> 00:06:54,810
Então esse é o getter.

96
00:06:54,930 --> 00:07:00,450
fizemos aqui que realmente atualizará o valor da fonte em cada elemento que selecionamos anteriormente.

97
00:07:00,450 --> 00:07:06,070
E então, se nós fornecemos um segundo argumento como um novo que você gosta, nós

98
00:07:06,090 --> 00:07:10,020
Então, a próxima coisa que eu quero demonstrar é o método Vau.

99
00:07:10,020 --> 00:07:16,490
Então, o VHDL que o Val faz é que nos ajuda a extrair o valor de uma entrada.

100
00:07:16,530 --> 00:07:22,200
Então, se você pode pensar de volta quando você fez esse marcador com javascript simples e nós tivemos essa

101
00:07:22,290 --> 00:07:28,740
entrada de número e essa entrada, você poderia especificar a pontuação vencedora para jogar para 5 ou para 10 e precisávamos

102
00:07:28,750 --> 00:07:30,640
extrair o valor para fora disso.

103
00:07:30,630 --> 00:07:33,010
Utilizamos uma propriedade denominada valor.

104
00:07:33,250 --> 00:07:38,160
Bem Vau é J envolve o wrapper para o valor, como cada tim.

105
00:07:38,190 --> 00:07:44,360
É um invólucro de Jamail enfurecido e o texto é o invólucro para conteúdo de texto.

106
00:07:44,370 --> 00:07:47,630
Você pode ver alguns exemplos como você pode ver aqui.

107
00:07:47,790 --> 00:07:53,950
Se não passarmos nenhum argumento, ele retornará o valor de um elemento específico que selecionamos.

108
00:07:54,490 --> 00:08:00,480
Então, neste caso, estamos agarrando o menu suspenso no elemento selecionado com a classe de foo e então estamos

109
00:08:00,490 --> 00:08:06,990
fazendo o Val no qual nos indicará qual elemento ou qual parte do menu suspenso está selecionada e, então, também

110
00:08:07,000 --> 00:08:12,720
podemos usar a mesma sintaxe mas passamos em um argumento e isso mudará o valor de uma entrada.

111
00:08:13,240 --> 00:08:18,870
Então, vamos para a nossa entrada de texto aqui e eu vou limpar o console e vamos seguir em frente

112
00:08:19,020 --> 00:08:20,560
e selecionar esta entrada de texto.

113
00:08:20,910 --> 00:08:28,090
Então, um sinal de dólar insere exatamente assim e então vamos executar o Val sem argumentos.

114
00:08:28,350 --> 00:08:33,420
E agora, nos daria uma string vazia porque o valor aqui é uma string vazia.

115
00:08:33,420 --> 00:08:34,600
Não há nada lá dentro.

116
00:08:34,890 --> 00:08:41,900
Então, se escrevemos algo agora como meu nome e depois pedimos o valor que nos diz aço frio.

117
00:08:42,150 --> 00:08:48,720
Então, o que quer que seja aqui é agarrado quando corremos embora e, como todos os outros métodos que vimos,

118
00:08:48,900 --> 00:08:51,290
ele também atuará como um método setter.

119
00:08:51,450 --> 00:09:01,080
Então, se eu passar em algo como aço enferrujado e acertei, eu vejo que ele atualiza a entrada para

120
00:09:01,090 --> 00:09:03,070
agora dizer resti ainda.

121
00:09:03,180 --> 00:09:07,320
Você pode estar se perguntando quando realmente escrevemos código para atualizar uma entrada.

122
00:09:07,330 --> 00:09:10,150
Normalmente, deixamos um usuário atualizar a entrada.

123
00:09:10,230 --> 00:09:14,630
O único caso de uso comum que eu posso pensar é se queríamos limpar o valor.

124
00:09:14,710 --> 00:09:20,550
Então, se esta fosse uma lista de tarefas e nós queríamos que o usuário pudesse adicionar novos

125
00:09:20,550 --> 00:09:28,410
Candie ou algo que eu pudesse digitar em geléias, que são sobrevalorados, e entramos e entramos e queremos adicionar um novo aliado

126
00:09:28,420 --> 00:09:31,670
e depois queremos apagar o que está aqui dentro.

127
00:09:31,840 --> 00:09:33,460
Usaríamos ponto.

128
00:09:33,540 --> 00:09:35,290
Então eu vou te mostrar.

129
00:09:35,290 --> 00:09:36,290
Apenas parece assim.

130
00:09:36,390 --> 00:09:42,490
E então vamos configurá-lo para uma seqüência vazia e isso apaga o conteúdo dentro de lá, então faremos isso

131
00:09:42,480 --> 00:09:45,040
na verdade quando criarmos a nossa própria lista.

132
00:09:45,080 --> 00:09:49,960
Usaremos o Vau com uma string vazia para redefinir o texto e colocá-lo.

133
00:09:49,960 --> 00:09:54,890
A última coisa que vou mencionar é que Darvell trabalha em todos os elementos que têm um atributo de valor.

134
00:09:55,050 --> 00:10:01,170
Portanto, não é apenas entradas com texto de chamadas de tipo, como caixas de seleção e cores

135
00:10:01,410 --> 00:10:07,110
para entradas de cores, mas também inclui menus suspensos que eu posso seguir em frente e

136
00:10:07,120 --> 00:10:16,740
escrever irá criar um novo menu suspenso que é um elemento selecionado e, em seguida, dentro desta seleção, adicionamos As opções e cada opção representam uma escolha.

137
00:10:17,040 --> 00:10:27,480
Então, nossas opções conterão alguns dos animais de estimação mais populares no país, como avestruz e tartaruga e

138
00:10:27,480 --> 00:10:28,210
Sapo.

139
00:10:28,600 --> 00:10:35,950
OK e vamos economizar e atualizar a página e você pode ver que agora temos um menu suspenso com três opções e se

140
00:10:36,140 --> 00:10:43,080
eu quiser saber qual a escolha que o usuário selecionou, eu poderia ir até aqui e eu não apenas selecionar a

141
00:10:43,330 --> 00:10:44,600
entrada de qualquer Mais.

142
00:10:44,790 --> 00:10:53,070
Eu precisaria selecionar qualquer um que me dê esse menu suspenso e então eu apenas executar o Vau sobre

143
00:10:53,080 --> 00:10:58,210
isso e isso me diz que o usuário selecionou sapato. Tudo bem.

144
00:10:58,230 --> 00:11:06,250
em seguida, fülle é usado para recuperar o valor ou definir o valor de qualquer tipo de menu de entrada ou de lista suspensa.

145
00:11:06,240 --> 00:11:12,670
Então, para encerrar 80 TR é usado para acessar qualquer atributo específico que queremos ou para definir um atributo e,

146
00:11:13,110 --> 00:11:13,500
Tudo bem