Introdução ao jQuery: aprenda a usar o jQuery (com JavaScript) do zero

1. Introdução ao curso: Bem-vindo ao jQuery 101, jQuery para iniciantes. Vamos começar com a grande pergunta. jQuery ainda é usado? E a resposta é absolutamente sim. Jquery é responsável pelo JavaScript em centenas de milhões de sites. Vou repetir isso. Jquery é responsável pelo JavaScript em centenas de milhões de sites. Jquery foi originalmente criado para preencher uma lacuna entre navegadores antes do JavaScript começar a se tornar mais padronizado, Internet Explorer e Firefox usam JavaScript de forma diferente. Chrome e Safari implementaram JavaScript de forma diferente. E jQuery era como você poderia classificar uma linguagem que apenas funcionava. Olha, eu sei que muitas pessoas dizem que você deve pular aprender jQuery completamente, mas considere isso se ele é usado por mais de 100 milhões de sites e ainda favorecido por organizações como Django e o framework jangle, então há claramente uma demanda do mercado para essa habilidade. Se você está entrando em JavaScript recentemente, este curso é para você. Se você é um desenvolvedor back-end e quer escrever bom JavaScript sem precisar aprender um framework inteiro como reagir, este curso é para você. Para tirar o máximo proveito deste curso. Você precisará saber um pouco de HTML. E se você conhece um pouco de CSS, isso vai ser útil, mas não é necessário. E para realmente tirar o máximo proveito do jQuery, você deve conhecer algum simples e velho JavaScript apenas baunilha. Oi, eu sou Caleb, me diga e eu tenho usado jQuery desde que foi inventado em 2006. Ensinei mais de 300 mil alunos e trabalhei com clientes como NASA, Mozilla, Arctic Research Foundation, Samaritanos e o National Health Service no Reino Unido. E esta é a minha classe jQuery 101. Obrigado por assistir este vídeo de introdução, e te vejo lá dentro. 2. O que é jQuery e por por aprender isso?: Jquery é como escrevemos uma forma de JavaScript e tê-lo executado perfeitamente em todos os navegadores. Isso é útil porque os navegadores não implementam JavaScript da mesma maneira. Alguns têm regras diferentes. Alguns não confiam em determinados recursos que você cria e, e eles fazem você escrever código diferente para diferentes navegadores. jquery pontes essa lacuna, significa que você pode escrever JavaScript para todos os navegadores e ele sempre vai apenas funcionar. Você não precisa lidar com o suporte de navegador diferente. Jquery também é considerado uma biblioteca. Não é uma estrutura, que significa que você tem permissão para misturar seu JavaScript normal com ele e nada de ruim pode acontecer. E não há maneiras rígidas de escrever seu JavaScript com jQuery. Considerando que com uma estrutura como view WAS OU reagir dot js, existem certas regras que você quer seguir e há muita magia nos bastidores que você não vê. O que torna a aprendizagem de outras estruturas como reagir um pouco mais difícil. Começando em cerca de 2019, reagiu JS e vis.js tornou-se muito popular. E as pessoas agora dizem coisas como, Oh, não se preocupe em aprender jQuery, mas é literalmente usado em milhões e milhões e milhões de sites. Então, por que não aprendeu uma habilidade tão claramente exigida? E o bom é que você pode aprender jQuery em um único dia aprendendo a reagir ponto js ou ver ponto js vai levar muito tempo porque há grandes estruturas, eles são poderosos também. Mas se você só precisa de um pouco de assistência com o seu JavaScript ou você simplesmente quer escrever menos código do que jQuery é 100% para você. E a verdade realmente a partir de uma perspectiva de desenvolvedores sênior, você não precisa aprender jQuery ou reagir ou ver. Você pode fazer tudo com baunilha ou JavaScript simples, mas essas ferramentas nos ajudam a fazer mais com menos código. Além disso, e novamente, esta é uma bomba verdade usando reagir ponto js ou ver ponto js em cerca de 95% de todos os sites completa exagero. Você vai acabar gastando muito tempo escrevendo reagir para um pequeno recurso que pode ser escrito com jQuery em questão de minutos, às vezes uma questão de segundos. É por isso que eu escolho escrever baunilha JavaScript ou jQuery na maioria dos meus sites. A menos que haja uma necessidade real de algo grande e complexo, então eu costumo escolher, reagir ou ver. Então a razão pela qual você deve estar aprendendo jQuery é porque simplesmente demanda do mercado, centenas de milhões de sites estão usando isso. Você pode muito bem aprender o que está em demanda. 3. Como instalar o jQuery em seu site: Olá e bem-vindo à nossa primeira lição sobre jQuery. Nesta lição, vamos instalar jQuery em nosso site. Então, primeiro as coisas, precisamos abrir um navegador e ir para JQuery.com. Agora há duas maneiras de instalar jQuery. Podemos baixar isso e usá-lo localmente em nosso computador. Então podemos usar um arquivo real em nosso computador, ou podemos usar essa coisa chamada rede de entrega de conteúdo. Então eu clico no botão de download lá e nós podemos baixar, baixar, baixar. Há outra maneira de usar fios e PM Bauer, todas essas outras coisas. Ou podemos tomar o melhor caminho e onde diz outros CDNs, podemos usar o Google CDN, Microsoft CDN JS ou entregar ou entregar jazz. E eu vou usar JS entregue apenas por nenhuma razão em particular. E neste curso vamos usar jQuery 3.5.1. E então o que eu quero fazer aqui é obter a versão minificada porque nós não precisamos de todo o código-fonte extra. Não precisamos de todo o espaçamento extra ou comentários de código. Nós só precisamos do JavaScript real e nós realmente não nos importamos com o que ele parece, porque estamos usando jQuery como uma biblioteca. Então vamos copiar o HTML e vamos abrir o código do Visual Studio ou qualquer editor de texto que você deseja usar. Vamos criar um novo arquivo aqui. Vamos fazer HTML cinco. Isso não vai funcionar. Vamos ter que salvar isso primeiro. Então eu vou salvar isso como index.html. E então eu posso fazer HTML dois pontos cinco, clique guia e ele auto preenche um monte de coisas legais para nós. E podemos fazer jQuery um-para-um como o título. Agora, quando estamos usando JavaScript, normalmente queremos colocar JavaScript na parte inferior do nosso corpo, não fora do corpo, mas apenas na parte inferior, pouco antes da tag body de fechamento. E aquele código que eu copiei lá, eu vou colar isso aqui. E vamos ver que isso está vindo de CDN ab.js deliver.net slash npm yada, yada, yada. Então, o que é uma rede de distribuição de conteúdo, é basicamente uma série de servidores em todo o mundo. E quando você tenta baixar esse arquivo específico, ele vai para o servidor mais próximo e mais próximo de você. Então vai ser um download mais rápido. A coisa boa sobre isso é que eles também podem fornecer uma camada de cache. E quando há cache, isso significa que se alguém já baixou isso de um determinado site em algum outro lugar na internet, e você está acessando o mesmo arquivo já foi baixado para o seu computador. E assim você não precisa baixá-lo novamente, o que é muito, muito bom. E essa é a razão pela qual estamos usando uma Rede de Distribuição de Conteúdo ou CDN, é porque queremos essa camada extra de cache apenas para tornar nossos sites super rápidos. Também significa que não temos que manter um arquivo extra. Agora, quando estamos escrevendo isso, precisamos ter uma tag de script e uma tag de script de fechamento. E dentro daqui, vamos estar esperando jQuery para carregar corretamente. Então, mesmo que este arquivo possa tecnicamente ser baixado em seu computador, seu navegador pode não ter totalmente reconhecido que todo o arquivo está lá um final avaliado ou executado o código ainda, então ele pode não saber completamente. E então fazemos essa coisa onde esperamos que ele carregue e fazemos isso com essa pequena sintaxe estranha e vamos falar sobre sintaxe em sua própria lição. Mas, por enquanto, só precisamos colocar isso em funcionamento para que possamos fazer o document.ready. Função, Console.log. Jquery está carregado. E então o que estamos fazendo aqui é que somos um, novamente, vamos falar sobre sintaxe e um pouco. Mas estamos usando isso como um seletor. Nós estamos selecionando o documento inteiro, a página inteira, e quando ele estiver pronto, quando o Modelo de Objeto do Documento é carregado, quando nosso JavaScript é feito, carregamento executar esta função e isso é chamado de função de retorno Falar sobre isso também. E, em seguida, uma vez que tudo isso é feito, apenas console log jQuery é carregado. E então, se formos para o nosso navegador, abrir uma nova aba e no topo do que está indo para arquivo, isso é apenas fora da minha área de gravação, mas eu só quero arquivar e então podemos ir para abrir arquivo, selecionar nosso arquivo index.html. E vamos ver absolutamente nada acontecer. Mas se clicar com o botão direito do mouse e ir para inspecionar e ir para o console, e não vamos preservar o log lá. É só um cenário de um projeto em que eu estava trabalhando. Vamos fazer isso maior. Diz que jQuery está carregado. Então, toda vez que eu atualizar ele diz jQuery é carregado e deve ser quase instantâneo. Então você não notaria que é ou não é. Avaliando seu JavaScript, sua biblioteca jQuery. É suposto ser super rápido, mas este é um bom método pouco apenas para ter certeza que podemos continuar a usar jQuery em nosso código. Então, antes de qualquer coisa, o que eu gostaria que você fizesse é ter certeza de ir e obter jQuery de uma rede de entrega de conteúdo, criar um novo arquivo de índice como este, e então apenas escrever este pequeno script estranho aqui. E novamente, vamos dissecar isso uma e outra vez. Então você estará super familiarizado com o que isso realmente é, mas você só precisa escrever isso para começar. E então passaremos para a próxima lição. Então, uma vez que você fez isso e você está pronto, vamos para a próxima lição onde falamos corretamente sobre a sintaxe jQuery. 4. Sintaxe do jQuery: Tudo bem, quando estamos falando sobre a sintaxe jQuery, é muito parecido com a sintaxe JavaScript. É, na verdade, é apenas tudo escrito em JavaScript é apenas uma certa maneira de escrever nosso JavaScript. E então em nossa última lição, nós escrevemos este document.ready coisas de função estranhas. Então vamos quebrar isso um pouco. Então é aí que vamos colocar todo o nosso código em cada lição avançando quando estamos falando sobre jQuery. Mas a sintaxe aqui, o estilo em que está escrito, se parece muito com isso. Então nós temos um cifrão com parênteses, e este é o nosso seletor. Então, se você vem de JavaScript, isso é muito parecido com o método do seletor de consulta de ponto de documento. A única diferença é que não temos que escrever mais isso. Nós podemos simplesmente escrever um ponto div aqui e isso vai selecioná-lo para nós. E por isso é um atalho bonito. Então aqui temos um seletor, um seletor. Então temos algum tipo de função ou evento ou método ou, ou algo acontece com este seletor. E assim vemos aqui em cima, vemos prontos. Então nós selecionamos o documento e vamos dizer quando ele estiver pronto ou quando tivermos um botão, podemos dizer onclick ou podemos fazer algo. Então, há algum tipo de evento que acontece aqui. E isso por si só é apenas um método ou uma função. E, em seguida, leva esta coisa chamada função de retorno de chamada. E a maioria das coisas em jQuery tomar uma função de retorno de chamada. Então, vai fazer uma coisa. Então ele vai selecionar algo em sua página. Ele vai então executar ou, ou registrar algum tipo de evento. E quando esse evento está acontecendo, o que fazemos? E é aqui que o envolvemos em uma função. Então esta é apenas uma função anônima e isso apenas garante que tudo permaneça no escopo aqui. Então, é uma boa maneira de garantir que suas variáveis não vazem para fora dessa área específica. Agora, em nosso corpo aqui em cima, digamos que temos um nome de classe personalizado ponto com um ID de ID personalizado. E então você pode realmente ver como eu escrevi isso. Se eu apenas desfazer isso, você pode ver que eu escrevi um ponto ID de nome de classe personalizado, ID de cliente. E isso é exatamente como escrever CSS. Então, se você já conhece CSS, isso vai ser incrivelmente fácil para você. Este é CSS normal e acontece que VS Code tem uma coisa chamada abreviaturas de Emmett. Então, você pode escrever o seu CSS e simplesmente apertar guia e ele irá criar o seu elemento para você. Então podemos dizer aqui, “Olá mundo”. E agora com o nosso seletor, e vamos em frente e criar um novo exemplo aqui. Na última lição, fizemos o documento.ready função, yada, yada. Podemos usar ponto-e-vírgula. Não precisamos usar ponto-e-vírgula, seu JavaScript regular. Portanto, regras regulares de JavaScript ainda se aplicam. E podemos usar um seletor aqui, para que possamos selecionar este assim. E podemos fazer uma coisa aqui. E isso vai selecionar este. Nós também podemos dizer nome de classe personalizado, e que vai selecionar este AS este H1 juntamente com qualquer outro elemento que tem este nome de classe. Ou se quiséssemos obter algo completamente único, poderíamos fazer ID, ID personalizada. E novamente, isso é apenas CSS regular. E então, quando estamos escrevendo CSS, CSS, é exatamente assim que escrevemos de qualquer maneira. É assim que criamos uma declaração personalizada usando um seletor CSS. E assim no jQuery, fazemos exatamente a mesma coisa, e no JavaScript moderno fazemos exatamente a mesma coisa. Então, temos várias maneiras diferentes. Nós poderíamos até mesmo obter muito específico e dizer agarrar todos os H 1s com um nome de classe personalizado. E digamos que o texto vai ser mudado para mim e nós estamos pulando a arma aqui um pouco. E nós vamos aprender sobre texto na estrada. Mas eu queria mostrar a vocês que este é um exemplo. Então o que isso vai fazer é selecionar este elemento aqui em cima. E então ele vai pegar esse imposto e mudá-lo de Helloworld, que nós sabemos o que vai render Olá mundo em letras grandes. E vai dizer que me mudou ou vamos mudá-lo para Isto foi alterado via jQuery. Vamos guardar isso. Atualize nossa página. E ele diz que isso foi alterado via jQuery é. Mas se eu atualizar rápido o suficiente, você pode ver que ele pisca. Então, se eu clicar com o botão direito do mouse e ver minha fonte, vamos fazer isso um pouquinho. Podemos ver que ele realmente diz “Olá mundo”. Então, quando a página o torna dizendo olá mundo aqui. Mas uma vez que jQuery é carregado, ele muda para. Isso foi alterado via jQuery. Agora isso é praticamente toda a sintaxe que precisamos saber agora há um pouco mais quando se trata de ouvintes de eventos, mas vamos lidar com isso quando chegarmos a ouvintes de eventos para que eu não te sobrecarregue com muito de informação neste momento. Mas o que você precisa saber agora é isso e aquilo. Agora, o que eu gostaria que você fizesse é este exato exemplo. Vá em frente e crie um H1, selecione esse de alguma forma usando qualquer ID de classe ou um seletor de elemento. E, em seguida, altere o texto com texto de ponto e coloque algum tipo de texto novo em seu visualizado em sua página se ele mudar corretamente. Enquanto eu, você já escreveu algum jQuery, é tão fácil como isso. Quando acabares, vamos para a próxima lição. Vamos falar um pouco mais sobre seletores, especificamente. 5. Seletores de jQuery: Ok, bem-vindo de volta. Vamos falar sobre seletores. Então, um seletor é em grande parte o que jQuery é construído em torno. E a razão para isso é porque quando você está trabalhando com JavaScript, você geralmente está trabalhando com seu modelo de objeto de documento, que é todo o seu HTML aqui. E a forma como ele é estruturado, esse é o seu modelo de objeto de documento em poucas palavras. E assim podemos ter um H1 aqui, e este pode ser o nosso título personalizado. E vamos apenas criar um exemplo aqui. Podemos ter um botão aqui, e este é um botão personalizado. Vamos em frente e selecione Parágrafo. E vamos em frente e colocar um pouco de lorem lá. Vamos mudar de um template Django para um modelo HTML padrão. Então, se eu digitar Lorem, clique tab, Eu recebo lorem ipsum p tab. hit tab, Eu recebo um parágrafo, Lorem hit tab Eu recebo outro parágrafo lorem ipsum. E vamos apenas adicionar algumas coisas únicas aqui. Então nós temos um parágrafo e vamos em frente e certifique-se de que o parágrafo e o botão e tudo o que eu fiz lá foi selecionar uma área e, em seguida, em um Mac, eu apertei Command click. No Windows, é provável que ele seja alterado ou clique com a tecla Control pressionada. Então eu posso digitar em dois lugares ao mesmo tempo. Classe, costume, classe. E então vamos em frente e trabalhar com alguns desses seletores agora. E eu vou fazer isso um pouco menor aqui para que possamos ver tudo em uma tela. Então vamos em frente e selecione R um e altere isso. E, na verdade, antes de fazermos isso, é assim que nossa página se parece. Nós temos dois parágrafos e eu vou fazer isso um pouco menor lá. Temos um título, tivemos um botão que não faz absolutamente nada, e temos dois parágrafos. Este parágrafo neste botão compartilha um nome de classe e o H1 e o parágrafo são por si mesmos. Na verdade, vamos fazer um extra. Eu só vou jogar isso aqui. Isso não foi planejado, mas vamos jogá-lo aqui de qualquer maneira, vamos adicionar um ID a este parágrafo. Chama-se ID do cliente. E selecione, vamos selecionar cada um deles. Vamos selecionar o nosso H1. Então poderíamos dizer seletor. E talvez eu faça aquele seletor maior. Um texto de ponto alterado via jQuery. Agora isso só vai selecionar este H1, mas se houver múltiplo, cada um vai mudar os dois. Então vamos fazer isso. Nosso título personalizado um, nosso título personalizado para. Vamos em frente e atualizar nossa página. E ele diz, você pode realmente ver que ele pisca lá quando eu atualizar uma e outra vez e outra vez. E quando visualizo o código-fonte aqui, vemos nosso título personalizado um, nosso título personalizado também. E nós mudamos ambos para mudar via jQuery com uma única linha de código. Quão bom é isso? Então, selecionamos todos os H 1s na página e mudamos para mudar via jQuery. Agora, em JavaScript regular e JavaScript baunilha, temos que percorrer todos eles e alterá-los um por um. Jquery faz isso automaticamente para nós. E vamos em frente e selecionar todo o nosso parágrafo para que possamos fazer cifrão, parênteses, parágrafo, ponto Html em vez de texto. E vamos fazer uma etiqueta ousada aqui. Isso é negrito e substituído. E assim sabemos o que isso vai fazer. Acabamos de ver este exemplo é um H1 vai selecionar este parágrafo e este parágrafo, ele não se importa com o nome da classe ou a idéia no momento, nós não estamos selecionando esses. Vamos apenas selecionar os dois parágrafos. E vamos em frente. E quando atualizamos nossa página, você pode ver que ela pisca novamente rapidamente. Se eu atualizar rápido o suficiente e uma e outra e outra vez. E ele diz, isso é negrito e substituí-lo selecionado ambos. Agora o que é bom é que você pode selecionar várias coisas. Digamos que não quiséssemos fazer isso. Queríamos selecionar todos os H 1s e todos os parágrafos, mas não queríamos selecionar nosso botão. E queríamos mudar os textos internos que você mudou via jQuery. Vamos em frente e executar isso. Então ele vai selecionar este, este, este, e este. E ele vai mudar esse texto para mudar via jQuery. Vamos nos certificar de que está funcionando, digamos, número dois. E selecionou todos eles. E tudo o que fizemos, havia outro seletor CSS regular, dissemos h uma vírgula p. Então selecione o H1, também selecione todos os parágrafos. Agora, porque isso ainda é JavaScript sob o capô, podemos selecionar um parágrafo que é como um parágrafo por sua ID de cliente e não ID sua classe. Vamos fazer a aula personalizada de ponto. E de onde eu estou obtendo isso é taxa aqui, ponto de classe personalizada e ponto de classe personalizada. Mas desta vez eu estou selecionando apenas um parágrafo com classe personalizada ponto nele. Ainda não estou selecionando o botão. Se eu quisesse selecionar os dois, eu me livrava do p, mas eu quero apenas p com uma classe personalizada. E então posso dizer que o texto dos pontos mudou novamente. E vamos adicionar um número três aqui. E quando eu voltar para o meu navegador aqui e atualizar o que isso está realmente fazendo, acredite ou não, ele está selecionando isso, isso, isso e isso e alterando para mudar a visão jQuery número dois, que vemos aqui. E então porque novamente, é JavaScript sob o capô, ele vai executar uma linha de cada vez. Então ele executa essa linha, em seguida, ele vai executar esta linha, e ele seleciona nosso parágrafo e altera-lo para alterar visão jQuery número dois. Mas, em seguida, ele também selecionar P ponto classe personalizada. Esse é esse, e sobrescreve uma segunda vez. Agora podemos selecionar por um ID também. Então vamos em frente e selecionar um ID e não precisamos usar P personalizado ID, embora pudéssemos, se quiséssemos, não precisamos realmente desse seletor de elemento. E lá poderíamos usar a identidade. O mesmo com a nossa turma. Mas porque uma idéia ao contrário de ser completamente única em sua página ou em sua página, nunca deve haver mais de um ID de cliente. Onde há pode haver mais de um nome de classe com exatamente o mesmo nome. Deve haver apenas um ID de cliente ou um ID específico por elemento. E assim podemos selecionar isso sem ter que selecionar ou especificar um parágrafo. Porque nosso navegador sabe que se seguirmos as regras, só haverá um ID de cliente aqui. E podemos dizer que este texto de ponto mudou novamente, e vamos fazer um número quatro lá dentro. E então é assim que o código se parece atualmente. Então ele vai selecionar tudo sobre h 1s e nossos parágrafos. Altere-o para aquele que termina em número para selecionar o parágrafo com uma mudança de classe personalizada para aquele que termina no número três. E, em seguida, selecione apenas acontece de ser um parágrafo que já está selecionado aqui em cima. Mas vamos selecionar o ID do cliente, que é o parágrafo. E nós vamos mudar este para mudá-lo novamente, número quatro. E quando atualizamos nossa página, mudou novamente o número quatro. E agora nossas páginas são imediatamente mais interativas. Podemos sobrescrever qualquer HTML que tenha sido dado. Então, se alguém lhe der uma página HTML chata e você quiser mudar um monte de coisas, mas você não tem permissão para tocar no HTML, o que realmente acontece. Às vezes você pode usar JavaScript e jQuery para alterá-lo. Agora, eu não vou falar muito mais sobre seletores neste ponto só porque ele realmente é apenas um seletor CSS e isso é mais uma coisa CSS. Lin, É uma coisa JavaScript ou jQuery. Então, sempre que você quiser selecionar algo muito específico, você pode selecionar seu corpo. Você pode selecionar algum elemento, talvez um parágrafo, e então você pode selecionar todas as tags fortes dentro dele. Este é apenas seletor CSS regular. Então você está selecionando seu corpo, selecionando todos os parágrafos dentro do corpo, selecionando todos os elementos fortes dentro de um parágrafo. E então estaríamos mudando. Nós não temos esse exemplo de configuração, mas se você quiser, isso seria uma, uma pequena coisa divertida para configurar para o seu projeto ou não seu projeto, mas sua lição de casa para esta lição em particular é criar um seletor muito específico, faça o texto de ponto e, em seguida, altere o texto nele. Vá em frente e dê uma chance. Quando terminarmos, vamos olhar para alterar alguns HTML na página dinamicamente. 6. HTML modificando dinâmico: Vamos dar uma olhada em como podemos adicionar HTML dinamicamente a uma página. Então, para isso, precisamos de um exemplo. Vamos dar a nossa página uma div com um ID de cliente de ID personalizado. E não vai haver nada aqui, por isso vai estar completamente vazio. E sabemos que se voltarmos ao nosso navegador e atualizarmos sua página, não haverá nada lá dentro. E se olharmos para o nosso código-fonte, ele só diz ID personalizado. Não há nada lá dentro. Vamos em frente e adicionar algum HTML personalizado lá. Então, nas últimas duas lições, você viu que nós selecionaríamos esse ID com ID personalizado. E eu estou usando o seletor de id aqui, dot txt, texto aqui. E então nós estávamos usando taxed e isso é, isso é tudo, bem e bom. Mas isso não vai realmente adicionar qualquer HTML. Então, se quiséssemos adicionar um H1 e aqui podemos dizer H1, HelloWorld. E, infelizmente, isso não vai fazer o que esperamos que faça. E vamos voltar ao nosso código aqui. Ele realmente vai imprimir H1, HelloWorld oito barra H1. Talvez não seja o que queremos. Talvez nós queiramos realmente adicionar algum, algum HTML adequado aqui. Então, se inspecionarmos isso, entramos em nossos elementos e estragamos isso para fazer aquele toque menor. Podemos realmente ver que não há nenhum elemento, é apenas texto simples. E isso nem sempre é o que queremos. Em vez disso, o que queremos é usar HTML. E assim como isso funciona é que você tem um seletor, você faz pontos HTML abrindo parênteses, e então você coloca seu HTML lá. Seja qual for o HTML, pode ser uma string como esta, ou pode ser uma variável. E então você fecha com seus parênteses de fechamento. E o ponto-e-vírgula é opcional. Então, às vezes vou usá-lo, às vezes não usá-lo. Vamos em frente e atualizar nossa página. E agora vemos que realmente temos um HelloWorld H1 adequado. E em nosso modelo de objeto de documento em nosso código-fonte aqui, o que nosso navegador vê como, temos um H1 adequado. Então o que é legal sobre isso é que agora podemos entrar aqui e vamos escrever um span com uma classe de classe personalizada, span, barra de texto span. Então isso está ficando um pouco difícil ler só porque está começando a ser embrulhado, em várias linhas aqui. E porque estou bem ampliado com o meu editor. Mas se atualizarmos, veremos que há uma extensão. Agora podemos ir em frente e selecionar essa extensão. Uma vez criado, podemos ir em frente e selecionar esse texto de extensão alterado. E nós vamos ver que ele vai do texto span para a mudança. Simplesmente assim. Agora, o espaçamento está um pouco fora e este é um exemplo meio feio, mas é um exemplo muito funcional. E jQuery não é sobre fazer páginas lindas. É para isso que serve o CSS. Jquery é destinado a ser uma maneira mais curta de escrever JavaScript. Portanto, há uma diferença entre HTML e texto. Aprendemos sobre HTML na próxima lição. Vamos em frente e aprender sobre texto de ponto. O que eu gostaria que você fizesse para esta lição em particular é ir em frente e selecionar um ID ou um elemento ou melhor não tem que ser Beidi poderia ser pelo nome da classe, poderia ser apenas selecionar todas as divs na página, fazer dot HTML, e então escrever alguns HTML real lá. E tome nota. Você sempre pode clicar com o botão direito do mouse inspecionar, vá para a guia Elementos E você pode ver que existem elementos HTML reais aqui. Uma vez que você fez isso, vamos para a próxima lição. 7. Texto de alteração dinâmica: Vamos dar uma olhada formal no texto de mudança. E temos trabalhado muito com isso até agora, muito, muito em praticamente todas as lições até agora, talvez até em todas as lições até agora. Mas vamos dar uma olhada formal nisso. E assim, na última lição, nós olhamos para o ponto HTML. Neste, vamos estar olhando para texto de ponto. E então o que podemos fazer aqui é não fazer uma div ou um H1. Vamos fazer um elemento de seção. E digamos que coloque algum código HTML aqui. E assim podemos selecionar este elemento de seleção ou seção com sinal de dólar, parênteses, ponto de seção. E então podemos mudar o HTML ou o, ou o texto. Agora, se quiséssemos realmente colocar código HTML aqui, não podemos usar HTML. Então, se eu colocar uma etiqueta negrito versus negrito. Então esse é o jeito antigo de fazer ousado. Esta é a nova maneira de agir ousado. Apenas salve isso e atualize minha página. Na verdade, ele tenta renderizar-se. Então, se eu entrar na seção aqui, ele consertou meu B e elementos fortes. E isso é porque estamos injetando HTML na página. Mas não precisamos fazer isso. Se realmente quiséssemos ver este código, podemos apenas fazer texto de ponto. E essa é a diferença entre dot txt index.html é que quando eu atualizo a página, ela realmente aparece para que eu possa escrever HTML aqui agora, que é realmente ótimo para codificar sites, codificar blogs, coisas assim, sempre que você precisar realmente exibir algum tipo de código. Agora sua tarefa para esta lição em particular é selecionar um elemento. Não precisa ser uma seção, pode ser qualquer elemento. E, em seguida, dentro desse elemento com jQuery, eu quero que você use dot txt n dot HTML e escreva algum HTML dentro dele e veja qual é a diferença realmente. Agora você já viu qual é a diferença na minha tela, mas não é exatamente o mesmo que realmente obter algumas mãos sobre a experiência. Então vá em frente e tenha alguma experiência prática. E quando você terminar isso na próxima lição, vamos em frente e falar sobre como obter formulário porque os valores de formulário não são exatamente os mesmos. 8. jQuery recebendo valores de formas: Vamos falar sobre como podemos obter valores de formulário agora. Então, nas últimas duas lições, fizemos essa coisa legal onde fizemos ponto HTML. Também fizemos texto de ponto. Agora, isso é legal e que funciona com elementos como uma seção que tem conteúdo dentro dela, conteúdo no lado dela. E isso é bom. Mas e se estivermos trabalhando com um elemento que não tem conteúdo dentro dele? E se estivermos trabalhando com um elemento de entrada? Agora no elemento de entrada não tem uma tag de fechamento. Não há texto dentro dela. Como lidamos com isso? Então, primeiro de tudo, vamos salvar isso. E é assim que a nossa página se parece. É apenas um elemento de entrada. É um elemento de entrada muito chato. Mas o que podemos fazer aqui é que podemos agora ir em frente e colocar o texto lá dentro. Então vamos dar a isso um valor padrão. Olá mundo, apenas o tipo defacto de textos que todo programador tende a usar. E diz “Olá mundo”. E se quiséssemos ser capazes de extrair esse valor? Bem, vamos começar selecionando primeiro. Nós vamos selecioná-lo por uma entrada é a única coisa em nossa página e nós podemos apenas selecioná-lo por seu único valor de entrada. E depois podemos fazer Dot Val. Agora há duas coisas que podemos fazer aqui, e eu realmente vou falar sobre DOT test.html bem em apenas um momento. Mas podemos fazer isso. O valor constante é igual ao valor do conjunto console.log. E tudo o que estamos fazendo aqui é novamente, nós estamos, nós estamos selecionando esse ponto de entrada. E então usamos Lotvall, não valor de ponto, dot va al. E nós não estamos colocando nada dentro dos parênteses aqui, é apenas vazio. Então, quando eu atualizar a página e ir para o meu console, ele diz olá mundo. E isso está tirando esse valor daqui para que possamos mudar esse valor para Hello World 1-2-3. E quando eu atualizar a página, ele diz Olá 1-2-3 ou helloworld 1-2-3 dentro do console. E se quiséssemos mudar isso? Bem, isso é muito fácil também. Poderíamos mudar isso. E poderíamos dizer, isso é alterado e sempre simplesmente fazer é adicionar um valor. Agora, nós não queremos necessariamente trabalhar com isso mais e vamos nos livrar disso. Então vamos selecionar essa entrada, dizer esse valor. Este aqui em cima tem de ser, isto está mudado. Então vamos em frente e verificar isso. E diz que isso foi alterado, mas em nosso código-fonte, diz olá mundo 1-2-3. Ainda assim. Acontece que é que JavaScript e jQuery juntos ou substituindo esse valor. E assim você pode realmente ver quando eu atualizar rápido o suficiente ele pisca um pouco. Aquele pequeno truque legal com Dot Val. Quando está vazio, podemos fazer a mesma coisa com HTML de ponto e texto de ponto. Então vamos em frente e dar a isso um pequeno exemplo rápido também. Seção que apenas jogar algum lorem aqui, algum lorem ipsum I tipo LO REM guia hit no VS Code e ele automaticamente preenche-o com Lorem Ipsum para mim. Então eu não tenho que pensar em algum tipo de texto falso porque às vezes é difícil encontrar exemplos como esse. Então o que podemos fazer aqui é agora podemos selecionar esta seção e podemos pegar esse texto. E podemos colocar isso em uma variável também. Então, o texto const é igual ao texto console.log. E quando eu atualizar esta página, nós temos todo esse texto aqui, e nós também temos todo esse texto aqui. Agora, observe que ele realmente também tem o espaço em branco. E esse espaço em branco, se eu atualizar um código-fonte vem do vermelho aqui todo o caminho até a nova linha lá dentro. E também há espaço extra em branco no final. Até o final da seção. Podemos fazer a mesma coisa com dot HTML, e vamos fazer isso em negrito. Então vamos ousar a palavra REM. E podemos ver que está arrojado aqui. E está arrojado aqui. Agora, aqui está a diferença. Quando fazemos texto de ponto. Observe que este aqui está em negrito, mas REM aqui no nosso console, ele tem o HTML retirado dele. Então, tenha cuidado lá. Então essa é uma lição divertida de três em uma. O que eu quero que você faça é ignorar isso por enquanto. Ponha isso no bolso de trás. E eu quero que você crie um elemento de entrada e use dot val para definir o valor do elemento de entrada. Quando você terminar isso, vamos em frente e falar sobre como podemos adicionar HTML dinamicamente a uma determinada parte de uma página, como dentro de um elemento na frente ou na parte de trás dela. 9. Prepend e anexar: Ok, vamos falar sobre anexar e prepender HTML. E então o que vamos fazer é selecionar um elemento. E então nós vamos adicionar um pouco, mais algum elemento ou algum mais texto na parte de trás dele e a frente dele dentro desse elemento particular. Então o que vimos antes é que poderíamos ter um H1 com algum texto aqui. E nós fomos capazes de selecionar esse e, em seguida, usar dot HTML para colocar mais HTML lá. Mas digamos que quiséssemos adicionar uma extensão no final ou que quiséssemos adicionar uma extensão no início. Bem, nós teríamos que extrair tudo isso armazenado em uma variável, sobrescrever essa variável com HTML dentro dela. Na verdade, há uma maneira melhor de fazer isso. Então, primeiro as coisas, vamos em frente e fazer uma função pronta para o documento. E isso só nos permite colocar nosso código jQuery aqui com segurança. Vamos em frente e selecionar aquele h um. K um está selecionado. Agora eu posso usar append, APP END OU prepend. Acrescentar vai para a parte de trás, prepend vai para a frente. Então vamos fazer append, e vamos adicionar algum HTML aqui. Vamos adicionar forte. Isto é ousado. E isso é, novamente, que vai selecionar este H1, e ele vai apenas acrescentar algumas coisas aqui. Então vamos em frente e salvar nossa página e atualizar. E você pode realmente ver que quando inspecionamos aqui h um, no final, temos HTML, temos forte, isso é ousado. E, de fato, esse foi um mau exemplo porque é difícil de ver. Vamos sublinhar. Lá vamos nós. Este é Bolden está sublinhado. Vamos ter certeza que isso é consistente. Copywriting consistente lá. Então isso tem algum texto aqui. Isto é sublinhado. Poderíamos também selecionar esse mesmo H1 e poderíamos fazer prepend. E vamos fazer uma contagem seis. Isto é itálico. E o que isso vai fazer é colocar algum código no início. Código aqui. E isso é exatamente o que ele faz. Diz que é itálico no nosso H1, temos um texto para você, mas no nosso código-fonte, não temos nada disso. E então agora estamos marcando dinamicamente nossa página apenas usando JavaScript e jQuery. Agora, uma coisinha divertida aqui é que se quiséssemos, poderíamos acorrentá-los juntos. Então vamos em frente e colocar isso em uma nova linha porque JavaScript não se importa com novas linhas. E vamos em frente e nos livrar deste. E então nós vamos selecionar este, e então nós vamos anexar, então nós vamos preceder. E o que isto parece essencialmente é apenas isto. Vamos mudar isso juntos. Mas podemos colocar isso em novas linhas. Então parece um pouco mais agradável. E isso aplicará ambos juntos. Então vamos aqui e aqui, número dois, saibamos que isso está realmente funcionando, que isso não é apenas executar o mesmo código do último exemplo. Então, vamos atualizar nosso código-fonte e vemos que nada mudou aqui. Nosso jQuery mudou, mas o dom real não mudou o Modelo de Objeto Documento. Vamos atualizar o modelo de objeto do documento. Vamos ver que este é o itálico número dois e este é sublinhado número dois. E isso funcionou. E tudo o que fizemos foi em vez de selecionar os dois, apenas selecionamos um. Usamos um seletor e o reutilizamos. Então nós anexamos e nós precedemos. Agora, o que é legal sobre encadeamento aqui é que também podemos fazer 2.txt. Isto mudou. Texto, depois anexar e preceder. E então algum texto aqui vai dizer, este é um texto de mudança e mudou tudo para mim. Então este não tem mais nenhum dos conteúdos originais da minha página. Jquery agora substituiu tudo e ele tem precedido e anexado alguns HTML também. O que eu gostaria que você fizesse como pequena tarefa divertida é ir em frente e dar uma chance a isso. Não precisa se preocupar com a parte do texto. Mas vá em frente e anexe algum HTML, prepend algum HTML2, qualquer seletor de sua escolha. E quando terminar isso, acorrente-os como eu fiz. Quando você terminar isso, vamos olhar para selecionar um elemento e, em seguida, adicionar algum HTML fora dele, mas antes e depois. Então alguns aqui e alguns aqui, porque agora prependem e anexam apenas trabalho no interior. Queremos trabalhar do lado de fora. 10. Antes e depois depois depois: Em nossa última lição, anexamos e anexamos alguns HTML à nossa página nesta lição, vamos em frente e adicionar algum HTML antes e depois de um elemento. Então vamos dar a isso uma div com um ID de alvo. E não vai haver nada aqui. Agora, eu gostaria, vamos colocar algo aqui. Adicione HTML antes e depois disso. E então vamos em frente e porque tudo em jQuery é basicamente select ou base, vamos selecionar esse alvo. Podemos até fazer div ID alvo. Então podemos fazer ponto antes. E isso é literalmente ponto antes. E vamos colocar um h3 aqui. Helloworld, Este é um título. E vamos fazer isso de novo. Vamos selecionar uma Div selecionada por seu ID, e então vamos fazer depois. E vamos fazer um parágrafo aqui. Este é um parágrafo. E então o que nossas páginas agora vamos fazer é selecionar este elemento. E antes deste elemento, pouco antes dele. Bem aqui dentro. Se eu pudesse soletrar alguma palavra corretamente, bem aqui vai dizer, vai dizer olá mundo, isso tem um título. E depois ele vai dizer com algum tipo de parágrafo aqui. Este é um parágrafo e este vai realmente ser um h3. Então, vai parecer algo assim. Agora vamos nos livrar disso para não termos isso aqui. E exclua, exclua, exclua, salve. Vamos ver o nosso código-fonte primeiro. Certifique-se de que ele não está realmente adicionando nada lá. E vamos em frente e atualizar este Hello World. Este é um título em HTML antes e depois disso, e este é um parágrafo. E se não tiver a consola aberta ou as ferramentas de desenvolvimento, pode clicar com o botão direito do rato. Você pode ir para Inspecionar, abrir a guia de elementos, e você pode ver que agora há um H3. Há a mesma div que originalmente alvejamos, e há um parágrafo depois dela. Agora, assim como na última lição, podemos, se quisermos acorrentá-los juntos. E então nós só precisamos selecionar isso uma vez e então nós poderíamos dizer antes e depois e fazer essas coisas. Vamos continuar e salvar isso na verdade, vamos em frente e garantir que o cache não está acontecendo. E vamos colocar um número dois lá para sabermos que isso está funcionando da maneira que esperamos que funcione. Então vá em frente e atualize. Olá mundo. Este é o título número dois. Este é um parágrafo número dois. E é assim que adicionamos HTML antes e depois de um elemento. Agora, o que eu gostaria que você fizesse é a mesma coisa. Apenas imite o que eu tenho feito nesses vídeos só para ter alguma experiência prática. E novamente, eu não posso dizer isso o suficiente é que quando você está aprendendo a codificar, você pode assistir quantos vídeos quiser. Mas nada vai se comparar a realmente obter alguma experiência e ser capaz de escrevê-la e ser capaz de criar memória muscular. Então vá em frente e dê uma chance. Quando você terminar isso, vamos para a próxima lição, onde nós realmente selecionamos um elemento da página e completamente excluído. 11. Deleting elementos: Vamos dar uma olhada em como podemos excluir um elemento de uma página. Então, para isso, vamos criar um exemplo mais complexo. Vamos criar uma div. E vai ter um parágrafo aqui. E vai ter que baixá-los aqui. E vai ter outro parágrafo aqui, mais Lorem, e outro parágrafo aqui com mais Lorem. Então, temos três parágrafos aqui. E digamos que queríamos selecionar essa classe média, parágrafo do meio. E quando nós visualizador página, sim, é chato, mas isso vai ser um bom exemplo. Então temos três parágrafos aqui, dentro de uma div, e um tem uma classe. Então vamos em frente e criar um seletor interessante aqui. Mas antes de fazermos isso, vamos nos certificar de que nosso jQuery pode ser carregado. Função Document.ready. Soletre direito para a terceira função. E então podemos colocar nosso jQuery aqui. Vamos em frente e selecionar isso. Agora há algumas maneiras diferentes de selecionar este parágrafo em particular, mas vamos em frente e selecionar um. De uma forma interessante, uma maneira que ainda não vimos. Então, vamos selecionar todas as divs na página. Então vamos selecionar todos os parágrafos dentro da div. E então vamos nos certificar de que estamos selecionando apenas os parágrafos que têm o parágrafo do meio da classe, o parágrafo do meio. Então agora estamos entrando em um seletor interessante aqui. E para excluir isso, tudo o que temos que fazer é digitar dot, remover parênteses. E isso será literalmente excluído do nosso modelo de objeto de documento. Então, se visualizarmos nosso código-fonte aqui, temos três parágrafos. Isto ainda aparece. Mas se eu atualizar a página, você pode ver que ela não aparece. E se eu entrar em meus elementos aqui, nós só temos dois parágrafos. Nenhum deles tem o parágrafo do meio da classe. Agora o que é legal sobre isso é porque este é um seletor de classe. Podemos dizer parágrafo do meio. Não é mais o parágrafo do meio, mas vamos fingir que é. Podemos selecionar ambos ao mesmo tempo e excluí-los exatamente ao mesmo tempo. Então agora ele vai selecionar nossa div, selecionar todos os parágrafos com uma classe de parágrafo do meio. Bem, olhe, dois deles estão destacados lá. São dois deles. E vamos apagar os dois. Então, se vermos nosso código-fonte novamente, ele ainda aparece como normal. Ainda há três parágrafos lá, mas o JavaScript está substituindo nossa página e está se livrando dos outros dois. E aqui temos uma div e um único parágrafo. Não temos mais três parágrafos. Agora isso é completamente seguro de fazer. Isso nunca excluirá ou removerá nada do seu computador. Ele só vai funcionar com código dentro de sua página com base no seletor que você fornecer. Agora, se você quiser fazer, e você também pode apenas dizer, hey, selecione cada parágrafo, removê-lo. Mas como todos os nossos parágrafos estão em uma div, podemos selecionar essa div e podemos remover isso também. E podemos ver em seu modelo de objeto de documento que div não existe. Nosso código-fonte não mudou, mas JavaScript está substituindo-o. Então, o que eu gostaria que você fizesse como uma pequena tarefa divertida, vá em frente e crie qualquer tipo de exemplo com HTML. Selecione um elemento específico, apenas um deles e, em seguida, remova-o. Verifique se foi removido aqui. Verifique se foi removido aqui. E uma vez que você tenha feito isso, vamos para a próxima lição onde selecionamos um elemento e depois nos livramos de todos os seus elementos filhos. Então vamos esvaziá-lo. 12. Aper elementos criança: Haverá um momento em que você precisa selecionar um elemento e todos os seus elementos filhos precisam ser removidos. E assim poderíamos escrever algum seletor chique para selecionar praticamente tudo. Então poderíamos dizer, por exemplo, div selecionado, e é como tudo dentro desse ponto div remove. Mas há uma maneira melhor de fazer isso. E então vamos em frente e criar um exemplo aqui. Podemos dizer div, e este vai ser o nosso elemento pai. Então elemento pai, e este é um comentário HTML aqui. Bem ali. Vamos escrever uma palavra forte e ousada aqui. Itálico, isso, palavra itálica aqui. E vamos também selecionar ou não o Criar um parágrafo com algum ipsum lorem lá. Então, se vermos nossa página, tudo bem, nada de mais. Ainda temos essa div. E se quiséssemos selecionar esta div? E vamos dar a isto uma identificação do pai. E se quiséssemos selecionar esta div ID pai e nos livrar de todas essas coisas aqui? Isso é muito, muito fácil de fazer. E vamos tornar isto um pouco mais complicado. Então, primeiro de tudo, vamos começar com div, selecione o ID pai. E então nós poderíamos apenas fazer ponto vazio. E o que isso vai fazer é selecionar essa ID, selecionar essa div, e apenas se livrar de tudo dentro dela. Agora podemos encadear um ponto HTML e poderíamos dizer algo como olá mundo. E que se livrou de todos os elementos dentro deste div e substituí-lo por Olá mundo. Agora, se olharmos para o nosso código-fonte, todo o nosso código-fonte regular ainda está lá. Isso não vai mudar ao longo deste curso. Todo o nosso código-fonte vai ser exatamente como nós escrevemos. O Javascript continuará a substituí-lo. Então isso vai ser exatamente o que nós escrevemos e JavaScript vai mudá-lo. Então, de agora em diante, provavelmente não vou mostrar o código-fonte muitas vezes só porque, bem, ele vai funcionar da mesma maneira uma e outra e outra vez. Agora, vamos em frente e tipo de mudanças em JavaScript adequado. Para que pudéssemos fazer const. Pai é igual a dois. E quando você está escrevendo jQuery e você vê um cifrão na frente de um nome de variável. Isso geralmente significa que há algum tipo de seletor. E assim podemos ir em frente e selecionar isso. E então, se quiséssemos, poderíamos dizer parent.value vazio ou pais ponto coisas HTML aqui. E nós estamos indo para CSS coisas aqui. Agora, o que é interessante sobre isso é que às vezes você só precisa esvaziar um elemento só para outra coisa carregar um pouco mais tarde. Mas se você precisa que isso aconteça imediatamente, nós realmente não precisamos usar vazio qualquer coisa. Podemos selecionar todo este elemento pai e podemos sobrescrever todo o HTML com uma frase que diz coisas aqui, Stephan aqui, e não há elementos filho. Agora, se você está apenas entrando no mundo dos modelos de objetos de documentos e você é como o que é aparente, o que é uma criança? Essa é uma boa pergunta. Um elemento pai contém elementos filho. Um elemento filho está dentro de um elemento pai. Isso é tudo o que é. Então vamos em frente e dar este exemplo, uma foto aqui, uma pequena prévia. E nós vamos ver aqui, nós realmente sobrescrevemos tudo isso, então nós não tivemos que usar ponto vazio. Estamos realmente entra é se você tem algum processamento para fazer ou se você precisa buscar dados de como uma API, você poderia pai ponto vazio. Vamos apagar esse ponto pai vazio. E, em seguida, fazer uma coisa para que você possa buscar algumas informações de uma API em algum lugar. E talvez demore três segundos. E então você pode dizer pai dot HTML e colocar algum novo HTML lá. Na próxima lição, vamos começar a falar sobre ouvintes de eventos, sintaxe de ouvinte de eventos e como podemos fazer algo disparar quando clicamos nele. 13. Ouvir eventos e o evento de clique: Bem-vindo ao mundo dos ouvintes de eventos. Ouvintes de eventos são coisas muito, muito interessantes. Então a primeira coisa que precisamos fazer é olhar para a sintaxe, kay? Então, na verdade, a primeira coisa que precisamos fazer é falar sobre o que é um ouvinte de eventos. Um ouvinte de eventos é. Quando você tem um botão na página e diz que diz clique em mim dentro dele e você clica nesse botão. O que é suposto acontecer? Isso não é ouvinte de eventos. Ou se você tiver um elemento de entrada e começar a digitar nele. Cada uma dessas letras que você pressiona no teclado é um evento. Sempre que você mover o mouse, quando você redimensiona sua tela, sempre que você se concentrar em um elemento de entrada ou desfoque de um elemento de entrada ou como deixar o elemento de entrada. Estes são todos eventos e nós vamos estar enfrentando um monte destes neste curso. Então, primeiro as coisas, vamos dar uma olhada em algumas da sintaxe aqui. Então, há duas maneiras de fazer isso. Há o, há o caminho certo que você está indo para ver nos documentos jQuery. E então há, sem dúvida, uma maneira ainda melhor de fazê-lo, que será uma prova futura para Ajax e documentar chamadas de modelo de objeto. Então vamos dar uma olhada em ambos. Então primeiro temos algum tipo de seletor e assim podemos selecionar o botão. E então podemos dizer ponto clique. E isso vai ter uma função. E então, sem a função, isso é o que parece. Isso é um ouvinte de eventos. Agora esta função que estamos passando aqui é meramente o que queremos fazer. Então, podemos dizer console.log. Estou clicado. E porque temos este botão aqui nesta página que diz clique em mim, vamos em frente e dar uma chance a isso. Diz “Clique em mim” e no console aqui, toda vez que eu clicar nele, ele diz que eu sou clicado. É isso. Isso é tudo o que há para ouvintes evento com jQuery é um super, super fácil. Agora há outra maneira de fazer isso. Vou comentar isso. E, sem dúvida, assim é melhor. Você pode ter um botão de ponto seletor e, em seguida, você diz ponto sobre o que você quer que ele faça. O que você quer que ele ouça? Você queria que ele ouvisse um evento de clique. E então você passa em uma função console.log. Isso pode ser clicado para atualizar sua página. E diz que isso é clicável para agora Justin, realmente tornar a vida louca difícil e difícil de aprender jQuery. Vamos aprender uma terceira maneira. E esta é a melhor maneira, mas não vamos fazer o melhor. Íamos fazer o caminho do meio seguindo em frente ao longo deste curso. Mas a melhor maneira é documento ponto no clique, e, em seguida, seu botão, e, em seguida, sua função, console.log. E vamos apenas registrar 33333. E isso funciona também. E então há realmente uma razão para fazermos isso de forma diferente aqui. E então vamos usar esse método daqui para frente apenas porque é o mais fácil de escrever para entender. E este é um pouco mais complexo, mas há uma razão para fazermos a onda complexa e a maneira complexa é porque e se nós ajax ou dinamicamente criarmos um botão? E vamos em frente e fazer isso e eu vou te mostrar um exemplo aqui. Identificação Div. Coloque. Botão aqui. Vamos em frente e selecionar isso. Então podemos fazer constante. Vamos chamá-lo pai é igual a esse seletor. Não, isso é seletor de identificação. Então podemos fazer o HTML parent.value. Podemos colocar um botão aqui. Clique em Me barra botão, botão, botão. E vamos em frente e nos livrar do Click me um como um botão dinâmico Click Me. Isso é o que vai ser. Clique em Me botão dinâmico, ele aparece. Ainda não há ouvintes de eventos. Vamos em frente. E digamos que esse ouvinte de evento foi criado primeiro. Então, como JavaScript e jQuery vai funcionar é de cima para baixo. Ele vai selecionar todos os botões na página, e ele vai registrar uma função de clique. Mas atualmente, neste momento, não há nenhum botão na página, há nada para clicar. Em seguida, selecionamos esse pai e colocamos um botão na página. E quando salvamos isso e atualizamos, vemos que nada funciona. Agora, isso é bom. Se pudermos mover este código para baixo aqui. Porque este botão agora vai existir na página. E então podemos registrar o ouvinte de eventos. E isso vai funcionar. Agora, esse nem sempre será o caso. Haverá muitas vezes em que um ouvinte de eventos é registrado. Mas então suas páginas vão mudar dinamicamente. E isso é muito, muito, muito comum em sites modernos. Então, o que fazemos? Podemos usar esta opção? Vamos mover isso para cima e vamos comentar isso para que saibamos que não vai funcionar. Então vamos agora selecionar um botão e, em seguida, onclick e vamos dizer quando esse botão é clicado, log do console, isso é clicável dois. Agora o mesmo problema vai acontecer aqui. Vai procurar por todos os botões da página. Ele vai tentar registrar um evento onclick. Não vai funcionar para nós. Vamos atualizar a página e ver que este botão sempre que eu clicar nele não funciona. Ok, então isso não é bom. Isto é bom, sintaxe limpa, isto é bom para escrever. Não é bom o suficiente para conteúdo dinâmico. O conteúdo dinâmico vem aqui. E vamos mover isso para cima. E então o que isso está dizendo é selecionar o documento inteiro quando você clica no documento e você clica no botão. Então pode ser este botão em particular aqui ou o que você quiser dar a ele uma identificação ou uma classe ou qualquer coisa assim. Este é o seu seletor. Em seguida, faça uma função e isso vai fazer seus sites prova dinâmica, prova Ajax. Então, quando as coisas carregam dinamicamente em sua página usando outro JavaScript, isso ainda vai funcionar. E então vamos em frente e atualizar a página. E vemos que isso funciona agora. Registamos um clique eventos em todos os botões, mas anexamos ao documento. Então, mesmo que haja algo dinâmico acontecendo, ainda podemos executar isso. Então é muito bom saber isso. Coloque isso no bolso de trás por enquanto. Mas vamos escrever assim avançando só porque é um pouco mais limpo. Agora, o que eu gostaria que você fizesse é criar um ouvinte de eventos, algo assim. Selecione um botão. Ponta no ponto. Seu primeiro parâmetro será o que estamos procurando? Estamos à procura de um evento de clique. Quando você clica no botão, o que acontece? Então você escreve uma função. Isso é chamado de função de retorno de chamada. E sempre que você clicar neste botão, o que ele vai fazer? Vá em frente e dê uma chance. Uma vez que você é feito com isso, vamos para a próxima lição onde falamos sobre mover o mouse sobre um elemento e fora de um elemento. Então vamos pairar. 14. Eventos de pico: Há uma maneira de registrar um evento quando você coloca o mouse sobre algo e quando você movê-lo para fora de algo. E para isso, vamos em frente e escrever um pouco de CSS. Então vamos adicionar um pouco de estilo aqui, e vamos criar uma caixa. E vai ter uma largura de 200 pixels, altura, 200 pixels. A cor de fundo vai ser preta. E vamos colocar no meio da nossa página, vamos fazer margem, 50% ou 50 pixels superior e inferior e direito no meio da página. E então agora precisamos ir e criar uma caixa e, e olhar para este CSS. Este é um ID para um seletor de caixa. Caixa. Posso abreviar isso. Então eu não vou colocar nenhuma mensagem lá. E então para selecionar essa caixa, tudo o que eu tenho que fazer é escrever exatamente a mesma coisa. E então agora estamos escrevendo a mesma coisa em basicamente três linguagens de script diferentes. Temos HTML, CSS e JavaScript. Então agora podemos dizer caixa de ponto no mouse enter. E o que fazemos quando colocamos o mouse dentro desta caixa, que é log de pontos do console, você digitou. E diga que seu mouse está pairando sobre esta caixa. Então, quando atualizamos a página, temos essa caixa preta. E toda vez que coloco o mouse sobre ele, ele diz que seu mouse está pairando sobre esta caixa. E assim ele só faz uma vez enquanto eu estou em cima desta caixa. E quando me mudo, nada acontece. Quando me mudo, acontece de novo. Agora, se você se registrar quando você mover o mouse para fora, muito, muito simples. Agora podemos encadear estes juntos e podemos dizer no mouse enter, também podemos dizer ponto na licença do mouse. Vamos escrever uma função aqui. E podemos dizer console ponto advertir. Você deixou a caixa. E então tudo o que estamos fazendo aqui é entrar no mouse e principalmente de agora como uma breve recapitulação da última lição , porque a última lição foi bastante intensa. Tudo o que estamos fazendo aqui é algum tipo de seletor, ponto no nome do evento. E então uma função, e essa função fará o que quisermos fazer aqui. Esta é a sintaxe do ouvinte de eventos. Isso é tudo o que é. Então, apenas como uma recapitulação rápida, temos um seletor porque tudo é baseado em seletores em jQuery. Bem, quase tudo para registrar um evento, qualquer que seja o nome do evento. Nesta lição, estamos usando mouse enter e mouse leave, e, em seguida, fazer uma função sempre que esse evento é acionado. Certo, vamos salvar isso e atualizar a página. Ok, nada está acontecendo e mova meu mouse para dentro Seu mouse está pairando sobre a caixa. Diz que você deixou a área da caixa. Toda vez que entramos e saímos, entramos e saímos, entramos e saímos. Agora vou ser completamente honesto aqui. Isso era super popular há alguns anos, mas as pessoas não usam mais eventos de pairar. Tentamos usar eventos de hover em CSS peer, se possível. Às vezes isso não é possível. Então, podemos usar jQuery ou podemos usar JavaScript baunilha também para fazer isso acontecer. Mas normalmente tentamos ficar com CSS para fazer qualquer tipo de evento acontecer quando você move o mouse sobre algo ou move o mouse para fora de algo. E em CSS, é tão simples como dizer caixa de pairar, e então ele faz uma coisa. E quando você move sua caixa, ou quando você move o mouse para fora dessa caixa e ela não está mais pairando, ela volta ao padrão. Então é só isso que é, então é por isso que preferimos CSS. Mas novamente, às vezes isso não é possível. E às vezes precisamos escrever um pouco de JavaScript, um pouco de jQuery para tornar isso possível. Vá em frente e dê uma chance. Quero que faça duas coisas aqui. Eu quero que você selecione algum tipo de elemento e registre um evento de entrada do mouse. E apenas o login do console. Não temos que fazer nada chique ainda. Vamos entrar na fantasia um pouco mais tarde, mas só vamos registrar algo. E, em seguida, quando você mouse deixar log console ou console usado outra coisa. E depois a segunda parte é: quero que acorrentes estes juntos. Então, atualmente, sabemos que pode ser assim. Doo-doo-doo-doo quartos em uma folga que colide que para dentro. Então isso funciona, isso funcionará perfeitamente bem. Mas eu quero que você acorrentá-los juntos para fazer um pequeno código jQuery mais agradável. É também um pouco mais de performance. Isso significa que seu navegador não precisa procurar esses elementos específicos ou este seletor particular mais de uma vez e pode fazê-lo apenas uma vez e usá-lo uma e outra vez. Uma vez que você tenha feito isso na próxima lição, nós vamos estar falando sobre o ouvinte de eventos chave para cima. Então, o que acontece quando você digita algum tipo de elementos de entrada? Você digita alguma coisa aí. Como tiramos esse valor de lá? O que acontece sempre que você pressiona uma tecla no teclado? Vamos falar sobre isso na próxima lição. 15. Eventos de keyup: Vamos falar sobre o evento do keyup. No evento keyup temos como uma entrada. E vamos dar a isso uma classe de me selecionar e um valor padrão da coisa aqui. Agora, olá mundo, ou eles melhoraram. E então precisamos selecionar isso por sua classe ou, você sabe, nós apenas gostamos de morder atributo. Poderíamos selecioná-lo por seu tipo de elemento. Nós somos selecionados por todos os tipos de coisas, mas vamos em frente e selecioná-lo por sua classe. Então podemos dizer ponto na chave para cima, função, console.log. Você pressionou KI. E então vamos em frente e atualizar nossa página. E quando entrarmos aqui, fazer, fazer, fazer, fazer, fazer, fazer, fazer. Toda vez que eu pressiono uma tecla, ele registra algo no meu código para que você possa vê-los enviando spam aqui. E isso é tudo o que há para ele. E então, neste ponto, se você está pensando, uau, Kayla, isso, isso é exatamente a mesma coisa uma e outra vez. Você está absolutamente certo. É a coisa boa sobre jQuery é uma vez que você aprende uma coisa, é muito semelhante a todas as outras coisas. E assim torna a aprendizagem jQuery muito fácil. Ele também torna a escrita de JavaScript muito fácil. Agora vamos dizer que você quer que ele tire o valor disso. Isso vai ficar muito interessante, então é realmente excluir isso. E como obtivemos esse valor? Temos duas maneiras. Podemos obter esse valor. Podemos dizer const, vamos fazer entrada é igual ao me selecionado. E então nós poderíamos fazer console.log e nós podemos registrar que dot val entrada. Agora já sabemos sobre a Val. Então isso vai funcionar para nós. Vamos em frente e refrescar isso. E assim funciona para nós da maneira que esperamos que funcione. O problema aqui é que agora você tem um seletor aqui, e cada vez que você pressionar uma tecla em seu teclado, ele vai atravessar seu DOM vai olhar através, digamos, 10 mil linhas de HTML e tentar encontrar isso. E acredite ou não, mesmo que seja muito rápido, os navegadores não são tão rápidos. Há muita informação para percorrer e você quer ser executado com o seu código. E especialmente se estamos tentando conseguir um emprego como desenvolvedor web. Então, em vez disso, o que fazemos é que podemos, porque estamos usando a função e se você está vindo de JavaScript, sempre que você usa a função, você tem acesso a, esta palavra-chave. Podemos usar seletor, este ponto val. E este val simplesmente se refere ao que está sendo selecionado aqui. E então vamos em frente e console.log este Console.log, este dot val. E quando eu refrescar Olá mundo. E isso está funcionando melhor e é tecnicamente mais rápido, tecnicamente mais eficiente. Agora, o que acontece se tivermos outro elemento de entrada com o mesmo nome de classe? E este só tem texto diferente. Vai selecionar os dois? E então quando você faz uma chave em qualquer um deles, ele vai obter o valor de ambos juntos ou ele vai obter o valor de apenas o que você está digitando? Estas são perguntas que precisamos fazer a nós mesmos. Vamos em frente e refresque-se. E HelloWorld 123. E vamos para o tipo e aqui, 123. Então ele está completamente isolado dos outros, o que é realmente bom agora nos bastidores, tudo o que está fazendo é selecionar todos eles como nós. Então este é um nó e este nó e ele está registrando o evento keyup em cada um deles. E assim, mesmo que o seletor esteja sendo chique e selecionando duas coisas, nosso ouvinte de eventos por trás da cena está realmente registrando um ouvinte de eventos diferente para cada um deles. E assim eles são completamente separados um do outro. Agora, como uma breve recapitulação, temos nosso seletor, então selecionamos um elemento de entrada aqui. Nós dissemos ponto em cima, Esse é o nosso EventListener. Então temos uma função. E nessa função, nós apenas consola log este ponto val. E esta é a chave aqui. Isto, nós não estamos usando este dot val porque dot val não existe na palavra-chave this. Nós vamos jogar isso em um, outro seletor jQuery e, em seguida, usar dot válido porque dot val existe no seletor em jQuery, não em JavaScript baunilha, esta é uma coisa jQuery. E então precisamos envolver isso em um, em um seletor jQuery. Eu gostaria que você desse uma chance. E eu quero que você mexa com a, esta propriedade, a, esta palavra-chave. Ele só funciona quando você usa uma função. Então, se você está escrevendo JavaScript moderno e você usa uma função de seta, isso pode ou não funcionar. Imploro que experimente isso, veja o que acontece. Mas normalmente você quer esse elemento. E estou a dizer isto especificamente. Então este elemento é registrado nesta função. E então usamos essa palavra-chave para amarrar tudo. Vá em frente e dê uma chance. Tente criar um ouvinte de eventos chave para cima quando você terminou, vamos falar sobre o que acontece quando você clica em qualquer evento, não em um evento em uma entrada específica. Então, quando eu clicar nele ou quando eu clico fora dele, o que acontece? 16. Eventos de foco: Vamos registrar um ouvinte evento sempre que clicarmos em um elemento de entrada. E em vez de usar um elemento de entrada, vamos usar uma área de texto. E vamos usar um tipo diferente de seletor. Então isso vai ter um nome da minha área de texto. E quando vejo a página, é apenas uma área de texto. Nada acontece. Agora isso vai funcionar com uma área de entrada, um elemento de entrada, assim como ele vai funcionar para um elemento de área de texto. Então primeiro as coisas, vamos em frente e selecionar isso. Agora podemos selecionar isso por uma área de texto, mas também podemos selecionar isso por um atributo. E podemos dizer o atributo e começa assim. O nome dos colchetes é igual à minha área de texto, e este é um tipo diferente de seletor e isso funciona em CSS também. Ponto no foco, função, console.log em que você se concentrou e nesta área de texto. Então, quando atualizamos a página, assim que eu clicar nela para digitar algo, diz que você se concentra nessa área de texto. Não é um pairar. Observe como ele não é acionado quando eu coloco o mouse sobre ele, apenas quando eu clicar nele. E isso é basicamente tudo o que há para focar. Isso também vai funcionar para uma entrada. Para que pudéssemos fazer uma entrada. E a entrada não tem uma tag de fechamento e também não tem ID de linhas, ou pode ter uma idéia, mas não vai ter linhas ou colunas. Vamos como os dois e chamá-lo e minha opinião. E então agora estamos selecionando uma entrada por seu atributo nome. Estamos dizendo em foco, você se concentrou nesta área de entrada. Vamos em frente e dar uma chance a isso. E quando eu coloco o mouse sobre ele e nada acontece quando eu clico nele e ele é acionado. Mas quando eu digito, não é acionado. E então a única coisa que está acontecendo aqui é quando eu coloco meu mouse sobre ele e clique nele. Então, estou pronto para digitar. Agora, se você está se perguntando, onde diabos eu poderia usar essa grande pergunta. Você sabe, quando você está em um aplicativo e ele pede seu endereço de e-mail ou algo assim e seu teclado está oculto. Bem, você clica nessa seção ou coloca o polegar nessa seção, você toca nela, e então o teclado fica de lado para cima. Este é um bom, muito bom exemplo de um evento em foco. Por favor, vá em frente e dê uma chance. Crie um evento de foco. Isto é muito, muito semelhante ao mouse enter, deixar o mouse, clicar, e assim por diante. Então isso deve começar a parecer um pouco mais familiar para você na próxima lição quando você estiver pronto. Vamos falar sobre o que acontece quando você deixa um elemento. Então conversamos sobre quando você se concentra, o que acontece quando você se concentra. 17. Eventos de branquear: Na última lição, olhamos para o que acontece quando você tem uma entrada e você coloca o mouse dentro dela e, em seguida, você gosta de clicar. E depois tu, chama-se focalização. Concentra-se na área de texto e consegue escrever o que acontece quando pretende desfocalizar. Então o valor vai ser desfocado em mim, em mim. E o que vamos fazer aqui é selecionar isso usando um seletor regular, ponto sobre. E não se chama desfocado. Chama-se Borrão. E nós damos a ele uma função. Console.log. Você se desfocou desta área de entrada. Ok, um meio desfocado, isso é um erro de digitação divertido. Vamos também mudar. Agora sabemos que não se chama desfocado de mim. Lá vamos nós. Desfoque de mim. E quando eu clico, nada acontece porque esse é o evento de foco. E quando eu clico fora dele, não quando eu mover o mouse para fora dele, mas quando eu clico fora dele e você pode ver que o contorno desaparece dele. Diz: “Você se desfocou desta área de entrada. E toda vez que eu fizer isso, vai acionar uma e outra vez e outra vez. Agora, se você está pensando, ei, quando isso vai ser útil para mim? Este é um bom exemplo de sempre que você está digitando seu endereço ou alguém digita um URL de um site e você quiser trabalhar com essa informação, podemos obter o valor aqui. Poderíamos dizer log de pontos de console, este ponto val, borrar fora de mim. Doo-doo-doo-doo, 123123123. E quando um borrão para fora, diz borrão fora de mim, 123123123. E agora podemos trabalhar com essa informação. Não em todas as teclas, não quando você se concentra nela, apenas quando você terminar de digitar, você pode fazer algo com ela. E assim, como um exemplo, poderíamos fazer algo como deixar URL do site é igual a este ponto val. E então podemos dizer se o site URL dot substring 04 não é igual a HTTP, e queremos ter certeza de que este é um site. Então isso vai ser algum tipo de URL do site, assim como www.facebook.com. Mas cada site realmente vem com HTTP. Esse é o protocolo HTTP. E assim podemos agora dizer que o URL do site é igual a. E podemos usar um modelo literal aqui. Então, estamos usando JavaScript ES6 e podemos fazer HTTPS dois-pontos barra URL site. E estamos usando ticks de volta para o literal do modelo. E então podemos dizer que este ponto val é igual ao URL do site. E então o que estamos fazendo aqui é sempre que você desfoca isso, se você tiver algum tipo de texto lá que não comece com HTTP, ele irá automaticamente adicionar HTTP. E, em seguida, ele vai mudar esse valor para URL do site. Agora que o site que você ou não pode possivelmente mudar, ele pode possivelmente mudar quem, quem sabe. Depende do que o usuário digita. Então vamos em frente e, e escrever isso como um exemplo. Vamos para facebook.com. E quando eu borrar para fora daqui, ele automaticamente adiciona HTTP dois-pontos barra barra facebook.com. E a coisa boa sobre isso é que você pode fazer a validação do usuário para eles agora. Então você sabe, quando você se inscreve em um site e é como se o que é o seu site são qual é o seu endereço de e-mail? E é como se você colocar meu website.com e é como, oh, na verdade você precisa que HTTP antes de poder enviar este formulário antes de você realmente pode se inscrever. É sim, eu entendo. Mas também o desenvolvedor pode fazer isso por nós. E você como desenvolvedor agora pode fazer isso para o usuário, tornando a experiência do usuário significativamente melhor. E tudo isso acontece com a função de desfoque ou o ouvinte de eventos de desfoque. Agora estamos falando sobre o envio de um formulário. Só agora. Vamos avançar na próxima lição e ver como podemos impedir que um formulário seja enviado. 18. Eventos de apresentação de formulários: Haverá um momento na sua vida em que você tem uma forma e é suposto fazer alguma coisa, mas você realmente tem um botão. O tipo é igual a enviar. Envie este formulário e você tem este botão. E quando alguém envia o formulário, você quer fazer algo, talvez você queira desativar o botão. Você pode desativar totalmente esse botão se quiser. Assim, as pessoas não podem clicar em enviar mais de uma vez. Isso é uma coisa muito comum. Ou você pode parar completamente o formulário de enviar completamente. Vamos fazer uma entrada aqui, e vamos fazer o valor é igual a, Isso é eu fazer um valor. Vamos fazer um espaço reservado, Seu nome. E quando vemos o formulário, isso é tudo parece. Então ele vai pedir o seu nome e então você envia este formulário. Agora, para este exemplo, nós vamos precisar realmente dar um nome a isso. Nome é igual ao nome e isso vai aparecer em seu URL. Então, quando eu apertar enviar e vamos ver o nome é igual a, vamos colocar meu nome como Bob. E diz index.html. interrogação, o nome é igual a Bob. É o que você colocou lá. Vai ser preenchido automaticamente na URL. E diz para ser preenchido automaticamente na URL. E talvez não queiramos que isso aconteça. Talvez queiramos que aconteça outra coisa. E o que eu vou fazer é fazer zoom de volta aqui. Então o que podemos fazer é selecionar este formulário. E então podemos dizer On Submit, e é aqui que fica interessante. Função pode tomar qualquer parâmetro de evento e temos realmente ignorado esse tempo todo, mas cada ouvinte de evento tem um parâmetro de evento. E podemos dizer evento dot previne padrão. E o que isso vai fazer é dizer, hey, sim, um navegador sabe que um formulário deve enviar sempre que você clicar no botão enviar. Mas quando este formulário é enviado, ele vai executar esta função primeiro. E nós vamos dizer Tome esse evento, o evento submeter, e impedido de fazer sua coisa padrão, impedido de ser ele mesmo. E então agora podemos dizer que o formulário console.log não foi enviado. E eu vou limpar este URL porque sabemos que sempre que enviamos este formulário, que ele automaticamente adiciona coisas à URL e talvez não queiramos isso. Então vamos em frente e digite Kyle como o nome. Envie este formulário. Você percebe como o URL não foi alterado. A página, não piscou essa página e recarregar e diz que o formulário não foi enviado. Agora, honestamente, neste momento, isso é completamente inútil para você porque você iria querer evitar que um formulário fosse enviado? Bem, talvez você não queira desativar o botão, sobre o qual falaremos no final da estrada. Talvez você queira adicionar uma classe diferente ao botão para que ele pareça diferente. Então parece que o formulário foi enviado? Possivelmente, sim. Falaremos sobre isso na estrada também. Mas o caso de uso mais comum é quando você tem um formulário e você quer impedi-lo. O que você quer fazer é pegar esse formulário e você quer serializar os dados. E então talvez você queira fazer algum tipo de pedido de Ajax. Portanto, o formulário não deve realmente se submeter a index.html ou onde quer que você diga para apontar. Javascript pode sobrescrever isso e dizer-lhe para fazer uma solicitação Ajax para algum outro lugar. Agora não sabemos sobre jQuery ajax ainda, então não podemos falar sobre isso ainda. Vamos falar sobre isso perto do final do curso. Mas por enquanto, coloque isso no bolso de trás, porque você vai precisar. E você sempre que enviar um formulário e quiser evitar alguma ação padrão, precisará pegar os valores da entrada, das áreas de texto ou dos campos de seleção. Você vai querer pegar essa informação e fazer algo com ela. E isso é o que o padrão de prevenção do ponto de evento faz. Agora, enquanto estamos no assunto de evento dot previne default, o que podemos fazer é ir em frente e selecionar este botão. Sabemos que quando, sempre que pressionamos este botão, sempre que clicamos enviar este botão formulário, que vai enviar esse formulário. Funcionou para nós antes. Certamente vai funcionar novamente uma vez que desativar este JavaScript aqui, podemos fazer a mesma coisa com Enviar. Então vamos em frente e selecionar esse botão. Botão. Mas ensinei. Mas, quando clicarmos nesse botão, vamos registrar uma função. E porque cada função secretamente tem um parâmetro de evento, podemos fazer evento dot previne, padrão. E apenas como um aviso para cima, muitas vezes você verá evento como e. Então, sempre que você vê função e, as chances estão em JavaScript estamos falando de evento. E poderíamos console.log. O botão é tornado inútil. E vamos atualizar a página e enviar este botão e ele só diz botão é renderizado usa o formulário não está enviando. Eu posso fazer isso. E quando eu enviar o formulário, se ele realmente enviar, isso deve ser atualizado ou deve ser limpo. Não deve haver nada aqui. Mas está impedindo que o formulário seja enviado. E por que está fazendo isso? E é porque nós dissemos, pegue esse botão, sempre que você clicar nele, pegue esse evento, esse evento clique, e impeça que ele faça sua coisa normal, impedido de ser uma função normal no botão. Então nesta lição, o que eu gostaria que você fizesse é escrever um formulário HTML quando você enviá-lo, impedido de fazer qualquer coisa. E então comente isso como eu fiz. E quando você tem um botão enviar e lembre-se que o tipo de botão não pode ser botão. Ele não pode ser redefinido, ele tem que ser Enviar. Então, quando você enviar este formulário clicando no botão, impedido de fazer a sua coisa normal também. Há duas maneiras de impedir que o formulário seja enviado. E lembre-se também, quando você enviar seu formulário aqui, quando você impedir que ele seja enviado. Normalmente, o que fazemos é pegar essas informações como um campo de texto de entrada em qualquer outro lugar. E nós trabalhamos com essa informação primeiro e então talvez nós realmente a enviemos usando JavaScript ou talvez não. Talvez enviemos essa informação para e ajax ou um endpoint API. Independentemente. Se isso é bom saber que isso é bom para dobrar em seu bolso traseiro. E o padrão de prevenção de ponto de evento é muito, muito popular. Você vai ver isso em todos os lugares e isso é realmente honestamente, isso é apenas JavaScript. Isso nem é jQuery. Então vá em frente e dê uma chance quando terminar, vamos falar sobre ocultar elementos. 19. Elementos de ocultação: Certo, vamos falar sobre esconder elementos. Primeiro, vou precisar mostrar o que tenho na minha página. Tenho esta caixa na minha página, e é apenas uma caixa preta de 100 por 100. E este é o CSS para largura 100, altura um, altura 100, cor de fundo é preto. É isso. E então eu tenho um botão que diz “clique em mim”. E então eu estou realmente apenas aplicando a caixa usando CSS aqui. E sempre que clicarmos neste botão, vamos fazer essa caixa se esconder. E então precisamos de um ouvinte de eventos para isso. Vamos em frente e selecionar esse botão pelo seu ID. Clique em mim. Ponta no ponto. Clique. Função. Podemos passar um E ou evento e fazer e ponto evitar padrão se quiséssemos, se isso fosse de uma forma que seria útil. Atualmente, isso não é útil porque não está dentro de um formulário. Mas se foi, você sabe, esta é uma boa medida para tomar. E então podemos selecionar essa caixa. Você pode selecionar essa caixa. E você pode ver porque este é jQuery VS Code está adicionando todos os tipos de coisas e nós não vamos passar por tudo isso. Há muita coisa aqui, mas o que queremos fazer é selecionar esta caixa e queremos ocultar esta caixa. E isso é tudo o que vamos fazer. Então, quando eu atualizar esta página, boom, esconde-a, vai atualizar novamente. E vamos ver o que acontece em nossos elementos aqui. Esta caixa aqui, é importante prestar atenção aqui no fundo. Simplesmente não mostra nenhum. Isso é tudo o que faz. Então, se você quiser esconder certas coisas, você pode fazer isso com a altura do ponto seletor. Agora, simplesmente envolvemos isso em um ouvinte de evento, em um ouvinte de evento de clique. Então dissemos, sempre que você clicar nesse botão, selecione a caixa e oculte-a. Não temos que fazer isso. Podemos fazê-lo direito quando a página é carregada também. Então, quando carregamos a página, você pode ver que ela pisca porque em nosso código-fonte ela aparece e sabemos que ela vai aparecer em nosso código-fonte. Ele vai piscar e então jQuery vai dar um pontapé e vai dizer, oh, na verdade, vamos nos livrar dele. Vamos escondê-lo. Não vamos apagá-lo do DOM. Estamos nos certificando de que ainda podemos acessá-lo mais tarde. Por isso, não está a ser removido, não está a ser eliminado, está simplesmente a ser escondido. O que eu gostaria que você fizesse é ir em frente e dar uma chance, mas eu quero que você escreva um ouvinte de eventos com ele. Vamos nos acostumar a escrever ouvintes de eventos porque é isso que jQuery é tudo sobre. É tudo sobre ouvintes de eventos. Então, à direita, um ouvinte de evento em um botão, sempre que você clicar nesse botão, oculte a caixa. Quando você terminou isso, na próxima lição, nós vamos fazer aquela caixa visível novamente. 20. Mostrando elementos: Tudo bem, então isso está apenas decolando da última lição. Este é o exemplo exato da última lição. Então temos um botão e uma caixa, e quando salvamos e atualizamos a página, isso é o que temos aqui. Agora, eu vou ter certeza de que esta caixa está realmente oculta por padrão, eu vou usar display não-bloco, mas exibir nenhum. Essa caixa não aparece. Está lá, está no DOM, mas é invisível. Então o que podemos fazer é quando clicamos neste botão em vez de esconder, podemos fazer pontos mostrar. E isso também é muito importante. Vamos ficar de olho nisso aqui em baixo, vamos atualizar esta página. E aqui em baixo vamos ver o bloco de exibição. E assim assumiu automaticamente que era um elemento de bloco e foi para o bloco de exibição. E assim ele só mostrou o elemento. E, na verdade, eu não deveria dizer altura aqui, então é um elemento do show. Mostre esse elemento. Lá vamos nós. Isso é tudo o que há para ele. Agradável e doce. É muito parecido com esconder-se e mostrar. Então temos que esconder algo e mostrar algo. Agora, como exemplo completo, podemos selecionar id. Clique em Me, que vai selecionar este botão. Vamos escrever o, o jeito antigo que poderíamos fazer a função. E esta é apenas uma sintaxe diferente e estamos usando o ponto na sintaxe normalmente, mas podemos fazer um evento clique aqui. Então poderíamos selecionar essa caixa e não escondê-la, mas poderíamos mostrá-la. E funciona para nós todas as vezes. Vá em frente e dê uma chance quando você terminar, nós vamos entrar em algo um pouco mais divertido. Vamos começar a adicionar classes CSS aos nossos elementos. Então, quando você clica em um botão, podemos adicionar uma classe ao elemento para torná-lo um pouco diferente. 21. Adição de classes CSS: Vamos dar uma olhada em como podemos adicionar dinamicamente uma classe a um elemento existente. Então eu tenho alguns CSS aqui, e vamos nos livrar disso. Eu só tenho uma caixa com 100 altura 100 cor de fundo preto. Vamos em frente e mudar essa classe ou adicionar uma classe em vez de mudar essa cor de fundo para ser, digamos azul. Então poderíamos dizer que há uma classe chamada azul, e simplesmente vai ter uma cor de fundo de azul. Agora, eu preciso que esses elementos da caixa existam de fato. E no meu jQuery aqui, eu posso simplesmente dizer caixa de ponto, ponto adicionar classe azul. E antes que eu faça isso, na verdade, vamos em frente e vamos trabalhar com as aulas um pouco. Vamos trabalhar com os IDs que trabalharam com as classes. Então nós temos classe caixa, caixa, caixa, caixa, e vamos mudar isso para ponto caixa. Então, agora, quando eu atualizo minha página, minha caixa preta fica azul e agora é, você pode ver, deixá-la piscar rapidamente. Mas mudar minha caixa para ser azul. E nós podemos realmente ver isso como um exemplo real aqui é que podemos excluir este DOM interno. E isso é o que parece por padrão. E tudo o que estamos fazendo é adicionar azul a ele. Agora, vamos em frente e embrulhe isso em algum tipo de tempo limite. Então vamos fazer o tempo limite definido. E poderíamos dar uma função a isso. E vamos fazer o tempo limite por dois segundos. E, em seguida, selecione a caixa e adicione a classe azul. Então, quando eu atualizar a página aqui, ela vai esperar apenas dois segundos, e então ele vai ficar azul. Agora, se queremos escrever JavaScript moderno, não precisamos usar uma função lá. Podemos simplesmente usar uma função de seta que vai fazer exatamente a mesma coisa, atualizar, esperar dois segundos, ele fica azul. Também podemos envolver isso em qualquer tipo de ouvinte de evento que queremos. Então podemos dizer algo como o botão quando é clicado. Função. Ou porque não precisamos da palavra-chave this, podemos fazer uma função de seta. E vamos nos livrar disso e mover isso para cima. E porque temos um ouvinte de evento botão, precisávamos de botão na página. Então vamos em frente e adicionar esse botão. Botão. Clique em mim. E quando clicarmos neste botão, vai selecionar essa caixa e adicionar uma classe de azul. Vamos em frente e atualizar. Clique. E algo não está certo aqui. E isso é porque eu digitei cliquei, é suposto ser clicado. Então, atualize. Clique. Lá vamos nós. Atualizar, clicar, ele muda, atualizar, clicar, ele muda. Podemos fazer todo tipo de coisas aqui e podemos mudar a largura também. Então é uma largura 100, e isso simplesmente vai mudar a largura para ser 100%. E assim podemos adicionar classe azul. Também podemos adicionar a largura da classe 100 e atualizar. E muda para ser largura de 100%. Quero que dê uma chance a isso. Experimente isto. Isto vai ser muito, muito importante. Você vai estar usando isso muito em JavaScript baunilha, bem como jQuery regular. Então você vai querer ser capaz de adicionar uma classe. Você pode adicionar várias classes simplesmente adicionando um espaço lá. E jQuery vai descobrir e adicionar essas classes para você. Enrole isso em um ouvinte de evento se você não precisa do, esta palavra-chave, eu estou dizendo isso assim. Se você não precisa disso dentro de sua função, você pode simplesmente escrever uma função de seta também. É apenas um pouco mais de desempenho, um pouco mais moderno JavaScript. E então você pode selecionar sua caixa ou seu elemento. E então você pode adicionar uma classe de quaisquer que sejam suas classes. Então você vai precisar saber um pouco de CSS para isso. Se você realmente não sabe CSS, tudo bem. Você pode apenas pausar o vídeo aqui e copiar o que eu tenho na minha tela. Eu simplesmente tenho uma caixa, classe de caixa. Eu tenho uma classe azul, qualquer classe de largura 100. E tudo o que está fazendo será adicionar essas classes. E novamente, quando inspecionamos, agora temos caixa de classe azul e largura 100. Vá em frente e dê uma chance. E quando estivermos prontos, quando estivermos prontos. Vamos seguir em frente e tomar este exemplo exato e fazer exatamente o oposto onde removemos uma classe. 22. Como remover cursos CSS: Ok, neste exemplo, vamos em frente e remover a classe azul e remover a classe width. E então o que eu tenho aqui é um elemento com três classes sobre ele, caixa azul e largura 100%. Isto é apenas decolando da última lição em que estávamos adicionando uma aula. E esta é a minha caixa azul final com CSS que fizemos aqui. Então agora o que eu quero fazer é registrar dois eventos de clique diferentes. Quando clicar em Remover azul, remova o azul daqui. E quando você remover a largura, remova a classe de largura 100. E assim podemos ficar um pouco extravagantes com isso. Então, em vez de selecionar caixa várias vezes, podemos selecioná-lo uma vez. Então podemos dizer que a caixa const é igual a, e nós estamos indo apenas para obter a caixa em si como uma classe. E este é apenas um seletor simples. Nós também pode fazer const, remover azul é igual para remover azul que vai selecionar esse botão. E remover a largura vai remover a largura. E assim estes são apenas seletor. Então eu selecionei a caixa removido azul e remover largura. Agora, aqui o que eu queria fazer é quando você clicar em Remover azul, selecionar essa caixa e remover esta classe. E podemos fazer isso facilmente. Podemos dizer Remover ponto azul onclick, função, vox ponto remover classe. Isso é tudo o que é, apenas a palavra remover classe. E depois queremos remover o azul. É ir em frente e dar uma chance a isso. E quando removermos o azul. E, na verdade, como um exemplo melhor aqui, aqui em baixo temos uma caixa azul largura 100. Poderíamos remover o azul e ele se livra dele para nós. Em seguida, podemos clicar em outro botão e remover a largura. E então o que eu estou fazendo com esses conceitos aqui é em vez de selecionar caixa várias vezes. Então, em vez de ter que selecionar isso e colocá-lo lá, eu posso selecioná-lo apenas uma vez porque eu realmente só preciso selecioná-lo uma vez. E então, em um segundo ouvinte de eventos, podemos fazer exatamente a mesma coisa. Então podemos dizer Remover largura, ponto no clique. E porque não precisamos da palavra-chave this seja o que for, podemos fazer uma função de seta e podemos dizer Box dot remove a largura da classe. E isso não vai ser, vai ser largura 100. Queremos remover esta classe. Vamos em frente e atualizar. Quando removermos a largura, esta será uma caixa perfeita. Quando removemos o azul, agora é preto. E isso é realmente tudo o que há. A única coisa que realmente precisamos tirar desta lição particular é removido fecho. Então vá em frente e dê uma chance. Remova a classe, remova uma classe e tente fazer com que ela funcione para você. Você só deve levar cerca de um minuto ou dois e quando estiver pronto, vamos para a próxima lição onde nós realmente alternamos as aulas, porque agora não podemos realmente facilmente detectar se uma classe tem uma classe azul ou uma largura 100. Nós realmente não podemos detectar se um elemento tem essas classes em vez disso. Então o que podemos fazer é que podemos ativá-los e desativá-los com um recurso jQuery muito simples. 23. Alternando cursos de CSS: Na última lição, criamos algum tipo de caixa e demos a ela uma largura de 100%. Neste, temos um quadrado perfeito. E o que queremos fazer é alternar azul. Então queremos, toda vez que clicarmos neste botão, livrar-se do azul, e depois clicar nele novamente e torná-lo azul e clicar nele e simplesmente ativá-lo e desativá-lo. E assim podemos fazer isso, primeiro lugar, criando um evento de clique. Então, queremos selecionar a classe azul de alternância. E isso é bem aqui em cima. Queremos conversar todos. Queremos selecionar esse botão, ponto na função clique. E porque na verdade não precisamos da palavra-chave this, podemos fazer a função de seta. Então podemos simplesmente dizer a caixa que selecionamos aqui, alternar a classe azul, e é isso. E assim, se jQuery reconhece que já existe uma classe azul, ele vai tirá-lo. E se reconhecer que não há uma classe azul, vai adicioná-la. E então vamos em frente e dar uma chance a isso, atualizar nossa página, e assistir isso aqui em baixo onde diz “dólares azuis”. Toda vez que eu clicar neste botão ligar e desligar, ligar e desligar, ligar e desligar, assim. E isso é tudo o que realmente existe. É assim que ligamos e desligamos a classe. Agora, onde isso é aplicável? Bem, se você precisa esconder e mostrar algo ou se você quer fazer alguma coisa, aja por causa de outra coisa. E, na verdade, como um exemplo melhor, vamos em frente e nos livrar disso e vamos criar uma entrada. Para uma entrada. E sempre que tivermos essa entrada, vamos assim. Quando temos, quando temos essa entrada e nós chave para cima, vamos em frente e verificar esse valor. E então, se esse valor for um nome específico, vamos mudar a alternância, a classe para azul. Caso contrário, a mudança para não azul. Então vamos em frente e obter esse valor. Então const val u é igual a este ponto val. Agora você percebe que eu estou usando a, esta palavra-chave aqui. Então agora precisamos escrever função. Podemos dizer que se o valor é igual a Caleb, poderíamos dizer Adicionar classe. Senão, ponto da caixa, remover a classe azul. Agora nós não estamos realmente usando toggle aqui no sentido de que não estamos usando a função de alternância, mas estamos alternando classes, removendo um adicionando-os. E uma coisa que precisamos fazer é funções não têm funções de seta, é apenas a palavra-chave função. Vamos atualizar nossa página aqui. E se eu digitar, Jacob não funciona, se eu digitar Gully não funciona se eu digitar, Caleb, boom, fica azul. E agora eu posso alternar assim e digitando realmente qualquer outra coisa. Então isso é duas maneiras em que podemos alternar com base em ouvintes de eventos diferentes. Agora o que eu gostaria que você fizesse é ir em frente e tentar alternar aula. Você não tem que fazer todo esse exemplo aqui. Este exemplo é, sim, muito grande e não muito relevante para esta classe. Mas certifique-se de ir em frente e usar a função de classe de alternância aqui com um seletor. Então você poderia fazer caixa ponto Togo classe azul. Vá em frente e dê uma chance quando você terminar, vamos em frente e adicionar CSS personalizado, não uma classe, mas vamos adicionar CSS personalizado a um elemento. 24. Adição personalizada: Vamos em frente e adicionar CSS personalizado a um elemento específico. Então, nesta lição, o que vamos fazer é pegar essa caixa e vamos adicionar CSS a ela. E nós não vamos adicionar uma classe, nós não vamos remover uma classe. Vamos adicionar CSS dinâmico. Então nós podemos realmente basicamente direito. Estilo é igual a largura 100%, por exemplo, podemos fazer isso acontecer com JavaScript e jQuery. Primeiro, precisamos pegar nosso elemento de caixa. Então vamos fazer a caixa de pontos. E tudo o que temos que fazer é digitar dot CSS. E isso é muito legal porque poderíamos fazer cor de fundo, azul, e essa sintaxe é um pouco interessante. Então o que estamos fazendo aqui é que estamos dizendo ponto CSS, o primeiro valor nesta função vai ser, o que queremos mudar? Que propriedade CSS queremos alterar? E então queremos alterar o valor real. Então podemos mudar isso para azul, mas vamos mudar isso para laranja. E você pode ver que ele realmente carrega preto e, em seguida, muda para laranja. E você pode ver aqui, estilo de fundo cor é igual a laranja. Agora, se verificarmos nosso código-fonte, fazer, fazer, fazer, fazer, fazer, fazer. Onde estamos? Não há nenhum atributo de estilo em seu jQuery adicionou dinamicamente que para nós. Agora, se quiséssemos, poderíamos fazer múltiplos. Poderíamos fazer ponto CSS, fronteira, vírgula, dez pixels, preto sólido. E isso mudou dinamicamente para nós. Poderíamos fazer outro. Poderíamos fazer CSS ponto, raio de fronteira, vírgula 50%. E agora ele o transforma em um círculo laranja com uma borda preta, em vez de ser apenas um quadrado preto normal. E isso nos leva a Animações um pouco, sobre as quais falaremos mais no final da estrada. Agora há uma maneira melhor de fazer isso. Poderíamos comentar isso e fazer um ponto CSS. E podemos dar a isso um objeto. Agora, quando damos um objeto a isso, não digitamos cor de fundo porque os objetos não devem ter traços em seus nomes. Nós fazemos fundo, e então nós CamelCase Ele cor. Então olhe para a diferença entre este e este. Cor tracejada de fundo versus cor de fundo com C maiúsculo e vamos mudar isso para amarelo. Vamos mudar a fronteira. 210 pixels, azul sólido. E vamos mudar o raio da fronteira. Observe a capitalização lá e não há nenhum raio de fronteira de traços para ser de dez pixels. E então este é apenas um objeto JavaScript regular. Vamos salvar isso e atualizar e olhar para isso. Podemos mudá-los todos de uma só vez ou podemos acorrentá-los se quisermos. Agora, o que eu gostaria que você fizesse é tentar os dois métodos. Tentei acorrentá-los juntos. Então você tem o primeiro e, em seguida, você tem um segundo, então você tem um terceiro e, em seguida, comentar aqueles fora. E basicamente não acorrentá-los juntos, apenas mudá-los todos ao mesmo tempo porque agora jQuery tem que ir aqui, mudar em, Leia o estilo ir aqui, mudar. Eu tinha lido o estilo ir aqui, ler esse estilo de gênero versus entrar neste método onde nós estamos apenas dando tudo isso. Podemos apenas dizer, hey, jQuery, lidar com tudo de uma vez. Em vez de fazer três tarefas diferentes, faça uma grande tarefa. Em seguida, vamos aprender sobre como desvanecer as coisas e desmaiar as coisas. 25. Como entrar e remover a saída: Vamos dar uma olhada em como podemos desvanecer um elemento dentro e desvanecimento elemento para fora. Então, nesta lição eu vou usar meu console. E isso é uma coisinha legal porque no meu código aqui, eu estou usando um CDN. Eu tenho acesso a esse pequeno cifrão, que significa jQuery, aquele pequeno cifrão. E assim eu posso selecionar esta caixa, eu posso dizer const. Sim, vamos fazer const. Box é igual a e dar-lhe um seletor. E quando eu digitar caixa de sinal de dólar, ele me dá esta caixa todo o elemento. Na verdade, é uma lista de nós tecnicamente, mas só há um lá, então podemos trabalhar apenas com um. Está totalmente bem. Agora, para desvanecer algo em um fora, tudo o que temos que fazer é desvanecer-se caixa de ponto de ninguém. Na verdade, já está desbotada. As entradas desaparecem e desaparecem. Nós também podemos fazer a caixa de pontos, ponto desaparecer e ele desaparece. Nós também podemos dar-lhe um tempo limite ou não um tempo limite, mas um temporizador. Quanto tempo isso deve levar para desaparecer? Digamos que isso vai levar 4,5 segundos. Então nós fazemos 4500 milissegundos, então isso é 4,5 segundos desaparecem e ele vai diminuir. O Fedo. Podemos fazer a mesma coisa com “fade in”. Desvanece-se, lentamente desvanece-se. E há realmente outra coisa legal que podemos fazer é que podemos dar a isso uma função de retorno de chamada, vamos falar sobre funções de retorno um pouco mais tarde, mas podemos dizer a ele para fazer algo quando ele é feito desvanecendo em, é feito de desaparecer. Então o que eu quero que você faça é não escrever seu código necessariamente em seu editor desta vez. Vá em frente e abra seu console. Você sempre pode clicar com o botão direito, inspecionar. Clique na guia Console. Selecione sua caixa como fizemos. Temos caixas de const iguais a essa caixa. E então nós fizemos a caixa que fade-out, box dot fade-in. Dê um tiro assim que estiver funcionando para você, vamos para a próxima lição, onde aprendemos como alternar um fade e alternar uma tela. 26. Toggling fades e displays: Vamos em frente e alternar um fade, um efeito de desvanecimento e um efeitos de exibição. Então precisamos fazer duas coisas diferentes aqui. Antes de qualquer coisa, precisamos de algum tipo de ouvinte de eventos. Clique em Mim, e é apenas um botão simples. Então vamos em frente e registrar este botão como um evento de clique. Botão. Função ponto no clique. E é assim que registramos o ouvinte de evento de clique. Então precisamos selecionar essa caixa. E podemos fazer alternar. E podemos fazer alternância de desvanecimento. E isso vai desaparecer ou desaparecer dependendo de quão visível é. Então vamos em frente e dar uma chance a isso. Quando clicamos nisso, desaparece, desaparece assim. E podemos ver aqui há um atributo de estilo e vê-lo. Quando eu clicar nisso, ele vai desaparecer. E muda a opacidade para 0 e, em seguida, muda a exibição para nenhum. E quando ele desaparece de volta, ele muda o UPC. Ele rola esse backup para um ou um 100% e faz com que ele exibir bloco ou realmente apenas se livrar da propriedade de exibição completamente. Podemos ver que não mostra nenhum. E vai ser o que eu disse para ser antes. Então, se é inline-block, ele vai ser inline-block. Se ele é exibido bloco ou flexbox, ele vai ser flexbox, ele vai ser o que quer que nós definimos para ser em CSS. Então podemos desvanecer-nos. A outra coisa que podemos fazer é simplesmente alternar. Isso vai alternar para exibir ou não exibir. Simplesmente, assim, é tudo o que estamos a fazer. Estamos a clicar nele. E cada vez que clicamos, ele o torna visível ou o torna invisível. Isso é tudo o que está fazendo. Assim como uma recapitulação, toggle vai basicamente usar ocultar e mostrar. Enquanto fade toggle vai usar fade in e fade out. Vá em frente e dê uma chance. Tente desvanecer-se alternar e tentar alternar regular. Estes serão úteis quando você criar sites interativos para pessoas. Quando alguém clica em algo, torna-se visível? Se eles clicarem fora dele? Será que ele não se torna visível como um sistema de menu, como um sistema de menu suspenso. Quando você clica no pequeno ícone que sugere que você pode ter um menu e ele cai para baixo. Talvez você queira alternar. Então há, há muitas maneiras diferentes em que nós usaríamos isso. Não, honestamente desvanecer-se e desvanecer-se não é mais usado com muita frequência. Só porque parece um pouco brega, mas, sabe, talvez daqui a alguns anos que toda a web, toda a internet decide desaparecer e desaparecer é uma coisa que queríamos fazer de novo. Na próxima lição, vamos em frente e falar sobre deslizar para cima e deslizar para baixo como outra forma de animação. 27. Desdobrar e baixo: Ok, vamos falar sobre deslizar para cima e deslizar para baixo. Muito fácil aqui isto é muito parecido com “fade in “e “fade out”. Então eu tenho um botão aqui é registrado como um evento clique. E eu quero deslizar esta caixa para cima e deslizá-la para baixo. Assim, como uma pergunta FAQ, uma seção de perguntas freqüentes em um site e FAQ. Então, podemos selecionar esta caixa sempre que o botão é clicado. E poderíamos dizer deslize para baixo ou podemos dizer deslize para cima. Então vamos primeiro de tudo, SlideUp, deslizar para cima vai escondê-lo. Refresque. Ele, desliza para cima. Muito arrumado, certo? Nós também poderíamos fazer deslizar para baixo, que é apenas indo para deslizá-lo para baixo e torná-lo visível. Ou podemos deslizar alternar e isso vai alterná-lo para deslizar para cima e deslizar para baixo. Então vamos em frente e atualizar. Para cima, para baixo, para cima, para baixo. Então, esta é uma lição curta. Honestamente, neste momento você provavelmente não precisa mais praticar isso. Mantenha isso escondido no bolso de trás. Alternar deslizante. Você pode deslizar para cima e você pode deslizar para baixo. Você vai usar este mais do que um fade in e fade out, com certeza. Então, se você quer um pouco de experiência, sim, definitivamente vá e crie um exemplo como este. Você pode até roubar meu exemplo aqui. Caso contrário, vou passar para a próxima lição onde falaremos sobre funções de retorno de chamada. 28. Funções de Callback: Tudo bem, vamos falar sobre funções de retorno de chamada. Em uma função de retorno de chamada. Realmente tudo uma função de retorno de chamada é, é uma função de um pequeno pedaço de código que deve ser executado depois que algo é feito em execução. Então, por exemplo, temos um seletor aqui e dissemos Registrar um listener evento clique. E a qualquer momento que é suposto executar, executar esta função, que é uma função de retorno de chamada. Assim que um clique acontecer, faça uma coisa. Nós também podemos lago selecionar nossa caixa de nossa lição anterior. E poderíamos dizer algo como desaparecer. E nós poderíamos dar esse parâmetro, digamos que vai levar 1,5 segundos. E então poderíamos dar a isso uma função também. E esta é uma função de retorno de chamada. E então nós demos a ele um parâmetro, quanto tempo ele deve levar função vírgula e, em seguida, apenas uma função regular aqui. E então podemos dizer log de pontos do console. Fade-out está completo. Vamos em frente e dar uma chance e vamos para o nosso console aqui. Vai desaparecer. Fade out está completo. E podemos fazer isso com um monte de coisas diferentes que poderíamos fazer desaparecer e poderíamos fazer deslizar para cima. Como, como fatal, está completo. Isso deveria ter dito slide para fora é botão completo independentemente, a função de retorno de chamada ainda funciona. E então realmente tudo o que estamos fazendo aqui é se simplificarmos um pouco isso, estamos dizendo: selecione a caixa, deslize para cima, leve 1,5 segundos quando você terminar que o log do console ODE está completo ou SlideUp está completo. Podemos fazer isso com muita animação diferente. Então nós temos slide, nós poderíamos fazer desaparecer. Poderíamos usá-lo com togas também. Então, à medida que você alternar, o fade vai levar 1,5 segundos para desaparecer ou desaparecer. E o efeito de desvanecimento está completo. E então vamos em frente e clicar nisso. Oh, algo não está certo aqui. Não é alternado, fade, é fade toggle. Eu recebo isso ao contrário de vez em quando e de vez em quando. E então tudo o que fez foi desaparecer automaticamente porque já estava visível. Agora vamos embrulhar isso em um ouvinte de eventos. Selecione esse botão, ponto na função clique. Devido a, devido ao devido, e você vê-los indo muito rápido aqui fica, fica muito mais fácil com o tempo. E você pode ver isso começando a ser um padrão em jQuery, temos um seletor, fazer uma coisa, um Seletor de Função, fazer uma coisa, fazer uma coisa bem ali. Um seletor de função, fazer uma coisa, uma função. E vamos em frente e nos livrar disso. 1500 milissegundos ou 1,52, fade in, fade out. E vamos dar uma chance a isso para clicar. Desvanece. efeito de desvanecimento está completo. Você pode vê-lo bem ali em baixo. Perfeito. Olhe para isso. Isso está funcionando exatamente do jeito que queremos que funcione. Agora uma função de retorno de chamada é realmente útil se algo estiver desvanecido, talvez você queira removê-lo. Então vamos fazer isso, vamos desaparecer. E nós podemos fazer este ponto remover. E assim que isso desaparecer, porque agora você pode ver que se clicarmos nisso, ele vai desaparecer. Ainda está no nosso DOM. Talvez queiramos que seja completamente removido por qualquer motivo. Poderíamos clicar nisto. E você percebe que ele realmente remover completamente a si mesmo do modelo de objeto de documento. Então veja isso aqui em baixo. Observe que ele desaparece, torna-se completamente removido. E agora não podemos clicar nisso se for inútil. Então, se você precisa de um evento único, essa é uma boa maneira de fazê-lo. Agora você realmente não precisa praticar nada com funções de retorno de chamada. Estivemos escrevendo funções de retorno esse tempo todo. Então um pouco de uma surpresa que são funções de retorno de chamada, você é praticamente um grande mestre Wizard em funções de retorno de chamada neste ponto no tempo. Na próxima lição, vamos falar sobre adicionar nossas próprias animações. 29. Animações do jQuery: Certo, vamos falar sobre animações. Em jQuery. Podemos animar certas coisas e não podemos animar certas coisas. Então qualquer coisa que tenha um valor numérico, podemos animar. Assim, uma largura de 500 e, por exemplo, é um valor numérico. E podemos adicionar o preso a quatrocentos e trezentos e dez mil, se quisermos. Uma cor não é necessariamente um numerado é uma mistura de números e letras. É como se o preto fosse 000000 ou F, F, F, F, F, F, E isso é branco. Poderíamos fazer um F5, F5, F5, F5. E um computador simplesmente não sabe, você sabe, nativamente como rolar isso para F, F, F, F, F, F, F, ou para baixo para 000000. Mas se você tem uma largura de 500, bem, isso é simplesmente decrementando o você poderia mudá-lo de 500 para 400 indo para 499, então 498487 para 9645, et cetera, et cetera, et cetera, et cetera. Há uma ordem linear de operações aqui. Então vamos em frente e animar nossa caixa. Então, quando clicamos neste botão, temos um botão aqui em cima que diz Clique em mim, registrado, clique em evento. Vamos selecionar essa caixa e animá-la. Então poderíamos fazer algo como “caixa de pontos “animar”. E isso vai levar um objeto. E assim aqui podemos dizer que a opacidade é atualmente é um que podemos mudar isso para Lake é 0,5. A largura está atualmente definida para 100 pixels. E só porque ele diz pixels não significa que ele não sabe como trabalhar com um número e sabe como dividir isso e dizer, ok, a largura é atualmente um 100, e também é pixels. Então vamos mudar isso para quinhentos, quinhentos pixels porque precisamos da medição lá dentro. Vamos em frente e refresque-se. E anima muito bem. É agradável e suave e funciona perfeitamente para nós. E se quiséssemos, poderíamos abrandar isso também. Poderíamos dizer animar isso em 4 segundos ou 4 mil milissegundos. E leva o seu tempo, assim mesmo. Agora o que não vai funcionar é se quisermos mudar essa cor de fundo, cor de fundo. Se quiséssemos mudar minha cor de fundo para azul, ele simplesmente não sabe como ir de preto para azul link. Qual é a definição ou qual é a função ou qual é a lógica linear por trás da mudança de uma cor para outra cor? Fazendo parecer animado. Como ele vai de preto para vermelho para azul ou de preto para roxo para azul ou de preto para branco para azul. Como se um computador não soubesse disso. Mas um computador sabe como trabalhar com números duros com bastante facilidade. Então vamos ver que mudar a cor de fundo aqui para azul simplesmente não vai funcionar. Vai desaparecer. Vai ser um cinza. Isso não é absolutamente azul. Sua tarefa para esta lição é selecionar um elemento e animá-lo. Podemos nos livrar disso. Você pode dar a ele um objeto com o que você quer mudar para o valor de Ed. Então largura, altura, capacidade, qualquer coisa assim. Até mesmo o tamanho da fonte, se você quiser. E, em seguida, dar-lhe algum tipo de duração. Quanto tempo isto deve demorar? Para mim? Eu disse que deve levar quatro segundos para você. Talvez você quisesse tomar 1 segundo ou 20 segundos, ou talvez você queira que ele mude para ser completamente transparente. Com o tempo que você recebe um 100% e isso deve levar cinco segundos, vai lhe dar algo assim para, este é um daqueles momentos em que é bom ter um pouco de diversão apenas para mexer com ele. E, você sabe, você não tem que fazer nada em particular. Você só precisa ter certeza de que ele muda algo com um valor numérico. E novamente, estamos usando CSS aqui. Javascript, CSS e HTML todos funcionam muito bem juntos. Eles são todos projetados para trabalhar uns com os outros. E também tenha em mente, você só pode trabalhar com números reais. 100% é um número, azul não é um número. Vá em frente e divirta-se com isso nas próximas lições, vamos falar sobre dimensões de largura e dimensões de altura. 30. Dimensões de largura: Vamos falar sobre dimensões de altura. Então temos essa coisa chamada Modelo de Objeto Documento. E quando clicamos com o botão direito na caixa e a selecionamos aqui, descemos. Podemos ver que temos margem, preenchimento de borda e o tamanho real do próprio elemento. Podemos verificar para ver o que é esse tamanho. Então, podemos selecionar essa caixa. Vamos fazer caixas de const iguais a caixa de ponto. E então poderíamos fazer o ponto da caixa. Tivemos algumas coisas diferentes. Tivemos largura e largura externas. Então, se dermos uma olhada na largura aqui, que é na verdade uma função. Então, sempre que você vê este pequeno f encaracolado aqui, isso geralmente significa que é uma função. Isso normalmente significa que você simplesmente esqueceu seus parênteses. Então a largura da minha caixa é atualmente 100. E vamos em frente e ver se consigo tirar isso. Lá vamos nós. Também podemos fazer a caixa. Altura também é um 100. Podemos fazer a caixa. Largura externa é um 100. Nós também podemos fazer a largura interna caixa é um 100. E vamos ver que todas essas três coisas são iguais, mas na verdade são diferentes. E isso depende do modelo da caixa. E então se voltarmos aqui e o que eu quero fazer é adicionar um pouco de estofamento. 100 pixels. Não, não vamos fazer 100. Isso é muito. Vamos fazer 20. E vamos fazer uma margem de 20 pixels também. E vamos ver que isso bate o elemento e realmente fez o elemento parecer um pouco maior. Então, agora, se eu voltar para cima, selecione minha caixa, e eu poderia fazer a largura de ponto caixa. Agora é um 100. Isso é o interior. O interior é um 100. E vamos ver se vamos para elementos que aqui dentro são 100. Agora vamos fazer o ponto da caixa, largura interna. É 140. Bem, de onde vamos tirar um quarto? Se voltarmos aos elementos, podemos ver que há um estofamento aqui. Esta é a caixa inteira em si, a largura interna da caixa. Então temos um 100 e, em seguida, temos 20 de cada lado. Então 100101140. Foi de onde conseguimos um 140. Agora podemos fazer a largura externa também, largura odor de ponto Caixa. Agora estamos olhando para a largura externa aqui. E, em seguida, a largura externa tem duas opções aqui. Então nós temos largura externa regular, largura odor, e este é o lado de fora aqui. Ou podemos fazer largura externa, verdade. E o que isso vai fazer é pegar tudo, incluindo a margem. Então nós tivemos cento e vinte e um quarenta e um sessenta, um oitenta, e é daí que estamos recebendo um 180. Agora o que eu gostaria que você fizesse para esta lição em particular é não se preocupar com a largura, largura interna ou largura externa. O que eu quero que você faça é a mesma coisa com a altura. Então pegue seu elemento Box e, em seguida, fazer altura interna, ou apenas altura ou altura exterior, e experimentá-lo com verdadeiro lá. Dê uma chance a isso. E tente com tamanhos diferentes. Faça sua caixa de tamanho diferente. Também não tem de ser um quadrado perfeito. E então o que eu quero que você faça é que eu quero que você selecione toda a sua janela, que é toda a sua janela de exibição, e então faça largura e altura. Agora, apenas como um aviso para cima, minha altura é muito baixa só porque estou super ampliado aqui. Se eu não fosse ampliado, isso seria significativamente maior do que 289. Vá em frente e dê uma chance. Elas são importantes quando você está trabalhando com posicionamento de coisas em sua página usando JavaScript. Então você vai precisar saber como eles funcionam quando você terminar isso, vamos para a próxima lição onde falamos sobre um novo ouvinte de eventos onde ele verifica se estamos redimensionando nossa página. 31. Redimensionamento de janela: Vamos falar sobre redimensionar a janela. Neste momento, sempre tivemos algum tipo de seletor em um conjunto de citações como a nossa caixa. Mas também podemos definir um seletor para ser sua janela ou seu documento. E assim, para isso, queremos ver a janela de exibição mudando. Agora que viewport é toda esta área branca. Quão grande é isso exatamente? E nós meio que olhamos para isso na última lição quando fizemos caixa de ponto mais velho com caixa ponto, largura interna e altura da janela, ponto da janela com coisas assim. O que acontece quando redimensionamos nossa página? Bem, podemos tomar diferentes ações com base em diferentes tamanhos de janela. Então vamos em frente e fazer Window dot on, função de redimensionamento, console.log. E então queremos console.log a largura da janela. E foi por isso que te convenci a fazer isto na última lição. Largura do ponto da janela por altura do ponto da janela. E então vamos abrir nossas ferramentas aqui e isso é redox isso e atualizar a página. E sempre que eu mexo isso, você pode ver que esses números estão mudando. E a altura não está mudando, mas a largura está mudando, a largura está ficando menor e menor e menor. E então não, podemos fazer algo baseado nisso. Podemos dizer se a largura da página é menor que, digamos 230 mudou a cor de fundo para preto. Agora, este não é um exemplo muito feio, mas este é um bom exemplo de prática. Então vamos em frente e nos livrar disso. E podemos dizer se a largura da janela é menor ou igual a 230. Agora sabemos que podemos mudar a cor de fundo CSS do ponto de corpo para ser preto ou de outra forma, podemos fazer a mesma coisa e mudar a cor de fundo para branco. Tudo bem, então isso vai ficar preto ou branco melhor, implicando desce para duzentos e trinta. Dois e trinta. Lá vamos nós. E vai alternar assim. Agora podemos fazer a mesma coisa com base na altura também. E eu vou colocar esse registro de console de volta aqui, onde nós vamos registrar a largura e a altura. E eu vou mudar onde isso está encaixado, mudar para o fundo aqui e atualizar a página. Refresque. E agora, quando eu redimensionar, veremos que a largura não está mudando, mas a altura está mudando. E nós poderíamos tomar algum tipo de ação se a página de alguém tiver, por exemplo, nos 87 pixels de altura, fazer outra coisa, você poderia dar a eles um aviso. Você poderia, você poderia literalmente excluir tudo do seu Document Object Model e apenas dizer, hey, seu navegador é uma maneira de pequeno para este site. Na verdade, seu navegador, se tiver 87 pixels de altura, é muito pequeno para qualquer site. E é assim que redimensionamos a janela. Agora não é realmente muito útil neste momento. E eu não uso isso em um número de provavelmente um número de anos. Mas é bom saber porque às vezes eu corro em código antigo que está fazendo isso e, em seguida, eu apenas convertê-lo sobre a consulta de mídia CSS para torná-lo responsivo. E este é um tipo de onde CSS começa a assumir o JavaScript. Mas às vezes você precisa saber isso em JavaScript também. Especialmente se você estiver indo para criar um jogo de algum tipo. Se você estiver indo para criar um jogo, você vai querer saber quais são as dimensões do jogo, a janela de exibição, esse portal de jogo aqui, toda esta seção branca, você vai querer saber o que é esse tamanho e trabalhar com ele. 32. jQuery cada loops: Tudo bem, bem-vindo de volta. Vamos falar sobre looping através de elementos. E então quando temos um seletor de algum tipo, algum tipo de elemento, este poderia ser um elemento ou este poderia ser vários elementos. E um bom exemplo disso é se temos uma lista desordenada com um aliado aqui, primeiro item, segundo item, terceiro item. E selecionamos todos esses aliados. E se quiséssemos fazer algo diferente com todos esses aliados? Mas ainda queremos selecionar todos eles. Queremos selecionar cada um desses três elementos de item de lista. Bem, se fizermos o texto do ponto LI, isso vai mudar tudo em todos os três. E, com certeza, fez. Isso não é o que estamos procurando. Talvez queiramos fazer algo diferente para cada um deles, mas queremos usar um seletor. Então podemos fazer LI e pegar o primeiro. Podemos fazer um seletor como este. Fazemos primeiro, podemos fazer por último, ou podemos percorrer todos estes e fazer algo diferente com base em um seletor. E às vezes fazer um loop é a maneira certa de fazer as coisas. É só uma maneira mais rápida de fazer as coisas. Então podemos dizer ponto cada. E isso vai ter um índice de função. E o elemento. E esse elemento em si vai ser todo esse elemento aqui. E esse índice vai ser, é a primeira iteração, segunda iteração, terceira iteração. Então, agora podemos salvar o próprio elemento, que é muito parecido com dizer isso que já usamos antes. Mas isso é apenas referindo-se a este elemento particular neste loop. Texto de ponto vai ser índice novo item aqui. Então, quando eu atualizar a página, você pode ver que ela diz 0 novo item aqui, um novo item aqui para novo item aqui. Agora, se você é um pouco novo em JavaScript e você é como, bem por que ele diz 0? É porque os computadores tecnicamente começam a contar em 0 em vez do número um. Podemos sempre fazer o índice mais um só para compensar isso. São Rio, novo item aqui, novo item aqui, novo item aqui, 1-2-3. Se vermos a nossa fonte , são apenas as coisas antigas que tínhamos. Não são as coisas novas. Agora podemos dizer algo como se o índice for igual a dois, selecione este elemento. Mude em CSS para ter uma cor de fundo de preto. E então podemos acorrentá-los juntos. E já fizemos isso antes. Eu mudo a cor para ser branca, por isso vai inverter as cores. E é como este aqui. Lembre-se 012. Agora também não temos nada a ver com mentiras. Nós podemos fazer isso com dibs e vamos em frente e mudar esses dois divs vai pegar cada div na página vai loop através deles. Diz o primeiro item, o segundo item, o terceiro item, algo deu errado lá. Oh, porque eu não mudei meu seletor. Lá vamos nós. Um novo item aqui para novo item aqui, três novo item aqui. Poderíamos até ficar mais chiques com isso e manter seu texto original. Então, podemos dizer algo como o texto original de Kahn é igual a este elemento 2.txt. E vamos jogar isso aqui como uma variável, texto original. E então agora nós não numeramos primeiro item, segundo item, terceiro item com um número dinâmico lá dentro. Agora, se quiséssemos, poderíamos fazer qualquer coisa ridícula com isso. Podemos multiplicar isto por 303. Lá vamos nós. Então temos 036. Podemos fazer o que quisermos. Isso é apenas trabalhar com o índice, o próprio elemento. Você pode fazer qualquer coisa com esse elemento e é apenas um seletores regulares. Então, lembre-se quando você está usando ponto h, É preciso dois elementos não são elementos, mas parâmetros. Seu primeiro vai ser o índice, onde na iteração de loop é, é a primeira iteração, segunda iteração, terceira iteração, et cetera, et cetera. E o segundo parâmetro é o seu elemento. E o seu elemento. Você pode então usar o seletor, que é muito parecido com dizer isso, mas nós não estamos realmente dentro da, a função. Não queremos que isso faça parte da função. Queremos o elemento em si. Então, selecionamos esse elemento e então podemos trabalhar com ele. E ele vai fazer isso para cada div que ele pode colocar em suas mãos, ou cada LI ou cada seletor de classe, qualquer coisa. O que eu gostaria que você fizesse aqui é ir em frente e dar uma chance a isso. Quero que você selecione um elemento que não tenha vários elementos na página. Faça pontuar cada elemento de índice de função. E então eu quero que você altere o texto ou trabalhe com o índice ou selecione esse elemento pelo menos e altere parte do CSS para que você saiba que ele está funcionando. 33. Como alterar atributos: Vamos falar sobre a mudança de atributos do elemento. E eu tenho um bom exemplo alinhado aqui. Então vamos dizer que temos um elemento de entrada e queremos mudar isso de texto para senha. E então a idéia aqui é que podemos escrever algo assim, mas e se quiséssemos que ele realmente se parecesse mais com isso, como senha, senha, senha e outras coisas. Podemos fazer isso facilmente. Então vamos em frente e selecionar essa entrada. Vamos fazer const. A entrada é igual a e, em seguida, apenas a entrada é a única na página. Então eu não tenho que me preocupar em ser específico com ele. E com o seletor. Então eu posso dizer o ponto de entrada ATTR, que significa atributo ATTR. Não digite texto. E então vamos registrar o console este ponto log do console este tipo. E isso deve dizer se fizermos isso texto certo. E vamos trazer isso à tona. Lá está ele. Erro de texto se fizéssemos 123123123. Sim, a mesma coisa. Cuco, cuco, legal, legal. Mas e se quiséssemos mudá-lo? Então isso é muito parecido com Val ou texto ou HTML. E o que eu estou dizendo aqui é dot val, dot text, dot html. Faz uma de duas coisas. Ou você dá a ele um parâmetro ou você definiu um parâmetro. E então estamos dizendo simplesmente obter o atributo type. Este é o nosso parâmetro. É apenas obter o tipo aqui que, que combina com isso. Agora, se quiséssemos mudar isso, poderíamos dizer tipo ATTR e, em seguida, mudá-lo para senha. E isso vai acontecer tão rápido e parece que vai acontecer nos bastidores. Mas quando eu digitar assim, depois que eu atualizar a página, vai parecer um campo de senha como este. Agora o que é legal é que se você quiser ver minha senha, eu posso simplesmente selecionar o tipo ATTR de ponto de entrada, e vamos alterá-lo de um campo de senha para um campo de texto. E você pode ver que minha senha está em texto simples agora, minha senha também é. Então é assim que obtemos um atributo e é assim que definimos um atributo. E apenas como um pequeno lembrete rápido, para obter um atributo apenas leva um parâmetro exatamente como esse. E se ele tem um segundo parâmetro vai tentar definir esse atributo. Na próxima lição, vamos em frente e começar a trabalhar com algumas coisas do Ajax. Ajax é muito, muito divertido. Está trabalhando com APIs. Estamos entrando em algum bom JavaScript aqui, algumas coisas realmente divertidas, mais coisas de nível de produção, mais tipo de JavaScript profissional que você vai estar escrevendo usando jQuery. 34. Solicitações do Ajax: Certo, vamos olhar para o ajax e alguns dados com um pouco de uma chamada de volta. Agora precisamos de um lugar para obter dados. E um dos meus favoritos é pantanoso dot dev é como uma API Star Wars. E se você for trocar e dot dev slash api slash pessoas slash um, você vai ver esta informação sobre Luke Skywalker. E então nós podemos realmente ir lá trocando dot.gov barra API slash pessoas barra um. E vemos toda essa informação. Mas Luke Skywalker, esta é a URL. Queremos que este seja um ponto final de API. Queremos ser capazes de obter esta informação, esta informação JSON, e acessá-la com bastante facilidade. Então o que podemos fazer aqui é se eu apenas mover isso para cima e na verdade não, vamos desencaixar isso é que temos acesso a jQuery aqui com um cifrão. Você pode ver que podemos usar ponto get e, em seguida, esse URL. Agora, se fizermos isso, vamos ver que é apenas um pedido normal do Ajax. Mas se eu limpar isso e dar-lhe uma função de retorno de chamada, nós sabemos sobre callbacks, nós sabemos sobre funções. Vamos fazer o ponto do console registrar os dados. E nós vamos ver que este é o pedido do Ajax aqui e estes são os nossos dados. E então estamos fazendo um pedido de obter aqui. Estamos simplesmente pedindo dados. E assim usando o sinal de dólar dot get, não há nenhum seletor aqui porque não estamos selecionando nada. E porque não há seletor, não temos um setor, é apenas sinal de dólar ponto get. E agora temos toda essa informação carregada em nossa página ou em nosso console pelo menos que estava disponível aqui, chamado Luke Skywalker altura 172 massa 77. 172, massa 77, nome Luke Skywalker. É tudo a mesma informação. E assim é como fazemos uma solicitação ajax simples em jQuery. Sabe floresta selvagem sobre isso é isso é tão incrivelmente simples. Podemos fazer ponto obter. E eu acabei de colar esse URL lá, os dados. E então podemos console nome de dados de log de pontos. Era isso que procurávamos, nome certo. Então vamos em frente e salvar isso. E vamos apenas atualizar esta página. E ele vai e pega. Diz que Luke Skywalker, podemos conseguir a altura dele. Poderíamos pegar o peso dele, se quiséssemos. Luke Skywalker 172. Espere, não estava lá. Chama-se massa. É por isso que sua massa é 77. E então agora não temos que se preocupar com como um buscar solicitações API. Não precisamos nos preocupar em levar esses dados e basicamente analisar o JSON e transformá-lo em um objeto JSON ou JavaScript. Nós não temos que nos preocupar com nada disso porque jQuery está fazendo tudo isso nos bastidores e ele faz isso com uma única linha de código com a função dot get que você vai precisar saber isso para o seu projeto final. Então eu recomendo que você dê uma chance para experimentá-lo. 35. Solicitações do Ajax: Tudo bem, na última lição, olhamos para um pedido GET jQuery. E nesta lição vamos olhar para uma solicitação jQuery post. E é assim que enviamos dados para um servidor e pedimos para atualizar dados ou criar novos dados. E isso é realmente, muito simples de, é apenas ponto post e, em seguida, algum URL aqui, alguns dados aqui, e uma função de retorno de chamada com os dados que serão retornados. Isso é literalmente tudo o que é. Então seus dados devem ser um objeto de algum tipo. Então nós temos que dizer “Olá mundo”. E esse URL que precisamos de um lugar para postar. E é muito, muito difícil encontrar um lugar para postar com segurança, mas encontrei um chamado HTTP bin. Então nós fazemos isso como uma URL, HTTPS dois-pontos barra barra HTTP bin.org barra post. E se quisermos, podemos colocar isso em linhas separadas só para fazer isso parecer um pouco mais agradável. E então podemos dizer console.log post foi completo com esses dados. postagem de dados Console.log foi completa com esses dados. E vamos dar uma olhada. Estes são todos os dados que temos de volta. Um HTTP, HTTP bin.org tende a nos dar todos os nossos dados de volta na forma de propriedade aqui. Então diz olá mundo, podemos colocar qualquer coisa lá dentro. Nós temos que dizer, Instagram é igual a em ponto de codificação para ponto todo mundo. Que se você quiser dicas de codificação grátis e truques definitivamente venha conferir isso. E formar a codificação do Instagram para todos. E assim sabemos que isso está realmente funcionando. Agora, se quisermos ter certeza de que não está funcionando, podemos sempre tentar pegar. Vamos fazer ponto obter e vai fazê-lo, vai criar uma solicitação get para a barra post URL. E você pode ver quatro ou cinco, isso significa que não é permitido. Você não tem permissão para fazer isso. Tem que ser um pedido pós-pedido. Então vá em frente e dê uma chance. Use HTTP bin.org. Não se esqueça que você precisa de HTTPS. Você pode encontrar esse erro se ele está vindo de um local não seguro para um local seguro, apenas certifique-se de que você tem aquele S e ali. Isso é chamado de sua carga útil. Estes são os dados que você vai enviar para eles. E então você tem uma função de retorno quando é feito, o que você está fazendo com esses dados? Tudo o que estamos fazendo aqui é fazer dados console.log. Agora isso é realmente, muito útil quando você está criando um aplicativo de página única ou aplicativo web progressivo onde você precisa de alguém para se registrar ou fazer login e você não quer levá-los para outra página, ou você tem um endpoint de API, ou eles têm que fazer login através de um site diferente, algo assim. Você pode enviar esses dados para outro lugar para processamento. E esses dados podem voltar normalmente na forma de JSON. E então jQuery pode lidar com isso muito graciosamente. Na próxima lição, vamos em frente e criar um gerador de personagens aleatório de Star Wars baseado em praticamente tudo o que fizemos neste curso. 36. Projeto final: Bem-vindos ao seu projeto final. Vamos criar um personagem aleatório de Star Wars, um gerador usando jQuery e JavaScript. Então o que eu quero que você faça aqui é ir para este URL aqui, eu vou ampliar para que você possa ver isso. E precisamos ir para este URL aqui. E podemos ver todo tipo de coisas que não queremos rotas tudo o que queremos uma identificação. Então vamos para a identificação. E podemos ir para, por exemplo, barra Star Wars API barra barra API ID um ponto JSON. E nós temos Luke Skywalker, e nós também temos uma imagem e um Wiki e todo tipo de outras coisas lá dentro. Poderíamos ir para o personagem. Acho que só tem 83 aqui. - Sim. Este não tem tanta informação, mas pelo menos tem um nome e uma imagem, que é tudo o que queremos neste momento. Vamos para 84. Há um, há um monte de novas informações aqui, eu acho. Mas não há 100 caracteres, não há 100. E vamos ver se tem 90. Vamos ver se há oitenta e sete, oitenta e oito, oitenta e nove. É importante que façamos isso. Ok, há 88 caracteres, então precisamos aleatoriamente obter um número entre 088 e ir para este URL e substituir 88 por um número aleatório. E então em nossa página eu quero que você seja capaz de mostrar o nome da pessoa e sua imagem. E então vamos precisar trabalhar com algum texto interno. Vamos precisar trabalhar com a mudança de um atributo. Vamos precisar trabalhar com um pedido get e alguns números aleatórios. Agora, eu quero que você, se você puder, se você sabe o suficiente, JavaScript tentou fazer tudo isso sozinho neste momento no tempo sem me ver fazer a minha solução. Agora, se você ficar realmente, realmente preso, primeiro de tudo, definitivamente ir e google, metade do desenvolvimento web é Googling material. Mas se você ficar preso no Google e você não sabe para onde ir, você sempre pode vir para o aprendizado de código do grupo Facebook ou simplesmente retomar este vídeo uma vez que eu desaparecer e desaparecer para preto. E depois podes ver-me a fazer a minha solução. Então eu quero que você vá em frente e nos dê uma chance de que pode parecer qualquer coisa que você quiser. A propósito, isso depende completamente de você. Faça com que pareça incrível. Se quiser, faça parecer terrível. Se você quiser, isso é 100% com você. Vá em frente e crie um gerador aleatório de personagens de Star Wars baseado na pouca informação que lhes dei. E eu propositadamente lhe dei muito pouca informação aqui porque isso vai ser uma prática muito boa. Como um desenvolvedor web profissional. As pessoas vão te dar muito pouca informação e você vai precisar trabalhar com ela de alguma forma. Então eu vou desaparecer e então eu vou desvanecer-me e você pode assistir a minha solução mais tarde. Então, certifique-se de pausar quando a tela ficar preta. Ok, vamos em frente e criar um gerador de personagens aleatório de Star Wars. Então, a primeira coisa que estou fazendo aqui é eu estou olhando para meus endpoints de API e eu estou lendo através dele. E isso é muito importante para ler através dele. Não leve o de outra pessoa, como a minha palavra de mais cedo. Na verdade, leia se puder. Então, temos uma URL base ou uma URL CDN em cache. Vamos em frente e usar este URL CDN de cache. E temos duas rotas. Então, podemos usar esta barra URL, todos os pontos JSON ou barra ID. Então vamos em frente e fazer slash. Um. Isso vai funcionar para mim? Não, isso não vai funcionar para mim. Tem que ser barra um problema ab.js IN provavelmente, certo? Não, isso também não vai funcionar. Então isso não estava funcionando. Então nós lemos isso e vemos que isso diz ID, mas ele deve realmente dizer id e, em seguida, o ponto numérico JSON. Assim, a documentação poderia ser um pouco melhor aqui, mas vemos um exemplo disso aqui. Então vamos em frente e colocar esse URL aqui e fazer barra ID, barra 1 ponto JSON. E apanhamos o Luke Skywalker. Agora, quantos personagens existem? Qual é o nosso número máximo ou número máximo vai ser 89. Não, isso não vai ser certo. Vai ser barra ID barra 88 pontos JSON. Lá vamos nós, Capitão Plasmas, o último personagem que temos, então temos números um a oito, com os quais podemos trabalhar. Então vamos para o nosso código aqui e vamos criar um botão. E diz “gerar caráter”. E precisamos, quando este botão é clicado, ponto no clique, fazer uma função de coisa. Então isso é apenas registrar um clique regular eventos. Agora precisamos fazer algum tipo de solicitações GET. Podemos fazer ponto obter e então esse URL. E então eu tenho este URL aqui, e eu vou fazer isso apenas um toque menor como apenas 88 pontos JSON, o que quer que vai ser apenas retornado que está tudo bem. Podemos mudar isso mais tarde. E então queremos obter esses dados e console.log os dados. Queremos ter certeza de que isso vai funcionar para nós em nosso navegador. Então vamos voltar ao nosso navegador e atualizar nossa página, gerar caráter. E ele fez, ele tem o Capitão Deus fascinante, nossa informação aqui, isso é perfeito. Mas agora precisamos aleatorizá-lo porque se clicarmos novamente, ele vai continuar recebendo um plasma. Então vamos em frente e randomizar esse número. Sabemos que precisamos criar um número aleatório e isso não é jQuery, isso é apenas JavaScript. Para que possamos fazer constante. Número aleatório é igual a matemático ponto aleatório. E isso vai nos dar um número entre 01 vezes 88, e isso vai nos dar um número entre 188. E então nós queremos fazer matemático ponto selo. E então o que aleatório vai fazer é que ele vai realmente nos dar um número estranho. Vai ser 0, 1-2-3, 4-5-6. Isso vai ter um monte de decimais e nós não queremos isso. O que queremos em vez disso é o que esse número é multiplicado por 88 e, em seguida, aumentá-lo para o número mais próximo. Então, se é como 74.1, vai ser agora 75. E vamos em frente e mudar isso para um modelo literal. Este é apenas regular, simples e antigo JavaScript neste momento. E vamos colocar um número aleatório aqui. Vamos salvar isso e atualizar nossa página. Gerar um caractere 0 número aleatório não está em um erro de digitação em algum lugar bem ali. Certo, vamos tentar de novo. Aqui temos um Chewbacca ID 13. Identificação, identificação 21. Estes são todos números baixos. Estranhamente, identificação 64. Lá vamos nós. Agora precisamos saber o nome e a imagem deles. Então temos todo o tipo de coisas. Nós temos como quando eles nascem, local nascido blá, blá. Queremos o nome deles como palpação e uma imagem. Então, vamos apenas abaixar isso só um pouquinho. E vamos colocar um nome aqui. Então vamos fazer o nome H1. Vamos deixá-lo vazio e vamos selecionar uma imagem. O Src não vai ser nada também. Por favor, dê a este uma classe de caráter I mg. E vamos em frente e trabalhar com um pouco disso. Então agora sabemos que podemos preencher nome com nome de dados, nome dados, e isso é acessível. E quando eu clico aqui, estes são todos os dados em um objeto. Posso rolar para baixo até o nome. Então agora eu posso selecionar esse nome. Eu posso fazer o nome do ponto H1. 2.txt vai ser o nome de dados. E assim não vemos nada. Boom, boom, boom, olha isso. Está funcionando tão bem agora. Vamos em frente e adicionar uma imagem também. E isso também, vamos diminuir o zoom porque estamos em 250% que está se vestindo para ser demais. Agora podemos selecionar essa imagem, podemos selecionar o personagem IMG. Podemos selecionar esse atributo de SRC e configurá-lo como o que temos, o que aqui dentro. Se olharmos para ele, é apenas chamado de imagem. Então fazemos dados, IMG. Certo, vamos ver se isso funciona. Está bem. Não faço ideia de quem seja, mas fixe. Cuco, cuco. Tudo bem. Tudo bem. Tudo bem, sim, isso está parecendo muito bom. Então basicamente temos isso funcionando agora. Agora podemos fazer isso um pouco mais agradável se quisermos adicionando um pouco de estilo. Para que pudéssemos fazer algo como estilo. Podemos selecionar o nosso H1, alinhar texto, centro, text-decoração, sublinhado, família de fontes. Vamos fazer uma fonte San Serif. Não importa qual é a fonte, apenas uma fonte Sans Serif. E vamos gerar o nome do personagem por baixo disso. Vamos fazer o botão. Display vai ser Block, margem vai ser auto, e isso deve ser centrado. Lá vamos nós. Isso parece um pouco melhor. Vamos em frente e estilizar essa imagem um pouco. E nós fazemos IMG. Largura vai ser, digamos 200 pixels. A altura vai ser automática. Sombra Bach. Dez pixels, dez pixels. Vamos dar um pouco de borrão. E vamos torná-lo preto. Agora vamos ver como isso se parece. Oh, essa imagem não apareceu e provavelmente não tem uma imagem. Ok, nada mal, nada mau. Vamos em frente e centralizar isso também. Vamos fazer exibição, bloco, margem, automático, gerador de personagens, Greedo, gerador de personagens, fechadura, gerador de personagens, todo tipo de pessoas aqui, olhe para isso. E então esse é o nosso gerador aleatório e de caráter. É uma foto aterrorizante. E fizemos isso tecnicamente em cerca de sete linhas de código. Sim, está em algum lugar lá. Então temos mapeamento executar 12345678 linhas de código. Então temos o nosso ouvinte de eventos. Sempre que você clicar no botão aleatoriamente obter um personagem. Criar aleatoriamente um personagem ou um número, em vez alugar aleatoriamente criar um número, obter. E então apenas a URL, essa é a URL da API. E em vez de obter como 88 pontos JSON ou um ponto JSON, e nós apenas dissemos, toda vez que você clicar nesse botão, crie um novo número aleatório e coloque-o aqui. Então, quando isso é feito, temos uma função de retorno de chamada e estamos simplesmente recebendo o nome e a imagem, e estamos definindo esse nome H1 e o atributo Imagem de caractere, o SRC. Isso é tudo o que há para ele. Agora, o meu é bem feio. Se você quiser pegar meu código e torná-lo significativamente mais bonito, por favor, seja meu palpite que eu adoraria se você pudesse fazer isso. Não se esqueça de compartilhar seu projeto. É muito importante que você compartilhe seu projeto com o resto da turma. É inspirador e útil para outras pessoas ver seu código e ver no que você tem trabalhado. Uma última coisa, se você é como, bem, o que é Math.sqrt, matemático ponto aleatório. Estes foram abordados em JavaScript um-para-um e JavaScript para um também, onde nós realmente fizemos um projeto muito, muito semelhante usando apenas JavaScript baunilha simples. Desta forma é apenas um pouco menos código usando apenas jQuery em linha reta em vez de apenas reta. 37. Resumo: Obrigado por tomar jQuery um-para-um comigo, Caleb, dizendo, espero que você aprenda a amar como jQuery é fácil trabalhar com. Não se esqueça, você também pode me acompanhar nas mídias sociais no Caleb Tall lean on Twitter. Ou para pequenos trechos de código incríveis e atualizações em novos cursos. Você sempre pode seguir ponto de codificação para ponto todos no Instagram. Por fim, se você está procurando por uma comunidade de revestimento, junte-se a aprender a codificar no Facebook. É um grupo completamente livre e você pode fazer qualquer pergunta de desenvolvimento web qualquer que seja. Obrigado novamente por tomar jQuery 101 e espero vê-lo em outro curso. Feliz codificação.