jQuery MasterClass - com animações de sites

1. Apresentação: Bem-vindo ao curso definitivo de jQuery. Neste curso, você aprenderá tudo sobre jQuery, como adicionar animação usando jQuery, como chamar API usando Ajax e muito mais leitura africana. Este curso pode começar imediatamente a usar o jQuery para seus sites. E você aprenderá esses incríveis truques de animação, que hoje em dia os sites modernos têm. Estou muito empolgada com este curso e espero que você também esteja. Vamos mergulhar nisso. 2. 01 O que é o jQuery: Então, o que é jQuery? Jquery é uma biblioteca de JavaScript leve para acessar facilmente elementos DOM e adicionar ações a eles. Alguns diálogos em que diz que o jQuery está menos certo e faz mais coisas. Em palavras simples. Jquery é a forma de atalho para escrever código JavaScript. Exemplo. Se quisermos adicionar um ouvinte de eventos de clique para um botão, você pode escrever o mesmo código com jQuery em uma única linha. Esse é o poder do jQuery. A biblioteca Jquery tem muitos recursos como manipulação de DOM, manipulação de estilo, ouvintes de eventos, efeitos, animações, Ajax para fazer solicitações HTTP e muito mais. Existem muitas bibliotecas de JavaScript, mas o jQuery é a melhor e mais popular biblioteca para JavaScript. E se você estiver trabalhando em quase todos os projetos de sites, jQuery é muito útil para isso. Há muitas grandes empresas reduzem o jQuery para seus sites, como Netflix, Google, Microsoft, Reddit, Stack Overflow e muito mais. Então, depois de aprender o jQuery, você pode adicionar o jQuery à sua pilha de tecnologia. Isso também o ajudará a conseguir o emprego ou a se tornar um desenvolvedor web melhor. 3. 02 Configurando o ambiente: Vamos configurar rapidamente nosso ambiente para este curso. Na caixa de descrição, você obterá o arquivo zip de recursos, baixado e descompactado. Nesta pasta Recursos, você obtém essa pasta inicial do jQuery, abre e abre essa pasta no VS Code. Agora, aqui está um arquivo index.html e um arquivo script.js. Eu vinculo esse arquivo script.js ao nosso arquivo HTML. Então, vamos executar esse arquivo HTML com o servidor ativo. Então, não precisamos reprimir nosso navegador a cada vez? Se você não tiver essa polegada extra, sugiro que instale essa aceleração. Agora vamos abrir o console e ver se ele está funcionando. 4. 03 Como instalar o jQuery: Agora, primeiro de tudo, vamos ver como adicionar projetos jQuery, HTML, CSS e JavaScript. Portanto, há duas maneiras de adicionar jQuery em nosso projeto. Podemos baixar o arquivo jQuery. Como começar a usar o link CDN. Você pode usar o que quiser. Depende totalmente de você. Antes de tudo, vamos ver como baixar o arquivo jQuery. Acesse jquery.com e clique no botão Baixar jQuery. Agora, se quisermos ver código significa o que está dentro do arquivo, clique na versão de desenvolvimento do jQuery. E se você não quiser ver esse núcleo, pode usar a versão compacta do jQuery. Ambos os acordes são iguais, mas a diferença é que o arquivo de versão compactado é menor do que o arquivo da versão de desenvolvimento porque, no glomérulo ou nas zonas, eles removem todos os espaços desnecessários. É por isso que não podemos ler o código nesse arquivo. Eu copio aqui comprimir a pessoa pontuada. No código VS. Criamos um novo arquivo chamado jQuery dot js e colamos esse código nesse arquivo. Salve isso e agora em nosso arquivo HTML no final do corpo. E antes da tag de script, adicionamos mais uma tag de script. E fonte, jQuery dot js. E é isso mesmo. Instalamos nosso jQuery. Agora, vamos ver a segunda maneira, que é a maneira mais simples e fácil. Voltar ao nosso navegador. E role para baixo nesta página em outra seção de CDNs. Aqui temos o Google CDN. Clique nele e copie este último bairro a3x. Agora, volte ao VS Code e descomente essa tag de script. E depois disso, baseie esse link CDN. Se você não quiser usar a forma de postagem, você pode remover essa tag de script mais antiga. Vou guardar isso para sua referência. E é isso mesmo. Instalamos com sucesso o jQuery em nosso projeto. 5. 04 Sintaxe do jQuery: Então, como eu disse, o jQuery é muito útil para acessar elementos DOM e realizar ações para eles. Então, aqui está uma sintaxe básica do jQuery. Quais elementos do Access DOM não confundem isso. É realmente muito simples. Deixe-me mostrar que a sintaxe tem três partes principais. O primeiro é esse dólar. O dólar é atribuído para acessar o jQuery a partir do CDN. Baixe esse arquivo jQuery localmente. Depois disso, temos o seletor, que é usado para definir o elemento ou elementos, por exemplo, reescrever dólar p. Em seguida, ele selecionará todos os elementos do parágrafo em nosso arquivo HTML. E, finalmente, temos ação, que é a ação que queremos realizar. Que exemplo aqui simplesmente adicionamos ocultar. Ocultar é a ação que queremos realizar para todos os elementos do parágrafo. Então, apenas esse trecho de código oculta todos os elementos do parágrafo em nossa página da web. Você pode ver como é simples e fácil ocultar todos os elementos do parágrafo. Então, desenvolvedores de sites e grandes empresas gostam tanto do jQuery. 6. 05 selecionadores no jQuery: Os seletores são uma parte muito importante do jQuery porque ele é usado para selecionar elementos HTML da página da web com base no nome da tag, sobrenome, ID, atributos e valor dos atributos. Vamos ver como podemos fazer isso. Praticamente. O que é Stovall no arquivo index.html, adicionamos uma tag de parágrafo dentro dele. Basta adicionar texto aleatório com Laura e phi no início, parágrafo um. Agora eu dupliquei este parágrafo mais duas vezes e o altero para parágrafo a parágrafo T. Células e dê uma olhada. Temos três parágrafos. Agora, no arquivo script.js, reescreva variável excedente do jQuery, que é dólar. E então, entre parênteses, adicionamos B entre aspas duplas. Agora, temos que adicionar ação, digamos, esconder. Então você sabe o que acontecerá quando salvarmos o arquivo? Escreva sua resposta na caixa de comentários para que eu possa ver quantas pessoas estão aprendendo comigo. Agora salve isso. E C são todas etiquetas p ou ocultas. É assim que selecionamos todos os elementos do parágrafo. Se escrevermos aqui H1, isso selecionará todas as tags H1 da página da web. Agora, no arquivo HTML, adiciono vidro no segundo parágrafo chamado de segundo. Agora integridade, eu era de P. Adicionamos ponto segundo. Isso selecionará todos os elementos que estão em segundo lugar, que é nosso segundo parágrafo. Salve isso e veja que nosso segundo parágrafo agora está oculto. Se adicionarmos aqui P ponto segundo, ele selecionará todos os parágrafos cujo nome de classe é o segundo. Ele funciona de forma semelhante aos seletores CSS. Agora, para o terceiro parágrafo, id, terceiro. Agora você consegue adivinhar como podemos selecionar elementos por seu ID? Se usarmos ponto por nome de classe , usaremos here has ID. Simples assim. Certo? Tem o terceiro. Preencha isso e dê uma olhada. O parágrafo com id terceiro está oculto. Você pode ver como é fácil selecionar elementos no jQuery. Em JavaScript, temos que escrever o documento dot get element por nome de classe ou por ID. Agora, existem muitos seletores alfandegários no jQuery. Não quero aborrecê-lo cada seletor individualmente. Então, aqui está uma tabela de seletores e, na coluna de descrição, você pode ler sua descrição. É muito simples e fácil. Se você tiver alguma dúvida, então você vai me perguntar na seção de comentários. 7. 06 eventos: Portanto, os eventos são uma parte muito importante de qualquer página da web. É basicamente uma resposta às ações do usuário. Por exemplo, no site do YouTube, você pressiona F para ver o vídeo em tela cheia. Clique no botão Reproduzir para reproduzir o vídeo. Então, isso pressiona G e Gleick em eventos. Portanto, existem quatro tipos de eventos DOM disponíveis no jQuery. Eventos de mouse, eventos de teclado, movimentos de união e documento. O que fazemos em eventos? Então, vamos supor que Jack Miles urina. Observe que não estou mostrando todos os eventos porque é um pouco chato e demorado. Veremos eventos que geralmente são úteis para nós. Se quisermos verificar todos os eventos, você pode verificar a documentação oficial. Então, o primeiro evento é clicar no arquivo HTML. Eu adiciono um botão, digamos que esconda. E dê a isso um ID chamado btn hide. Agora, aqui o que eu quero fazer é quando clicamos nesse botão Ocultar, queremos ocultar esse segundo parágrafo no arquivo script.js. Primeiro, selecionamos o botão Ocultar. Portanto, o dólar tem uma altura de sublinhado btn. Agora, aqui adicionamos o evento de ponto e clique. Agora, neste método Click, temos que adicionar a função de retorno de chamada, que será executada nesse evento de clique. Então, funcione. E dentro dessa função, reescreva o dólar. Segundo ponto oculto. Basicamente, essa expressão significa quando você clica nesse botão btn Ocultar e executa essa função. E essa função ocultará o segundo parágrafo. Salve isso e dê uma olhada. Clique no botão Ocultar. E o parágrafo dois está oculto. Você pode ver como é simples adicionar um evento de clique. Agora, para o mouse, temos tantos eventos. Você pode escrevê-los sozinho. Agora, o teclado tem apenas três eventos. Pressione a tecla N para baixo. Aqui nesta página da web. Quando eu pressiono a tecla Esc , esse segundo parágrafo se esconde. E então, se pressionarmos ascii, o segundo parágrafo ficará visível. Então, para isso, adicionamos aqui dólar e parênteses. Agora, em qual elemento queremos adicionar esse evento chave. Queremos adicionar este evento em uma página da web completa. Então eu adiciono aqui corpo agora com a tecla de ponto pressionada. E passamos aqui a função. Agora, nossa tarefa é identificar se o usuário pressiona a tecla H ou ascii. Se você fizer isso antes nesse script, então você sabe que todo mundo tem seu objeto de evento. E obtemos esse objeto de evento como o parâmetro dessa função de retorno de chamada aqui, evento. E esse evento importou, chamado de praia, que retornará o valor ascii de k. O que vamos usar em seu núcleo de pontos de evento, que nos dará o nome da chave. Mas eu gosto disso, o que importa? Então, basta escrever o evento console.log, que é isso e pressionar edge. Veja isso. Então 72, que é o valor ascii da borda, e então pressione S e ele retorna um T3. Então, de volta ao nosso arquivo de script. Adicionamos aqui a condição de ponto do evento que é igual a 72, 10 dólares. Segundo. Esconder. Depois disso, adicionamos mais um evento ao vivo, dot v é igual a um T3. Em seguida, dólar. Segundo sapato, dias de venda e Degas olham para a borda e sua altura e pressione S e fica visível. Veja como é fácil com o jQuery. Agora, e se eu estivesse desligado? Nós os somamos e damos uma olhada. Agora eu pressiono a tecla Esc e não percebo. Agora, eu percebo isso. E o parágrafo está oculto. Então, quando pressionamos a tecla e depois de percebermos que ela funcionará por 99% do tempo, usaremos apenas o evento de tecla pressionada para o teclado. Agora, temos eventos em Guam, o que é muito útil quando trabalhamos com formulários. Portanto, a sintaxe de todos os eventos é a mesma para todos os eventos. Lavado, você precisa definir um seletor e, em seguida, o nome do evento de ponto e, em seguida, adicionar a função de retorno de chamada, que será executada nessa ação. Simples assim. Você vai escrever esses eventos sozinho. Se eu explicar isso, todos os eventos, um por um, exceto neste tutorial, não serão concluídos em 2 h. Então, experimente você mesmo. E se você tiver algumas dúvidas, então você vai me perguntar na seção de comentários. 8. 07 Esconder e mostrar efeitos: O método de ocultar e mostrar já vimos na última lição, essa é já vimos na última lição, essa a maneira mais fácil de ocultar e mostrar os elementos em nossa página da web. Agora, no método hide and show, também podemos especificar o tempo para concluir essa ação. Digamos que queremos esconder esse parágrafo em segundos. Esta função de altura. Passamos seu tempo em milissegundos, ou seja, 2000. E Taylor. Quando clicamos nesse botão , são necessários 2 s para se esconder. Aqui também podemos comprar a função de retorno de chamada para esse efeito de altura, que será executada após a conclusão desse efeito. Deixe-me mostrar o que quero dizer. Então, depois de algum tempo, passo sua função de retorno de chamada. E dentro dessa função de retorno de chamada, tarefa iodide console.log foi concluída. Isso. E agora eu clico nesse botão Ocultar e vejo como nossa animação é concluída. Em seguida, essa classe completou o sprint no console. Nessa função de retorno de chamada, também ocultaremos outros elementos, que se esconderão após a leitura desta animação. Agora que R1, mais impacto está ativado. Correntes laterais, esse alto defeito de alternar. E também no arquivo HTML, altere o texto do botão para alternar isso e dar uma olhada. Então, quando clicamos nesse botão de alternância, se nosso parágrafo estiver visível, ele se ocultará. E se não estiver visível, então parecerá simples assim. Agora, antes de irmos para o próximo tópico, eu queria dar uma dica muito importante para o jQuery. Então, sempre que você usar jQuery ou JavaScript, escreva seu código na função document.ready. Essa função garantirá que nosso conteúdo completo seja carregado. Portanto, no jQuery, podemos escrever um documento em dólar pronto para pontos. E dentro disso, passamos retornos de funções depois que nosso documento estiver pronto. Por que o dólar morreu novamente? Essa é a abreviatura de document.ready. Mas eu gosto de escrever esse primeiro porque se depois de algum dia eu não fizesse esse acorde, talvez eu esquecesse essa classificação. Mas você pode usar o que quiser. Está totalmente certo. Agora. Mais todo o código dentro dessa função. Perfeito. 9. 08 efeitos de desvanecimento e deslizamento: No jQuery, temos quatro tipos de defeitos que são usados para pagar a visibilidade do elemento. Fade-in, fade-out, toga e V2. Agora, esses efeitos são bem fáceis. A leitura é usada para atenuar o elemento. Deixe-me mostrar o lugar desse efeito de alternância. Eu apenas acrescento que desaparecem ainda mais esses argumentos para isso. A propósito, se não os removermos, também funcionará porque seus argumentos são quase válidos para todos os efeitos. Salve isso e dê uma olhada. Clique nesse botão. E Z, o segundo parágrafo está desaparecendo. Agora, desaparecer é para efeito de desvanecimento. E o fade toggle é muito útil para alternar o efeito de desvanecimento. No lugar desse fade-out, adicionamos o botão de desvanecimento. Então, dê uma olhada, clique no botão, clique no botão e diga ponto final. E os efeitos de desvanecimento estão funcionando. Agora, For it to Effect é usado para lidar com o valor de esmaecimento, que é 0-10 significa opacidade zero e um significa opacidade total. Aqui, certo? Cabem dois. Na função, temos que primeiro passar pelo período desse efeito, que é, digamos, lento. E então passamos em frente a D, que é, digamos, 01 phi. Salve isso e dê uma olhada, clique no botão e veja se o parágrafo está visível. Agora, vamos falar sobre efeitos colaterais que são apenas três efeitos de slide. Vamos ver todos os efeitos de uma vez. Então, acabei de substituir esse efeito de desvanecimento. Esses deslizam. Habilite esse argumento. Salve isso e dê uma olhada. Clique nesse botão e veja primeiro deslizar para cima e, em seguida, ele deslizará para baixo. Aqui. Você também pode passar a velocidade em milissegundos, lenta ou rápida. Este botão deslizante é muito útil para o efeito da barra lateral. 10. 09 Método do Animate: Agora vamos falar sobre o método animate no jQuery. Animate with her é usado para criar animações personalizadas. Esse método tem todas as mesmas propriedades, como outros efeitos, velocidade e retorno de chamada. Mas, de qualquer forma, temos que passar propriedades do objeto do CSS. O primeiro argumento, deixe-me mostrar. Aqui. Eu adiciono uma oferta com a caixa de vidro e adiciono um texto fictício aqui. E eu quero adicionar alguns estilos para essa caixa. Então, após o título, adicionamos a tag de estilo. E para a caixa, adicionamos peso 200 pixels, altura a 100 pixels. Cor de fundo para matéria escura. Salve isso e dê uma olhada. Veja, temos uma caixa de estomatos. Agora, quando clico nesse botão, quero alterar a largura, a altura e o tamanho da fonte dessa caixa de texto. Então, para isso, usamos a propriedade animada. Então, vamos remover esse efeito. Aqui mesmo. Caixa de pontos de dólar animada. Agora, na primeira posição, temos que passar o objeto das propriedades CSS. Queremos acorrentar. Então, adicione um objeto. E primeiro queremos mudar o bit Garland entre aspas duplas, 200 pixels. Agora, para adicionar várias propriedades, precisamos usar vírgula, assim como fazemos no objeto JavaScript. Agora, altura de 200 pixels, coma. Agora, se temos o nome da propriedade em palavras como tamanho único, então temos que converter isso em CamelCase, sódio move essas mortes e as torna capita. E 20 pixels. Salve isso e dê uma olhada. Clique nesse botão e veja a largura, altura e um tamanho alterado. Agora, às vezes, queremos adicionar 200 pixels na largura atual. Também podemos fazer isso nesse método. Aqui. Iodeto mais é igual a 200 pixels. Guarde isso e veja que aumentamos 200 pixels no debate atual. Agora, como outros efeitos, também podemos passar aqui a função de velocidade e retorno de chamada. Então aqui eu escrevo devagar. Preencha isso, dê uma olhada e veja. Recebemos essa pequena animação. 11. 10 Modificar HTML com o jQuery: Em primeiro lugar, temos alguns métodos para manipular elementos DOM. Podemos escolher o texto, quais elementos HTML, desde os valores desse atributo, etc. Portanto, existem três métodos para isso. Texto em pontos, usado para obter ou definir o conteúdo de texto dos elementos selecionados. Dot HTML, que é usado para obter nosso conjunto, o conteúdo com marcação HTML dos elementos selecionados. Bem, que é usado para obter ou definir o valor dos campos do formulário, como entrada, texto, selecionado, valor da caixa de seleção, etc. Vamos ver isso praticamente aqui. Eu quero obter o texto do segundo parágrafo. No botão, clique em. Acabei de experimentar o dólar. Texto de segundo ponto. Em seguida, pegue isso com as agendas de campos de registro de pontos do console e dê uma olhada. Clique nesse botão e z, o texto dentro desse segundo parágrafo. Agora também podemos definir o texto que quisermos neste segundo parágrafo para essa altura aqui, texto em dólar com segundo ponto. E aqui nesta questão de texto, acabei de passar outro texto como este é o Tutorial do jQuery. Essas agendas. E veja, quando clicamos nesse botão, o texto muda. Agora temos um segundo método chamado HTML, que é muito semelhante a esse método de texto. Então, no segundo parágrafo, eu apenas adiciono aqui uma tag em negrito. Este parágrafo dois. Agora, nesse arquivo script.js, dupliquei essa linha do console e substituo esse texto por HTML. Isso e clique neste botão. Desculpe, temos que comentar esta linha. Agora, o arquivo e veja aqui, obtemos o texto com elementos HTML. Portanto, o método fiscal retornará apenas o texto. E o método STR retorna o texto com elementos HTML. Simples assim. Agora você consegue adivinhar como podemos definir o HTML? Como dissemos, o texto, certo? Nós apenas escrevemos aqui como HTML. E conformação deficiente. Eu adiciono aqui minha tag. O que enfatiza isso? E z, recebemos texto em italiano. Então, isso é bem fácil. Agora, e se eu quiser obter o valor do elemento HTML? Digamos que esse botão. Aqui. O iodeto tem pele radiana. E depois disso, confiou método dot val para obter o valor desse elemento. Então, esses e no botão, temos que adicionar valor, valor da propriedade igual a b, d, e esses e z chegamos aqui. Agora, se quisermos alterar esse valor , também podemos alterá-lo passando o valor aqui em well matter. Agora, há mais um método ou atributos. Portanto, se quisermos obter um valor de atributo muito específico , usamos o método de atributo. Vamos ver o exemplo. Então, esquecendo o valor do atributo, temos que passar aqui o nome do atributo. E se quisermos definir o valor desse atributo , podemos passar aqui no segundo argumento, simples assim. 12. 11 Modificar CSS com o jQuery: Portanto, no jQuery, podemos facilmente adicionar, remover e alternar classes e inserir. Podemos manipular CSS de qualquer maneira fácil. E é muito útil para criar animações. Aqui, digamos que queremos adicionar uma caixa de aula. Qual é o nosso segundo parágrafo. Nesse botão, clique em reescrever dólar. Segunda turma de educação. E passe aqui o nome da classe entre aspas duplas. Esses. Quando clicamos neste botão, adicionamos o vidro See Walks. Vamos verificar isso. Inspecionar. Então, clique com o botão direito na caixa e vá para Inspecionar. vidro See Walks é adicionado aqui. Agora você já sabe o que o método de classe remota fará. Isso removerá a classe. Mas aqui está uma questão útil que é a questão do fecho de alternância. Então, no lugar dessa classe de adição, eu adiciono a classe de alternância. Agora, o método de luta é basicamente alternar uma classe que passamos entre aspas duplas. Salve isso e dê uma olhada. Veja, quando clicamos no botão, o vidro da caixa é adicionado e, em seguida, clique novamente. Em seguida, ele remove a classe da caixa. Esse método é útil em muitos lugares, como ícone da barra lateral quando clicamos no ícone de hambúrguer. E ele adicionará classe, modo que mostrará a barra lateral. E então clicamos novamente. Isso esconderá a técnica lateral, mas simples, mas muito útil. Agora deixe-me mostrar uma coisa muito legal. Aqui. Eu adiciono estilo por aula. Em segundo lugar, digamos 300 pixels. E dirija Jason. Tudo para todas as propriedades. Cinnabon, em segundo lugar, entra e sai com facilidade. Um estilo de caixa de entrada. Basta remover essa altura, que não é necessariamente um anúncio aqui, importante para a largura. Salve isso e dê uma olhada, clique no botão e veja que temos essa animação suave. Isso ocorre por causa dessa propriedade de transição. Então, se quisermos adicionar ou remover o vidro para animação, você usará essa propriedade de transição, que adicionará animação suave para você. Esses truques eu aprendi muito tarde na minha carreira de desenvolvimento web. Eu gostaria de saber isso para meus projetos de pós-graduação. E é por isso que estou te mostrando esses truques. Agora temos mais um método para modificar o CSS, que é o método CSS. É semelhante ao método animado que vimos anteriormente. O método Css é usado para obter ou definir as propriedades CSS do elemento selecionado. Digamos que queremos saber a cor de fundo desse negócio. Então eu escrevo aqui, dollar db dot box, dot CSS. Aqui passamos o nome da nossa propriedade, que é a cor de fundo. Essa expressão, religião, a cor de fundo da caixa. Vamos armazenar isso em uma variável chamada cor. E simplesmente considerado um registro. Essas mudanças de cor e z. Aqui temos essa cor. Agora vamos dar um passo adiante. Então, agora eu quero definir a mesma cor. Qual é o texto do terceiro parágrafo aqui. Eu gosto que o dólar tenha css de terceiro ponto. E qual propriedade queremos definir, certo? É cor. E qualquer valor que queiramos definir, temos que passá-lo em um segundo argumento. Digamos que quiséssemos definir isso para lê-lo aqui, assim. Agora queremos definir essa cor, que obtemos dessa caixa. Então, nós apenas escrevemos aqui a cor. Salve isso e veja a cor do texto escrito na cor de fundo desta caixa. Agora você pode pensar em como podemos definir aqui várias propriedades CSS. Então, para isso, temos que passar propriedades no objeto, assim como variedade em CSS, mas temos que escrever propriedades com aspas duplas. Deixa eu te mostrar aqui. Li esta propriedade com colchetes em vez desses dois pontos de reescrita por vírgula. Agora, se quisermos passar a segunda propriedade, adicionamos aqui vírgula e, entre aspas duplas, adiciono fundo, traço, cor, Goma, preto. Observe que podemos escrever aqui o nome da propriedade, o mesmo que V escrevendo CSS. Mas em qualquer método encontrado, temos que escrever isso em camelcase. E é por isso que os desenvolvedores usam essa propriedade CSS com mais frequência. Guarde isso e veja, temos nosso estilo aqui. 13. 12 Métodos de forma úteis: Eventos de bombardeio também são importantes no jQuery porque você vai usar para lidar com o formulário. Portanto, existem muitas formas de eventos, mas esses são os eventos de maior valor com os quais lidamos com qualquer tipo de poema. Se quisermos conhecer todos os eventos , você usará a documentação do jQuery. Mas, geralmente, você só precisará desses eventos ruins com palmeiras. Concentre-se, borre, Jane, submeta. Acabei de remover todo o código HTML do novo e adicionar um formulário com duas entradas e dois botões de opção para sexo e um botão Enviar. Agora, vamos ver os eventos do formulário. Então, o primeiro é focado, o que será acionado quando nos concentrarmos em algo. Digamos que selecionamos essa caixa de entrada. Você pode ver esse esboço , que é um sinal de foco. E quando clicamos fora dessa entrada, ela é removida do foco. Neste arquivo script.js. Entrada de hidreto em dólares para selecionar todas as entradas e, em seguida, adicionar um evento de foco para elas. Agora adicionamos aqui a função que será executada no evento de foco. E, com isso, quero mudar a cor de fundo dessa entrada específica, que está em andamento. Após a adição, não use a sintaxe constante de seta aqui porque o jQuery tem algum problema com essa sintaxe. Então, estou mudando a cor de fundo aqui. Mas você pode fazer o que quiser. Não há limites para isso. Agora, aqui, dólar, isso é selecionar o elemento de entrada atual e adicionar aqui o método CSS. E dentro dela, cor de fundo, coma, tomate. Salve as alterações. E David, C, quando nos concentramos na entrada, essa cor de fundo é mesquinha. Agora eu quero fazer isso de novo, certo? Quando essa entrada está fora de foco , temos um evento sanguíneo. Eu dupliquei esse código. Novamente, esse foco é desfocar e distorcer a cor amarela para esvaziar isso e ver quando nos concentramos na dívida, sua cor de fundo mudará. E depois, novamente, de volta ao normal. Agora, vamos ver o evento de mudança. Esse evento será acionado quando o valor de algo for alterado. Eu dupliquei esse núcleo mais uma vez. E no lugar do desfoque, adiciono um console.log. Dollar, essa teia escura. Salve isso e veja quando alteramos o valor desse botão de rádio, obtemos esse valor. E se escrevermos algo na caixa de texto e removermos a glicose dessa entrada, um valor de entrada mudará. E então podemos ver esse valor aqui. Agora, vamos ver o evento de envio. Até agora, envie o evento, temos que fornecer nosso ID de formulário, digamos, formulário de inscrição. Agora, no arquivo script.js, dólar, transições de risco e formulário. Em seguida, adicionamos o evento de envio. Agora passe a função, que será executada no envio. Nesta função, eu simplesmente envio com sucesso o formulário de registro de pontos do console e dou uma olhada. Quando clicamos nesse botão. Novamente, veja essa mensagem no console, mas apenas um milissegundo. E então nossa atualização de base. Então, vamos parar com isso. Então, no evento de envio, obtemos aqui o objeto de evento no primeiro parâmetro. E nesse objeto, temos um método chamado prevent default, que impedirá o comportamento padrão do evento submit, que está reprimindo a página. Então, certo, evento, não impeça o padrão. Salve esses e Degas. Veja, você pode ver aqui os formulários enviados. Então, esses são esses eventos de formulário no jQuery que ajudarão você no tratamento de formulários. 14. 13 AJAX no jQuery: Então, antes de começarmos a aprender Ajax, vamos entender o que é h, x e y que precisávamos. Asic significa JavaScript assíncrono. E XML. Em palavras simples, is x significa carregar dados em segundo plano e exibidos na página da web sem recarregar a página inteira. Muitos aplicativos populares, como Gmail, Instagram, Facebook, YouTube e muitos outros, usam o Ajax para carregar dados em segundo plano e atualizar os dados existentes. Se você perceber que, depois de carregar este site, mesmo que os alunos tenham enviado algo ou alguém para seu e-mail , ele não carregará o site inteiro. Isso pode ser feito pelo HX. O Hx em si é um pouco complexo, mas também podemos usar o Ajax no jQuery de uma forma muito simples. Portanto, o jQuery fornece vários métodos para a funcionalidade do Ajax. O primeiro é menor , usado para carregar dados do servidor em conteúdo HTML. Em segundo lugar, ainda, que é usado para carregar dados do servidor usando a solicitação HTTP GET e post, que é usada para enviar e carregar dados do servidor usando a solicitação HTTP post. Vamos começar com o número um, que é baixo. Então, aqui eu demonstrei esse acorde anterior no arquivo JS. Não precisamos mais disso. E também do arquivo HTML. E adicione aqui apenas um acordo com a saída do id. Agora eu crio um novo arquivo chamado sample.txt. E dentro dele eu adiciono um texto, como se fosse um exemplo de texto. O que é x em D? Grady? Salve isso. Agora, nesta saída, quero exibir esse texto que escrevemos neste arquivo sample.txt. Portanto, no arquivo script.js, rewrite dollar tem uma saída na qual queremos exibir o texto. Lorde das trevas. Agora, no primeiro parâmetro, adicionaremos aqui o URL do nosso arquivo, que é sample dot dx dy. Então, se quisermos enviar dados com essa solicitação , podemos passar esses dados no segundo parâmetro. Mas aqui, não queremos passar dados, então não escrevemos nada. Agora, finalmente, temos uma função com três parâmetros, estatísticas de resposta e uma XHR. Vamos consolar cada um deles. E z, o que obtemos? Isso? E Degas, veja aqui nós recebemos nossos textos e no console, em resposta, recebemos nosso texto. Em vez disso, como texto. Obtemos sucesso porque obtemos esses dados com sucesso. E um XHR, que é um objeto de solicitação HTTP XML. Nós podemos fazer algo assim. Aqui eu passo a condição. Se x for igual a sucesso, então alerte o sucesso. E se o texto de status for igual a dois erros, então o adicionador de alerta mais o texto de status do ponto XHR. Guarde isso e veja, chegamos aqui ao sucesso. Agora eu cometo um erro de digitação no nome do arquivo e depois selo isso z que chegamos aqui em Não foram encontrados. É assim que obtemos dados usando o método de carregamento. Agora, vamos ver como usar getMethod. Eu comento esse objetivo. E depois disso, o dólar de iodeto não ganha. Agora, como comando plus star, você precisa passar nossa API, adicionar n. Então, volte ao navegador e procure por Jason Place holder. Abra este link. Role para baixo e aqui você obtém a API para degustação. Quero obter os dados desse usuário. Então eu copio esse URL. Agora, para o segundo parâmetro, temos que passar a função de retorno de chamada, que será executada depois que obtivermos os dados. E também obtemos dados e status como parâmetros. Agora vamos simplesmente console.log esses dados e declará-los. E dê uma olhada. Aqui temos uma variedade de usuários. E status é sucesso. Nesta função, você fará o que quiser para exibir esses dados usando o loop em nossa página da web ou qualquer coisa. As possibilidades são ilimitadas. Só você tem que pensar. Agora vamos ver como usar o método post. O método geralmente é usado para enviar dados. Então, acabei de escrever aqui um post em dólares. Agora você consegue adivinhar qual será o primeiro argumento? Certo? É o URL da API. Eu simplesmente colo a mesma API e os usuários destinados a postar, que é usada para adicionar uma nova postagem. Agora, anteriormente, adicionamos função de retorno de chamada, segundo argumento. Mas aqui adicionamos dados como segundo parâmetro. Esses dados dependem de APA, de uma API diferente, no entanto, um objeto de dados diferente com título. Isso são dados e corpo. Isso é corpo. E, finalmente, temos que passar a função de retorno de chamada. Então, eu apenas copiei do GetMethod e colei aqui. E dê uma olhada. Veja, aqui obtemos esses dados com 101 ID de postagem e o status é sucesso. Então é assim que o Ajax funciona no jQuery. Hoje em dia, usamos o método de receita, que é ainda mais fácil do que isso. Eu só queria te mostrar em jQuery, mas você pode usar o que quiser. Depende totalmente de você. 15. 14 site do animate no deslocamento: Agora é hora de aprender algo mais empolgante, que todo desenvolvedor web deve aprender. E isso é integração vertical no scroll. Veja como esse site fica lindo quando adicionamos animação no scroll. Então eu dei este site do projeto. Assim, você pode praticar animação diretamente neste site. Este projeto eu criei quando estava trabalhando no curso de HTML e CSS. Mas eu parei a criação desse curso por algum tempo. E focando apenas nos tutoriais do YouTube. Eu abro esse projeto, esse arquivo index.html, que vive no servidor. Vamos entender a lógica dessa animação. Nós rolamos a página da web. Quando esta seção será exibida. Em seguida, temos que exibir essa seção com animação. Então, aqui temos que executar apenas duas etapas. Temos que identificar em qual ponto esse conteúdo será exibido. E em segundo lugar, temos que adicionar animação para esse conteúdo. Então, a primeira pergunta é como podemos identificar o conteúdo. Então, para isso, usamos um plugin jQuery chamado pontos de pagamento, água adicionando qualquer missão, usamos uma biblioteca chamada Animate ab.js. Essa biblioteca tem quase 100 estilos de animações. Os dois problemas estão resolvidos. Agora vamos ver isso no carvão. Então, primeiro de tudo, temos que adicionar três links de CDN para isso. O primeiro é para jQuery, depois para waypoints e, em seguida, para qualquer main.css, jQuery CDN, abra esse primeiro link e vá para esse CDN reduzido. Copie isso, e no final do corpo. Baseada nisso. Agora, volte ao navegador e pesquise os waypoints CDN. E abra esse link do CDN GAS. Agora, certifique-se de copiar este link CDN do jQuery dot waypoints dot js. Agora, depois do jQuery CDN, link CDN. Agora, novamente, o navegador vetorial respondeu CSS animado neste primeiro link. E na seção de instalação e usos, você obterá o link do CDN, copiará e colará na seção principal. Agora, para escrever código jQuery, temos que criar um arquivo js. Eu crio uma pasta chamada Jazz. E nessa pasta, crie um novo arquivo chamado script.js. Agora vamos vincular esse arquivo ao nosso arquivo index.html. Após o link do waypoint CDN, adicionamos o script com a fonte. E aqui, sim, é menos script.js. Salve isso e volte para o arquivo script.js. Aqui, adicionamos o documento em dólar pronto para pontos. E dentro disso adicionamos função. A configuração está concluída. Agora vamos ver sobre animação. Digamos que West, queremos adicionar animação ao título deste sumário. Portanto, no arquivo HTML, temos que fornecer a classe ou ID desse elemento. Podemos selecionar esse elemento específico usando essa visão lateral aqui, classe é igual a dois índices de conteúdo. Dados. Salve isso. E no arquivo script.js, título da tabela de conteúdo do dólar, waypoint. E nisso, temos que passar uma função que será executada quando esse elementar estiver no topo da página. Agora, dentro dessa função, chamamos o que é nossa animação. Basicamente, o que queremos fazer quando esse elemento chegar ao topo? Então, por enquanto, eu apenas escrevo console.log até o topo. Vendas são. E dê uma olhada, abra o console e role a página. Veja, quando esses dados chegam ao topo, recebemos essa mensagem. Então, o waypoint está funcionando. Agora vamos adicionar animação para isso. De qualquer forma, site dot css. A partir daqui, você pode selecionar os diferentes tipos de animações. E quando passarmos o mouse sobre eles, você verá um ícone de cópia. Agora, aqui, eu quero esse período na animação à esquerda. Então copie esses inimigos no nome da classe. No arquivo script.js. Aqui mesmo. Tabela de dólares contida. Classe de idade para cães. Antes de tudo, temos que escrever aqui, animar, sublinhar duas vezes qualquer classe de método porque, sem dívidas, qualquer animação não funcionará. E depois disso, simplesmente colamos nossa animação. Então, esses Andes e as marcas coloridas desta página. E quando esse título chegar ao topo, veja, podemos ver a animação. Mas aqui está o único problema. Quando não chegamos ao topo, esse título ainda está visível. Então, temos que esconder isso primeiro. Na pasta Estilos. Abra esse estilo nesse arquivo CSS. Oi Dan, iodeto, um estilo de comentário para animação. Para um título de índice de vidro. Fizemos a opacidade chegar a zero. E depois desse sumário de vidro animado, título animado, sublinhado duplo animado. Transformamos a opacidade em um. Este é o vidro que adicionamos em nosso método de classe ED. Salve isso e veja qual estado não está visível. Em seguida, chegamos ao topo. Em seguida, essa animação é executada. Agora, aqui está uma última edição. É isso, queremos ver a animação quando o título for elevado para metade da tela logo no início. Para mostrar que nessa função de waypoint, temos que passar um segundo parâmetro, que é objeto e objeto indireto. Temos uma propriedade chamada offset. E entre aspas duplas, passe de 50 a 80 por cento, o que quiser. Salve isso e dê uma olhada. Veja, quando esse título chegar a 80 por cento no topo , essa animação será exibida. Então você pode ver como é simples aplicar essa animação. Agora eu quero que você experimente essa mesma animação desses três títulos principais. Pause o vídeo e tente resolver isso. E depois disso, você vai ver a solução para esses títulos. Eu já lhes dei identificações. Então eu dupliquei esse código. No local desta aula. Nós adicionamos sua introdução. Aqui, também tem uma introdução. E em style.css, temos que adicionar o mesmo estilo para a introdução do ID. Nós adicionamos aqui uma vírgula e adicionamos uma introdução. Aqui. Introduza, anime, sublinhe duas vezes, anima-os e veja como obtemos essa animação. Agora, aqui no arquivo script.js, criei uma variável. Vamos deslocar esse objeto de deslocamento. Então corte isso e cole aqui. Agora, basta escrever aqui, deslocar aqui também, remover esse objeto e adicionar Offset. Veja, agora nosso código parece melhor. Agora, não quero aborrecê-lo mostrando todas as animações deste projeto. Você vai tentar isso sozinho. Então, muito rápido, adiciono todas as animações para este projeto, exceto esses links e a duração. Porque temos que adicionar aqui um atraso para esses dois últimos links. Para esse atraso, precisamos fornecer a cada link uma classe ou ID exclusiva no arquivo HTML. Aqui, liste o item, mantenha pressionada a tecla Alt no Windows e a opção no Mac. E crie vários cursores clicando em. E a classe certa. Listar sublinhado, sublinhar um. Agora aperte os motores de escape, esses dois para este ou três dias. No arquivo script.js. Eu copio a animação desse título. E no final, eu colo. Agora só no seletor. Então, lista escura, vincule uma aqui. Então, liste o link um. E em animação, eu quero pagar, certo? Agora, replique essa meta mais tempo e altere os seletores. Ouvindo, ouvindo e menos vinculado. Lista vinculada a três dias. E no arquivo CSS Shine dot, fazemos o mesmo para essas três classes. Essas cores do NDA. Agora você pode perguntar: qual é o atraso? Até agora, atraso no arquivo style.css, adicionamos o link da lista de pontos a um atraso de animação de 0,15 s. Agora duplique esse estilo e altere para a Lista vinculada três e o atraso para 0,3 s. Então, os participantes, e dê uma olhada. Veja, temos essa animação incrível. Mas a cada link e compra esta animação, o usuário saberá que nossos links individuais. Assim, você pode ver como é simples e fácil adicionar animação na rolagem. Só você tem que entender a lógica. Espero que você aprenda muito com esse tutorial.