Índice:
- Como usar $ (documento). ready ()
- Usando o documento. mecanismo pronto
- Alternativas ao documento. pronto
Vídeo: Curso Introdução ao JavaScript | Aula Demonstrativa 2024
Muitas páginas HTML5 e CSS3 requerem uma função de inicialização. O mecanismo de carga do corpo é freqüentemente usado no DOM / JavaScript para fazer as páginas serem carregadas assim que o documento tiver começado a carregar. Esta é uma função que é executada com antecedência para configurar o resto da página. Enquanto o onload do corpo faz este trabalho bem, existem alguns problemas com a técnica tradicional:
-
Requer fazer uma alteração no HTML. O código JavaScript deve ser completamente separado do HTML. Você não deve ter que alterar seu HTML para fazê-lo funcionar com JavaScript.
-
O tempo ainda não está correto. O código especificado na carga do corpo não é executado até que a página inteira seja exibida. Seria melhor se o código fosse registrado após o DOM é carregado, mas antes a página é exibida.
Como usar $ (documento). ready ()
jQuery tem uma ótima alternativa à onload do corpo que supera essas falhas. Dê uma olhada no código para ver como funciona:
pronto. html $ (documento). pronto (changeMe); function changeMe () {$ ("# output"). html ("Eu mudei");}
Usando o documento. mecanismo pronto
Isso mudou?
Este código usa a técnica jQuery para executar o código de inicialização:
-
A tag do corpo não possui mais um atributo onload . Esta é uma característica comum da programação jQuery. O HTML já não possui links diretos para o JavaScript porque jQuery permite que o código JavaScript se anexe à página da Web.
-
A função de inicialização é criada com $ (documento). pronta () . Esta técnica informa ao navegador para executar uma função quando o DOM finalizou o carregamento (para que ele tenha acesso a todos os elementos do formulário), mas antes que a página seja exibida (para que qualquer efeito do formulário apareça instantaneamente para o usuário).
-
$ documento faz um objeto jQuery de todo o documento. O documento inteiro pode ser transformado em um objeto jQuery, especificando o documento dentro da função $ (). Observe que você não usa aspas neste caso.
-
A função especificada é executada automaticamente. Neste caso particular, você deseja executar a função changeMe (), para que você coloque no parâmetro do método ready (). Observe que isso se refere a changeMe como uma variável, portanto, não tem aspas ou parênteses.
Você vê vários outros lugares (particularmente no gerenciamento de eventos) onde jQuery espera uma função como um parâmetro. Essa função é freqüentemente referida como uma função chamada de retorno porque é chamada depois que ocorreu algum tipo de evento.Você também vê funções de retorno de chamada que respondem aos eventos do teclado, ao movimento do mouse e à conclusão de uma solicitação AJAX.
Alternativas ao documento. pronto
Às vezes, você vê alguns atalhos porque é tão comum executar o código de inicialização. Você pode encurtar
$ (documento). pronto (changeMe);
para o seguinte código:
$ (changeMe);
Se este código não está definido dentro de uma função e changeMe é uma função definida na página, jQuery executa automaticamente a função diretamente como o documento. pronta abordagem.
Você também pode criar uma função anônima diretamente:
$ (documento). pronto (função () {$ ("# saída"). html ("Eu mudei");});
Este método (função anônima) é complicado, mas você vê com freqüência o código jQuery usando esta técnica. Você pode criar uma função chamada init () e chamá-la com uma linha como esta:
$ (init);
Esta técnica é simples e fácil de entender, mas você pode encontrar as outras variações à medida que você examina o código na web.
