Tudo bem.
Bem vindo de volta.
Então vamos começar a escrever um código.
E a primeira coisa que vamos aprender a fazer é como selecionar elementos.
Então, como com relação dominante regular ou fonologia, sim, precisamos selecionar coisas e depois manipular.
Eu sei que sou um disco quebrado, mas é um processo realmente importante, selecione e depois mude
as coisas.
vídeo será focado principalmente na seleção de elementos com J Query para dois objetivos principais aqui.
Este
O primeiro é aprender a selecionar elementos com a função de sinal de dólar e depois usar
o método C avaliado para elementos de estilo.
Então, não estamos apenas obtendo coisas selecionadas apenas imprima-as, mas para torná-la mais visual. Nós
as selecionamos e, em seguida, alteramos a cor de fundo e a consulta Jay, podemos selecionar tudo o que queremos
usando apenas uma função.
O sinal de dólar.
Então, ao contrário do J. Vanilla S. todos obtêm elementos de um nome de classe, obtenha elementos por nome de etiqueta.
onde temos o documento que obtem o elemento por meio do seletor de consulta do seletor de consulta id,
Há tantas maneiras diferentes de selecionar o sinal de dólar e a consulta Jay irá substituí-los.
Basicamente, funciona como seletor de consultas, na medida em que lhe damos um seletor de estilo C Ss.
E então a consulta Jay retorna todos os elementos correspondentes que combinam com o seletor que lhe damos.
Então, eu tenho um exemplo aqui se quisermos selecionar todas as tags da imagem na
página, apenas parece assim se quisermos selecionar todos os elementos com a classe de escala que fazemos escala de pontos.
Lembre-se que este é set set selectors.
fazer algumas coisas mais avançadas, como essa, selecionando todas as tags de âncora que estão dentro dos elementos da lista.
Então, para uma identificação, precisamos do arco para Thorpe para uma classe que precisa do ponto e também podemos
Então, vou fazer uma demonstração rápida aqui de como isso funciona.
Então, temos nossa demo de Jake Querrey envelheceu ele nossa página configurada onde eu incluo o Cdn.
E não importa se usamos a palavra N ou se você quiser usar a cópia baixada, ela
funcionará da mesma maneira.
Então precisamos desse script aqui e então precisamos de algum conteúdo para jogar.
Então eu vou manter o H-1 S. J. demonstração básica.
Vou mudar esses aliados para torná-los um pouco mais únicos, então vou preenchê-lo com alguns dos meus animais favoritos.
Então o fim é para Newt.
A parte favorita do meu amor de cinco anos da música do alfabeto animal adicionará em outro dos
meus álbuns favoritos Monkey.
E, finalmente, o pinho martin.
E se você nunca viu a marta do pinheiro eles são igualmente animais adoráveis ​​e aterrorizantes.
Então você pode ver adorável aqui.
Mas se você der uma olhada neles em ação eles são predadores loucos e bastante assustadores.
ESTÁ BEM.
Então, alguns dos meus animais favoritos na lista irão salvar e vamos abrir isso agora.
Certifique-se de que estamos no diretório certo.
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
no console, tornando o tamanho da fonte um pouco maior e vamos usar uma consulta para selecionar algumas dessas coisas.
Então lembre-se de um sinal de dólar é uma função.
E se eu apenas digitar sinal de dólar por conta própria sem os parênteses.
Isso é como eu, digitando alerta sem parênteses ou con. O log de pontos sem os parênteses realmente não
faz nada exceto me diz.
Sim, eu sei sobre esse código, mas na verdade ele não o executa.
Vamos começar selecionando o único H-1 na página para fazer isso.
Podemos usar o sinal de dólar e o seletor s para selecionar h é apenas H-1 e nós entramos em Enter.
Você pode vê-lo retornar o demo H-1 da J queery.
Então, note que está dentro de uma lista.
Então, ao contrário do seletor de consulta, retorna a primeira instância para o seletor de sinal de dólar.
O Query retornará uma lista, mesmo se houver apenas um item que realmente seja útil e veremos
isso um pouco.
Então, vamos tentar selecionar todos os aliados agora para que possamos fazer algo como Dollar Sign ally e nós
recebemos três aliados assim.
Nós também podemos selecionar o corpo digitando o corpo e tornar as coisas um pouco mais interessantes.
Vamos voltar para nossa idade e-mail e adicionar um I. D. Para pino martin, vamos chamá-lo de adorável como o
id e, em seguida, podemos também em nosso macaco howler vai adicionar um macaco howler tag e ele vai apenas para mac
com ponto com e isso só será monkey dot com.
E se atualizarmos se quiser selecionar esse link, eu usaria o sinal de dólar e eu poderia apenas fazer uma marca de âncora
e isso me daria.
Eu também poderia dizer tag de âncora dentro de um aliado.
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.
E em todos os casos até agora são idênticos.
Mas se eu adicionar outra marca de âncora apenas na parte inferior da página Google dot com e eu atualizo.
E agora eu faço minha marca de âncora de sinal de dólar.
Recebo as duas marcas de âncora.
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
âncora.
Ou eles poderiam ter encurtado isso aqui e ali, vamos selecionar o item com a idéia de adorável, funciona como se quiser
selecionar ou todo ou seletor de consulta ou C Ss para esse assunto onde eu preciso
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.
Então, nós vimos como selecionamos e não é muito emocionante apenas imprimir coisas no console ou
apenas para vê-las retornar aqui.
visuais e a nos ajudar a alterar o estilo para que O método é chamado
Dotsie SS e a maneira como ele funciona é que nós digitamos um sinal
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.
Mas eu realmente quero fazer é introduzir um método, vamos ver muitos mais métodos nos próximos vídeos, mas vou mostrar
um agora que nos ajudará a tornar as coisas
Então, aqui está um exemplo, eu estou selecionando algo com a idéia de especial e então estou executando o CSSA nela
e mudando a borda para ser de dois pixels de vermelho sólido.
Então, deixe-me demonstrar isso.
Vamos fazer o H-1.
Então eu selecionei o sinal de dólar H-1 Dotsie SS Assim como este.
E então, em vez de aqui, vamos mudar a cor para ser amarelo assim.
E eu entrei no enter.
E você pode ver que muda para amarelo, o que é incrível.
Portanto, é sempre bom ter em mente como você faria isso sem j Querrey.
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
Ss. Portanto, precisamos fazer pontos de estilo de ponto com cores iguais.
E vamos mudar para laranja.
E nós vamos lá.
aqui é realmente muito mais poderosa e pode fazer muito mais do que podemos fazer com essa única linha aqui.
Nós mudamos para laranja, mas esta linha
Então, suponhamos que queria mudar vários estilos sobre este H-1, queria mudar a cor e
a cor de fundo e a borda.
O que posso fazer é definir meus estilos em um objeto e passar em um objeto.
Então eu não tenho que apenas fazer um string Porter coma o valor para o Porter.
Posso definir um objeto com várias propriedades múltiplos pares de valores de chave e passar isso
e todos serão aplicados.
Então vamos fazer isso agora.
Vamos definir nossos estilos e não precisamos fazer um objeto separado.
Eu vou te mostrar isso.
E, em vez de aqui, dirá que a cor deve ser fundo vermelho deve ser cor-de-rosa e nós faremos
a borda deve ser de dois pixels sólidos, roxos assim.
E se atingimos Enter, agora temos o nosso objeto de estilos e novamente, que pode ser chamado de qualquer coisa.
E então, o que faremos é selecionar o H-1.
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
são aplicados.
Então, para fazer isso sem consulta j exigiria que fizéssemos três linhas separadas.
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
do ponto de fundo é igual a rosa e, em seguida, esse estilo que é igual a dois pixel sólido roxo.
Espero que você veja já isso com apenas algumas linhas.
J Query já está provado ser bastante poderoso.
E enquanto podemos fazer tudo sem isso, definitivamente nos está salvando algum tempo e tornando nosso código mais limpo.
característica do método CSSA ponto que torna ainda mais útil que eu mostrei agora o que podemos fazer
é realmente criar vários elementos ao mesmo tempo, em vez de selecionar o primeiro e torná-lo amarelo.
Há outra
Podemos selecionar todos ou todos os aliados e precisamos apenas de uma linha para fazer isso.
Então vou mostrar-lhe isso.
Agora vamos fazer todas as mentiras.
Então, para fazer isso, preciso selecionar aliados.
Então, assim.
E se eu entrar em cena.
ser azul assim e vou entrar e perceber isso A linha muda todos os três aliados.
Você verá que isso me dá os três aliados e então eu preciso encadear em C Ss e eu vou apenas dar
uma única cor de propriedade e mudá-la para
Então definitivamente muito poderoso.
Tudo o que fazemos é selecionar com o seletor de sinalização do seletor e isso nos dá três aliados e fazendo a
Dotsie SS em uma matriz aqui da ALWIS, essa lista de aliados.
Isso realmente os tornará todos azuis e nem sequer devemos fazer um loop manual, como nós,
sem uma consulta.
para lembrá-lo se eu quero mudar todos eles para serem verdes sem consulta, primeiro preciso selecioná-los.
Então, apenas
Portanto, var allies é igual ao documento que o seletor de consulta passa no aliado de cordas.
E então eu preciso percorrer.
Então, para var, eu igual a zero é menor do que Elvises ao longo do tempo eu plus plus.
E, então, dentro do loop, precisamos fazer aliados em que estilo essa cor
é igual e vamos fazer o verde assim e vamos entrar.
E você pode ver que todos mudaram para verde.
Então, novamente é possível sem uma consulta, mas é significativamente mais código.
Nós precisamos selecioná-los primeiro e até mesmo selecioná-los é doloroso.
Isso é muito mais longo do que apenas um sinal de dólar.
E então também precisamos fazer um loop manualmente com um loop for ou um loop while
e, em seguida, mudar cada um individualmente e depois terminamos com uma consulta.
Tudo o que precisamos fazer para mudar de volta para o azul é selecionar todos os aliados Dotsie SS e depois passar em nossa
propriedade, que é azul cor azul.
Vou demonstrar mais alguns exemplos aqui.
e fará seu tamanho de fonte maior, então tamanho da fonte e será 40 pixels e lá vamos.
Vamos selecionar todas as tags de âncora, assim como essa, uma tag que C Ss
Recebemos grandes links. Também mostrar que podemos definir um objeto cheio de estilos como fizemos anteriormente e podemos
usar isso para modelar vários elementos e não apenas um.
Então, selecionaremos todas as mentiras e as modelaremos em conjunto e, ao invés de simplesmente fazer as SS e passando
em uma string como a cor, vamos dar-lhe um objeto e simplesmente defini-lo aqui.
E vamos adicionar em algum espaço aqui para digitar.
E a primeira coisa que faremos é mudar o tamanho da fonte de todos eles.
o tamanho da fonte é fonte Dasch tamanho ou altura e tamanho em javascript e em consulta J, temos que usar caso de camelo.
Então, NCSA como
Então, tamanho da fonte sem espaço ou não há traço, mas nós, o membro da maiúscula, que é
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.
Essas bordas tracejadas são sempre deslumbrantes.
E, em seguida, adicione o fundo da cor de fundo.
E vamos fazer a nossa própria R. G. cor.
Então R. G. B.
E faremos o nosso G. P. UMA. na realidade.
E a primeira leitura também será feita.
89 vermelho 45 Verde 20 azul.
E então 0. 5 Alpha, que é o canal de opacidade ou transparência.
E se nós entramos, você pode ver que todos esses são aplicados de uma só vez.
Então, o tamanho da fonte diminui. Nós temos 10 pixels.
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
de fundo que é o que quer que essa cor acabe por ser parecer uma espécie
de cor acastanhada clara.
Tudo bem.
Então, espero que você possa ver a partir dessa demonstração rápida apenas duas coisas diferentes que estamos fazendo
selecionando com sinal de dólar e que por conta própria é incrivelmente poderoso.
Basicamente, funciona como sequer Slichter e diferentes seletores todos combinados.
E é uma sintaxe muito mais curta e fácil de escrever.
E, em seguida, há o método CSSA que também é extremamente poderoso porque podemos alterar as propriedades
individuais, como fizemos aqui, mas também podemos colocar as propriedades do CSSA como fizemos aqui onde
passamos um objeto cheio de pares de valores-chave.
Provavelmente, a parte mais importante de tudo isso é que quando eu seleciono uma coleção como todos os aliados
como fiz aqui mesmo, não tenho que seguir manualmente e aplicar algo de forma individual, como fiz aqui, onde
devemos fazer um loop para todos os aliados e mude a cor um de cada vez com a consulta J.
Se eu tiver uma coleção de elementos, ele percorre automaticamente isso e aplica
Dotsie a cada um.
Então, é extremamente poderoso.
E é por isso que, como uma nota lateral, é por isso que sempre retorna uma matriz aqui.
ele sempre o retorna na lista porque toda a lógica nos bastidores envolve o loop sobre essa lista.
Mesmo que eu apenas tenha um elemento com o ID adorável,
Então, isso irá superar isso e acontece que há um item aqui.
Então, ele realmente não faz o loop.
Isso sobe ao longo de uma vez.
Tudo bem, espero que gostei disso e comece a ver o poder do equador