1
00:00:00,210 --> 00:00:05,100
Tudo bem, é hora de o nosso primeiro exercício de Jay queery o modo como este

2
00:00:05,100 --> 00:00:11,370
funciona é que vou dar-lhe algum hymnal envelhecido de amostra para divs alguns têm aulas, algumas têm idéias e eles

3
00:00:11,370 --> 00:00:18,270
vão levar aqueles para divs e colocá-los em seu arquivo HTML de idade e você precisará incluir corretamente a consulta do Jay

4
00:00:18,270 --> 00:00:22,330
como você faz isso se quiser usar um Cdn ou se desejar baixá-lo.

5
00:00:22,650 --> 00:00:27,720
E então, há quatro desafios rápidos que eu quero que você tente usar Jay Querrey e, em

6
00:00:27,990 --> 00:00:32,040
particular, o sinal de dólar para selecionar e Dot veja SS para estilo.

7
00:00:32,070 --> 00:00:33,130
Então, o primeiro.

8
00:00:33,270 --> 00:00:36,590
Selecione todos os divs e dê-lhes um fundo roxo.

9
00:00:36,870 --> 00:00:43,200
O próximo é selecionar os divs com destaque de classe e torná-los com 200 pixels de largura.

10
00:00:43,200 --> 00:00:49,800
O terceiro é selecionar a div com o terceiro ID e dar-lhe uma borda laranja até que ponto

11
00:00:49,920 --> 00:00:51,930
e o estilo da borda.

12
00:00:52,110 --> 00:00:58,630
E, em seguida, o bônus é selecionar apenas a primeira div e mudar a cor da fonte para ficar cor-de-rosa.

13
00:00:58,650 --> 00:01:00,120
Então, vá em frente, dê uma chance.

14
00:01:00,120 --> 00:01:01,710
Você precisará publicar um vídeo.

15
00:01:01,710 --> 00:01:03,280
Crie um arquivo HTML New Age.

16
00:01:03,330 --> 00:01:08,730
e, em seguida, copie este código ou digite-se e você precisará resolver esses quatro desafios.

17
00:01:08,730 --> 00:01:09,660
Inclua uma consulta

18
00:01:09,660 --> 00:01:11,130
Então, vá em frente postar um vídeo.

19
00:01:11,130 --> 00:01:13,500
Volto em apenas alguns segundos com

20
00:01:20,970 --> 00:01:21,730
a solução.

21
00:01:21,750 --> 00:01:24,700
Vamos seguir em frente e digite uma solução rápida para isso.

22
00:01:25,050 --> 00:01:29,070
Como sempre, a primeira coisa que precisamos fazer é tornar nosso arquivo cada vez.

23
00:01:29,070 --> 00:01:30,220
Então eu tenho um novo arquivo.

24
00:01:30,240 --> 00:01:37,740
título e então irei em frente e adicione nosso iniciador DML e eu Apenas copiá-lo em vez de digitá-lo.

25
00:01:37,740 --> 00:01:45,760
Eu liguei isso para exercitar esse html e eu vou guardá-lo e, em seguida, adicionar o meu horário regular e agora

26
00:01:46,060 --> 00:01:48,780
chamaremos este exercício de consulta J no

27
00:01:49,520 --> 00:01:52,080
OK, então temos os quatro elementos.

28
00:01:52,080 --> 00:01:54,660
Agora vamos e adicione Jay Querrey.

29
00:01:54,780 --> 00:02:00,330
Lembre-se de que temos duas maneiras de fazer isso, podemos incluí-lo localmente ou podemos vincular a um CDN.

30
00:02:00,480 --> 00:02:03,150
Então vou mostrar o primeiro.

31
00:02:03,510 --> 00:02:05,710
Só vou copiar o arquivo.

32
00:02:06,030 --> 00:02:10,430
Então eu tenho que modificar a versão aqui apenas para comandar o comando C.

33
00:02:10,620 --> 00:02:14,350
Então eu agora tenho no mesmo diretório que meu exercício que idade Simmo.

34
00:02:14,580 --> 00:02:21,540
E então eu irei até aqui e a primeira coisa que eu quero fazer é adicionar um script de etiqueta de script e

35
00:02:21,600 --> 00:02:28,620
então vou adicionar iguais de origem e então eu preciso ter certeza de que eu combinei isso corretamente, o que é Jay dash para

36
00:02:28,660 --> 00:02:31,000
o ponto 1 . 4 homens.

37
00:02:31,080 --> 00:02:32,110
Sim.

38
00:02:32,190 --> 00:02:38,230
Então Jay queery joga para apontar um ponto para homens Dot.

39
00:02:38,390 --> 00:02:45,640
Jesus salvamos isso e abri-lo no nosso navegador e faça o nosso pequeno teste para ver se ele funciona.

40
00:02:46,650 --> 00:02:47,950
Parece que encontrou o arquivo.

41
00:02:47,970 --> 00:02:55,920
Caso contrário, isso nos daria um erro e sempre podemos tentar fazer algo como dólar dólar div e ver o

42
00:02:55,920 --> 00:02:56,910
que recebemos.

43
00:02:57,030 --> 00:02:57,910
E está funcionando.

44
00:02:57,900 --> 00:03:00,060
Está selecionando nossos 4 divs.

45
00:03:00,060 --> 00:03:02,670
Também podemos incluir consultas A-J CDN.

46
00:03:03,180 --> 00:03:04,600
E eu só google por isso.

47
00:03:04,680 --> 00:03:07,510
Jay quercetin e depois escolha nossa versão.

48
00:03:07,980 --> 00:03:09,690
Então, não queremos 3. 0.

49
00:03:09,930 --> 00:03:10,670
Tenho certeza que funciona bem.

50
00:03:10,680 --> 00:03:12,940
Mas essa é a versão mais nova e ainda é um alfa.

51
00:03:13,050 --> 00:03:15,070
Então, provavelmente há alguns erros e alguns problemas.

52
00:03:15,150 --> 00:03:22,500
Então, para apontar um ponto quatro é a versão estável mais recente, então copiaremos esse URL e depois adicionaremos outra tag de script

53
00:03:22,500 --> 00:03:27,870
e deixarei os dois aqui e simplesmente comentei um e restaurei a fonte igual à que

54
00:03:27,870 --> 00:03:28,830
você é. errado.

55
00:03:28,950 --> 00:03:33,920
Então, qualquer um funciona, usarei o Cdn, já que eu já provei para você que

56
00:03:37,260 --> 00:03:38,460
todos usamos o Cdn.

57
00:03:38,490 --> 00:03:42,360
Como eu já provava que este funcionava apenas por diversão.

58
00:03:42,510 --> 00:03:47,180
Então, vamos economizar e depois atualizar e verificar novamente, nosso código ainda funciona.

59
00:03:47,460 --> 00:03:49,830
Sim, está encontrando sinais de dólar bem.

60
00:03:49,830 --> 00:03:51,510
Está ligado a J Qwerty.

61
00:03:51,600 --> 00:03:58,320
Um ponto que eu gostaria de fazer é que incluímos J queie acima da cabeça e nós usamos

62
00:03:58,320 --> 00:04:01,330
isso em nossos scripts que escrevemos no corpo.

63
00:04:01,590 --> 00:04:06,930
E a razão pela qual fazemos isso lembra-se de coisas carregadas na ordem em que são declaradas. Então, queremos

64
00:04:07,200 --> 00:04:11,120
que a consulta Arjay seja carregada antes de usá-la em vez de um script.

65
00:04:11,430 --> 00:04:18,620
Então, nosso script que precisamos definir é onde escreveremos nosso código e chamaremos isso de exercício.

66
00:04:18,640 --> 00:04:19,720
J s.

67
00:04:19,850 --> 00:04:28,200
E então, precisamos fazer esse exercício de arquivo que nós e vamos colocar isso aqui no mesmo diretório e o que podemos fazer é

68
00:04:29,550 --> 00:04:36,210
um teste realmente simples para ver se ele está conectado tanto ao nosso arquivo h tim como à consulta

69
00:04:36,210 --> 00:04:41,790
J Se for capaz de ver e usar o método de consulta J, nós faremos algo assim.

70
00:04:41,820 --> 00:04:54,140
Se a consulta J fizer outra coisa, então, se houver uma consulta J, iremos alertar uma consulta carregada, e nós alertaremos

71
00:04:54,130 --> 00:04:59,780
sobre o Jay Lane Querendo, e fique com cuidado.

72
00:05:00,020 --> 00:05:03,540
E se atualizarmos agora, a consulta J será carregada.

73
00:05:03,760 --> 00:05:05,240
Então, isso nos diz duas coisas.

74
00:05:05,260 --> 00:05:12,020
Um desses roteiros está executando o exercício que Jesus está conectado e dois foram capazes de usar os métodos de

75
00:05:12,010 --> 00:05:12,570
Jay Querrey.

76
00:05:12,820 --> 00:05:20,200
Se fizéssemos isso na ordem inversa, e eu coloquei a consulta Jay depois que eu incluí meu exercício Jay Sim e eu economizo e atualizamos,

77
00:05:20,200 --> 00:05:26,350
temos um erro que nos diz que a consulta J não está definida para que você possa ver a importância da

78
00:05:26,410 --> 00:05:28,260
ordem em que colocamos coisas dentro.

79
00:05:28,510 --> 00:05:34,660
Então, sempre queremos colocar nossas bibliotecas que nosso código depende do topo da cabeça, pelo menos, queremos

80
00:05:34,690 --> 00:05:37,540
colocá-las antes dos nossos scripts que as usam.

81
00:05:37,720 --> 00:05:42,850
Voltemos à tarefa e a primeira coisa que precisamos fazer é incluir corretamente Jay Querrey,

82
00:05:42,850 --> 00:05:44,020
o que já fizemos.

83
00:05:44,020 --> 00:05:48,670
Em seguida, precisamos selecionar todas as divs e dar-lhes um fundo roxo.

84
00:05:49,000 --> 00:05:55,530
Então, vamos seguir em frente e selecionar todos os divs usando o sinal de dólar em vez de aspas.

85
00:05:55,690 --> 00:05:58,360
Tudo o que precisamos fazer é selecionar div com CSSA.

86
00:05:58,390 --> 00:06:02,520
Então, apenas div divide C S S e nós os tornaremos roxos.

87
00:06:02,560 --> 00:06:09,230
Então, cor ou fundo neste caso é roxo ou poderíamos ter usado nossa própria R. G. B sombra de roxo.

88
00:06:09,380 --> 00:06:14,320
E se você não se lembra de como fazemos roxo com RGV, então você precisa ir jogar o R. G. pouco mais.

89
00:06:14,320 --> 00:06:15,560
tornou-se um

90
00:06:15,670 --> 00:06:20,110
Então, esse é o primeiro que podemos salvar e verificar que isso funcionou ao se refrescar.

91
00:06:20,530 --> 00:06:22,910
E nós temos quatro fundos roxos.

92
00:06:23,200 --> 00:06:23,770
ESTÁ BEM.

93
00:06:23,920 --> 00:06:25,050
Então é isso.

94
00:06:25,090 --> 00:06:28,780
Isso está selecionando todas as divs e dando-lhes um fundo roxo.

95
00:06:28,780 --> 00:06:32,360
Vou adicionar uma pequena nota aqui e comentar isso.

96
00:06:32,620 --> 00:06:38,670
Em seguida, queremos selecionar os divs com classe igual a destaque e torná-los com 200 pixels de largura.

97
00:06:38,990 --> 00:06:45,340
Então, isso funcionará de forma muito semelhante, mas para selecionar os divs com a classe igual a destacar o que precisamos fazer

98
00:06:45,340 --> 00:06:47,390
é usar o sinal de dólar novamente.

99
00:06:47,950 --> 00:07:02,770
E em vez de div, podemos usar o destaque do ponto e, em seguida, fazer C Ss com e que serão 200 picos.

100
00:07:02,870 --> 00:07:07,660
Vale a pena notar que isso seleciona tecnicamente qualquer coisa que tenha uma classe de destaque.

101
00:07:07,660 --> 00:07:13,540
Se você quer que seja explícito e diga apenas os divs que têm a classe de destaque, poderemos ter

102
00:07:13,540 --> 00:07:18,470
uma marca de âncora ou um parágrafo que também tenha essa classe, nós escreveremos esse seletor.

103
00:07:18,670 --> 00:07:22,290
E isso é C S S que diz todos os divs com a classe de destaque.

104
00:07:22,390 --> 00:07:24,370
Mas, neste caso, fará a diferença.

105
00:07:24,380 --> 00:07:31,750
Então, 200 pixels com atualização e você pode ver esses dois divs têm a classe de destaque o segundo e

106
00:07:31,750 --> 00:07:35,260
o quarto div e eles têm um com 200 pixels.

107
00:07:35,890 --> 00:07:41,100
OK, o próximo é selecionar o div com a idéia de terceiro.

108
00:07:41,460 --> 00:07:50,320
E dar-lhe uma borda de laranja para selecionar a div com esse sinal de dólar de Id novamente e em vez de ponto, precisamos do

109
00:07:50,590 --> 00:07:51,850
nosso para Thorpe.

110
00:07:52,300 --> 00:07:59,060
E, em seguida, o nome da ID que SS ordena e cabe a nós.

111
00:07:59,080 --> 00:08:00,680
Tudo o que eu disse foi que a cor é laranja.

112
00:08:00,870 --> 00:08:10,420
vamos fazer uma borda laranja sólida de dois pixels e salvar e atualizar e agora temos essa borda laranja lá.

113
00:08:10,420 --> 00:08:11,140
Então,

114
00:08:11,190 --> 00:08:14,680
Eu tornarei um pouco maior para que ele mostre melhor no screencast.

115
00:08:14,680 --> 00:08:15,280
Aqui vamos nós.

116
00:08:15,500 --> 00:08:20,360
E isso é em torno de uma terceira div, que tem a identificação da palavra.

117
00:08:20,650 --> 00:08:26,710
Então, o último desafio que foi um bônus é selecionar apenas a primeira div e mudar a cor da

118
00:08:26,710 --> 00:08:32,380
fonte para o rosa da maneira que seleciona a primeira div é usando um pseudo seletor CSSA.

119
00:08:32,380 --> 00:08:41,030
Primeiro do tipo, então div dois primeiros pontos do tipo dash, que você deveria estar familiarizado com alguns

120
00:08:41,020 --> 00:08:42,710
dos seletores CSSA.

121
00:08:42,910 --> 00:08:53,440
E então, vamos fazer com que seja cor-de-rosa, a cor dos SS é cor-de-rosa e economizamos e atualizamos e você pode

122
00:08:53,440 --> 00:08:55,730
ver a cor rosa.

123
00:08:55,730 --> 00:09:02,480
A outra opção que temos é que existe realmente um atalho de consulta J, que é apenas o

124
00:09:02,920 --> 00:09:05,350
Colan primeiro e que também funciona bem.

125
00:09:05,380 --> 00:09:11,800
Uma nota interessante é que o uso de dois pontos é, na verdade, um pouco mais lento do que o

126
00:09:11,810 --> 00:09:19,970
primeiro do tipo porque o primeiro do tipo foi criado para ver avaliar é um seletor CSSA versus primeiro é um atalho de consulta J.

127
00:09:20,060 --> 00:09:23,590
Portanto, não é C Ss nativo é um pouco mais lento.

128
00:09:23,770 --> 00:09:25,540
Então eu usaria o primeiro tipo.

129
00:09:25,880 --> 00:09:28,870
OK, então é para este exercício nos próximos vídeos.

130
00:09:29,000 --> 00:09:33,360
Nós vamos aprender sobre outras formas de manipular as coisas em vez de simplesmente mudar SEUS nós