Muitas páginas HTML5 e CSS3 exigem uma função de inicialização. o onload corpo

mecanismo é frequentemente utilizado no DOM / javascript para tornar as páginas carregam assim que o documento começou a carregar. Esta é uma função que é executado cedo para configurar o resto da página. Enquanto onload corpo faz bem este trabalho, um par de problemas existem com a técnica tradicional:

• Ele requer a realização de uma alteração no HTML. O código javascript deve ser completamente separado do HTML. Você não deveria ter que mudar o seu HTML para torná-lo trabalhar com javascript.

• O momento ainda não é muito justo. O código previsto onload corpo não executado até que toda a página é exibida. Seria melhor se o código foi registrado depois de O DOM é carregado, mas antes a página exibe.

Como usar $ (document) .ready ()

jQuery tem uma ótima alternativa para onload corpo que supera estas deficiências. Dê uma olhada no código para ver como ele funciona:

 
Utilizando o mecanismo de document.ready
Essa mudança?

Este código utiliza a técnica jQuery para a execução de código de inicialização:

• A tag corpo já não tem umacarregando atributo. Esta é uma característica comum de programação jQuery. O HTML não tem mais ligações directas para o javascript jQuery, porque permite que o código javascript juntar-se à página web.

• A função de inicialização é criado com o $ (Document) .ready () função. Esta técnica diz ao navegador para executar uma função quando o DOM tiver terminado o carregamento (para que ele tenha acesso a todos os elementos da forma), mas antes que a página é exibida (de modo que quaisquer efeitos da forma aparecem instantânea para o usuário).

• $ documento torna um objeto jQuery de todo o documento. O documento inteiro pode ser transformado em um objeto jQuery, especificando documento dentro de $ () função. Note-se que você não usar aspas neste caso.

• A função especificada é executado automaticamente. Neste caso particular, você deseja executar o mude-me() função, assim que você colocá-lo no parâmetro do pronto() método. Note-se que isso se refere a mude-me como uma variável, por isso não tem aspas ou parênteses.

Você vê vários outros lugares (particularmente na manipulação de eventos), onde jQuery espera uma função como um parâmetro. Tal função é frequentemente referido como um ligue de volta função porque ele é chamado após a ocorrência de algum tipo de evento. Você também vê funções callback que respondem a eventos de teclado, rato de movimento, e a conclusão de um pedido de AJAX.

Alternativas a document.ready

Às vezes você vê um par de atalhos porque é tão comum para executar o código de inicialização. Você pode encurtar

 $ (Document) .ready (changeme) -

com o seguinte código:

 $ (Changeme) -

Se este código não é definido dentro de uma função e mude-me é uma função definida na página, jQuery é executado automaticamente a função diretamente assim como o document.ready abordagem.

Você também pode criar uma função anônima diretamente:

 $ (Document) .ready (function () {. $ ( "# Output") html ( "Eu mudei") -}) -

Este método (anónimo função) é complicado, mas você costuma ver o código jQuery usando esta técnica. Você pode criar uma função chamada nisso() e chamá-lo com uma linha como esta:

$ (Init) -

Esta técnica é simples e fácil de entender, mas você pode encontrar as outras variações como você examinar o código na web.