Tudo bem, é hora de o nosso primeiro exercício de Jay queery o modo como este
funciona é que vou dar-lhe algum hymnal envelhecido de amostra para divs alguns têm aulas, algumas têm idéias e eles
vão levar aqueles para divs e colocá-los em seu arquivo HTML de idade e você precisará incluir corretamente a consulta do Jay
como você faz isso se quiser usar um Cdn ou se desejar baixá-lo.
E então, há quatro desafios rápidos que eu quero que você tente usar Jay Querrey e, em
particular, o sinal de dólar para selecionar e Dot veja SS para estilo.
Então, o primeiro.
Selecione todos os divs e dê-lhes um fundo roxo.
O próximo é selecionar os divs com destaque de classe e torná-los com 200 pixels de largura.
O terceiro é selecionar a div com o terceiro ID e dar-lhe uma borda laranja até que ponto
e o estilo da borda.
E, em seguida, o bônus é selecionar apenas a primeira div e mudar a cor da fonte para ficar cor-de-rosa.
Então, vá em frente, dê uma chance.
Você precisará publicar um vídeo.
Crie um arquivo HTML New Age.
e, em seguida, copie este código ou digite-se e você precisará resolver esses quatro desafios.
Inclua uma consulta
Então, vá em frente postar um vídeo.
Volto em apenas alguns segundos com
a solução.
Vamos seguir em frente e digite uma solução rápida para isso.
Como sempre, a primeira coisa que precisamos fazer é tornar nosso arquivo cada vez.
Então eu tenho um novo arquivo.
título e então irei em frente e adicione nosso iniciador DML e eu Apenas copiá-lo em vez de digitá-lo.
Eu liguei isso para exercitar esse html e eu vou guardá-lo e, em seguida, adicionar o meu horário regular e agora
chamaremos este exercício de consulta J no
OK, então temos os quatro elementos.
Agora vamos e adicione Jay Querrey.
Lembre-se de que temos duas maneiras de fazer isso, podemos incluí-lo localmente ou podemos vincular a um CDN.
Então vou mostrar o primeiro.
Só vou copiar o arquivo.
Então eu tenho que modificar a versão aqui apenas para comandar o comando C.
Então eu agora tenho no mesmo diretório que meu exercício que idade Simmo.
E então eu irei até aqui e a primeira coisa que eu quero fazer é adicionar um script de etiqueta de script e
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
o ponto 1 . 4 homens.
Sim.
Então Jay queery joga para apontar um ponto para homens Dot.
Jesus salvamos isso e abri-lo no nosso navegador e faça o nosso pequeno teste para ver se ele funciona.
Parece que encontrou o arquivo.
Caso contrário, isso nos daria um erro e sempre podemos tentar fazer algo como dólar dólar div e ver o
que recebemos.
E está funcionando.
Está selecionando nossos 4 divs.
Também podemos incluir consultas A-J CDN.
E eu só google por isso.
Jay quercetin e depois escolha nossa versão.
Então, não queremos 3. 0.
Tenho certeza que funciona bem.
Mas essa é a versão mais nova e ainda é um alfa.
Então, provavelmente há alguns erros e alguns problemas.
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
e deixarei os dois aqui e simplesmente comentei um e restaurei a fonte igual à que
você é. errado.
Então, qualquer um funciona, usarei o Cdn, já que eu já provei para você que
todos usamos o Cdn.
Como eu já provava que este funcionava apenas por diversão.
Então, vamos economizar e depois atualizar e verificar novamente, nosso código ainda funciona.
Sim, está encontrando sinais de dólar bem.
Está ligado a J Qwerty.
Um ponto que eu gostaria de fazer é que incluímos J queie acima da cabeça e nós usamos
isso em nossos scripts que escrevemos no corpo.
E a razão pela qual fazemos isso lembra-se de coisas carregadas na ordem em que são declaradas. Então, queremos
que a consulta Arjay seja carregada antes de usá-la em vez de um script.
Então, nosso script que precisamos definir é onde escreveremos nosso código e chamaremos isso de exercício.
J s.
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 é
um teste realmente simples para ver se ele está conectado tanto ao nosso arquivo h tim como à consulta
J Se for capaz de ver e usar o método de consulta J, nós faremos algo assim.
Se a consulta J fizer outra coisa, então, se houver uma consulta J, iremos alertar uma consulta carregada, e nós alertaremos
sobre o Jay Lane Querendo, e fique com cuidado.
E se atualizarmos agora, a consulta J será carregada.
Então, isso nos diz duas coisas.
Um desses roteiros está executando o exercício que Jesus está conectado e dois foram capazes de usar os métodos de
Jay Querrey.
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,
temos um erro que nos diz que a consulta J não está definida para que você possa ver a importância da
ordem em que colocamos coisas dentro.
Então, sempre queremos colocar nossas bibliotecas que nosso código depende do topo da cabeça, pelo menos, queremos
colocá-las antes dos nossos scripts que as usam.
Voltemos à tarefa e a primeira coisa que precisamos fazer é incluir corretamente Jay Querrey,
o que já fizemos.
Em seguida, precisamos selecionar todas as divs e dar-lhes um fundo roxo.
Então, vamos seguir em frente e selecionar todos os divs usando o sinal de dólar em vez de aspas.
Tudo o que precisamos fazer é selecionar div com CSSA.
Então, apenas div divide C S S e nós os tornaremos roxos.
Então, cor ou fundo neste caso é roxo ou poderíamos ter usado nossa própria R. G. B sombra de roxo.
E se você não se lembra de como fazemos roxo com RGV, então você precisa ir jogar o R. G. pouco mais.
tornou-se um
Então, esse é o primeiro que podemos salvar e verificar que isso funcionou ao se refrescar.
E nós temos quatro fundos roxos.
ESTÁ BEM.
Então é isso.
Isso está selecionando todas as divs e dando-lhes um fundo roxo.
Vou adicionar uma pequena nota aqui e comentar isso.
Em seguida, queremos selecionar os divs com classe igual a destaque e torná-los com 200 pixels de largura.
Então, isso funcionará de forma muito semelhante, mas para selecionar os divs com a classe igual a destacar o que precisamos fazer
é usar o sinal de dólar novamente.
E em vez de div, podemos usar o destaque do ponto e, em seguida, fazer C Ss com e que serão 200 picos.
Vale a pena notar que isso seleciona tecnicamente qualquer coisa que tenha uma classe de destaque.
Se você quer que seja explícito e diga apenas os divs que têm a classe de destaque, poderemos ter
uma marca de âncora ou um parágrafo que também tenha essa classe, nós escreveremos esse seletor.
E isso é C S S que diz todos os divs com a classe de destaque.
Mas, neste caso, fará a diferença.
Então, 200 pixels com atualização e você pode ver esses dois divs têm a classe de destaque o segundo e
o quarto div e eles têm um com 200 pixels.
OK, o próximo é selecionar o div com a idéia de terceiro.
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
nosso para Thorpe.
E, em seguida, o nome da ID que SS ordena e cabe a nós.
Tudo o que eu disse foi que a cor é laranja.
vamos fazer uma borda laranja sólida de dois pixels e salvar e atualizar e agora temos essa borda laranja lá.
Então,
Eu tornarei um pouco maior para que ele mostre melhor no screencast.
Aqui vamos nós.
E isso é em torno de uma terceira div, que tem a identificação da palavra.
Então, o último desafio que foi um bônus é selecionar apenas a primeira div e mudar a cor da
fonte para o rosa da maneira que seleciona a primeira div é usando um pseudo seletor CSSA.
Primeiro do tipo, então div dois primeiros pontos do tipo dash, que você deveria estar familiarizado com alguns
dos seletores CSSA.
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
ver a cor rosa.
A outra opção que temos é que existe realmente um atalho de consulta J, que é apenas o
Colan primeiro e que também funciona bem.
Uma nota interessante é que o uso de dois pontos é, na verdade, um pouco mais lento do que o
primeiro do tipo porque o primeiro do tipo foi criado para ver avaliar é um seletor CSSA versus primeiro é um atalho de consulta J.
Portanto, não é C Ss nativo é um pouco mais lento.
Então eu usaria o primeiro tipo.
OK, então é para este exercício nos próximos vídeos.
Nós vamos aprender sobre outras formas de manipular as coisas em vez de simplesmente mudar SEUS nós