Eventos jQuery | Explicado
O jQuery também foi projetado para lidar com eventos na página da web, os eventos (se você ainda não está familiarizado) são ações do usuário que fazem com que uma página da web reaja. Para explicar melhor os eventos, podemos dizer que qualquer ação a que uma página da web possa responder é conhecida como um evento da página da web, por exemplo Mouse-over, clique, carregamento de documentos.
Eventos jQuery | Sintaxe e métodos de evento
A sintaxe dos eventos jQuery é usar um DOT-Operator Após a função da fábrica $ () que contém os seletores.
$ ("p").clique();
Com a linha acima, um ouvinte de evento é criado, o próximo passo é definir o que fazer quando esse evento específico for executado. Para fazer isso, defina a função dentro dos parênteses do evento como:
$ ("p").clique (function ()
// corpo da função
);
Eventos jQuery | Exemplos
Para demonstrar o funcionamento de eventos jQuery e manipuladores de eventos, vamos configurar uma página da web html com o JQuery hospedado no Google CDN incluído em sua tag de script:
A página da web html contém essas linhas para configurar nossa página da web de teste:
Eu troco de cor na carga
Olá! Eu sou LinuxBot
Clique duas vezes em mim!
Clique para me esconder!
Se você executar o arquivo HTML, obterá o seguinte resultado no navegador:
O primeiro evento que vamos repassar é o documental em pronto evento. Este evento é executado automaticamente quando o DOM verifica que a página da web foi completamente carregada e não está aguardando mais ações ou respostas. Então, vamos mudar o fundo do Tag na carga do documento, com as seguintes linhas de código:
$ (documento).pronto (function ()
$ ("H1").CSS ("Background", "Red");
);
Você obterá a seguinte saída:
Como você pode ver, fomos capazes de alterar a cor de fundo do H1 com eventos jQuery.
O Em seguidat vai ser o pressione o botão, Vamos solicitar ao usuário o nome dele no botão pressionar. Use o código:
$ ("botão").clique (function ()
var xyz = prompt ("Digite seu nome completo");
);
Você obtém a seguinte saída ao pressionar o botão:
Como você pode ver, ao clicar no botão que diz “Clique em mim!”, Uma caixa de diálogo imediata foi mostrada pedindo o nome completo do usuário.
Os eventos de cliques do mouse são bastante comuns, mas algo que é amplamente utilizado é o evento de clique duplo. Para demonstrar isso, vamos exibir uma mensagem na tela como um alerta quando o usuário clica duas vezes no parágrafo com o ID “dblClick”Com as seguintes linhas de código:
$ ("#dblClick").dblClick (function ()
Alerta ("Tenha um bom dia!");
)
Com as linhas acima, a saída é como
Ao clicar duas vezes no texto, uma nova caixa de diálogo de alerta foi mostrada ao usuário com uma saudação.
Podemos até usar o “esse”Referência ao trabalhar com eventos jQuery, para demonstrar que vamos ocultar o texto com o ID“esconderApós o clique. Fazemos isso usando as seguintes linhas de código:
$ ("#hide").clique (function ()
$ (isso).esconder();
);
Você obtém a seguinte saída ao clicar no texto que diz “Clique para me esconder!”:
O texto estava escondido ao clicar nele uma vez.
Conclusão
A biblioteca jQuery fornece a funcionalidade para gerenciar e reagir a eventos da página da web, essa é a razão pela qual o jQuery é referido como “Sob medida”Para manuseio de eventos. Os eventos jQuery são adicionados à função seletor de jQuery ($ ()) Ao usar um operador de pontos, isso cria um ouvinte de eventos nesse elemento que ouve um evento específico. Para executar uma ação com base neste evento, você precisa criar uma função que informe à página da web o que fazer para esse evento específico. Esta função é comumente escrita dentro dos parênteses do ouvinte do evento.