Quando devo usar a function document.ready do jQuery?

Foi-me dito para usar document.ready quando comecei a usar JavaScript / jQuery, mas eu nunca realmente aprendi o porquê.

Alguém pode fornecer algumas orientações básicas sobre quando faz sentido envolver o código javascript / jquery dentro do document.ready do jQuery?

Alguns tópicos que me interessam:

  1. Método .on() do jQuery: Eu uso o método .on() para AJAX um pouco (normalmente em elementos DOM dinamicamente criados). Os manipuladores de clique .on() devem estar sempre dentro do document.ready ?
  2. Desempenho: É mais eficiente manter vários objects javascript / jQuery dentro ou fora do document.ready (também, a diferença de desempenho é significativa?)?
  3. Escopo do object: Páginas carregadas em AJAX não podem acessar objects que estavam dentro do documento da página anterior. Eles só podem acessar objects que estavam fora do document.ready (ou seja, objects verdadeiramente “globais”)?

Update: Para seguir uma prática recomendada, todo o meu javascript (a biblioteca jQuery e o código do meu aplicativo) está na parte inferior da minha página HTML e estou usando o atributo defer nos scripts contendo jQuery nas páginas carregadas em AJAX. Eu posso acessar a biblioteca jQuery nestas páginas.

Em palavras simples,

$(document).ready é um evento que triggers quando o document está pronto.

Suponha que você tenha colocado seu código jQuery na seção head e tentando acessar um elemento dom (uma âncora, um img etc), você não poderá acessá-lo porque html é interpretado de cima para baixo e seus elementos html não estão presentes quando seu código jQuery é executado.

Para superar esse problema, colocamos todos os códigos jQuery / javascript (que usam DOM) dentro da function $(document).ready , que é chamada quando todos os elementos dom podem ser acessados.

E esta é a razão, quando você coloca o seu código jQuery na parte inferior (depois de todos os elementos dom, pouco antes de ), não há necessidade de $(document).ready

Não há necessidade de colocar o método dentro do $(document).ready somente quando você usa o método no document por causa da mesma razão que eu expliquei acima.

  //No need to put inside $(document).ready $(document).on('click','a',function () { }) // Need to put inside $(document).ready if placed inside  $('.container').on('click','a',function () { }); 

EDITAR

Dos comentários,

  1. $(document).ready não espera por imagens ou scripts. Essa é a grande diferença entre $(document).ready e $(document).load

  2. Apenas o código que acessa o DOM deve estar no manipulador pronto. Se for um plugin, não deve estar no evento pronto.

Respostas:

Método .on () do jQuery: Eu uso o método .on () para o AJAX um pouco (criando dinamicamente elementos DOM). Os manipuladores de clique .on () devem estar sempre dentro do document.ready?

Não, nem sempre. Se você carregar seu JS no header do documento, precisará. Se você estiver criando os elementos depois que a página for carregada via AJAX, será necessário. Você não precisará se o script estiver abaixo do elemento html que você está adicionando um manipulador também.

Desempenho: É mais eficiente manter vários objects javascript / jQuery dentro ou fora do document.ready (também, a diferença de desempenho é significativa?)?

Depende. Isso levará o mesmo tempo para append os manipuladores, isso só depende se você quer que isso aconteça imediatamente quando a página está carregando ou se você quer que ela espere até que todo o documento seja carregado. Então, vai depender de outras coisas que você está fazendo na página.

Escopo do object: Páginas carregadas em AJAX não podem acessar objects que estavam dentro do documento da página anterior. Eles só podem acessar objects que estavam fora do document.ready (ou seja, objects verdadeiramente “globais”)?

É essencialmente a sua própria function, portanto, só pode acessar vars declarados em um escopo global (fora / acima de todas as funções) ou com window.myvarname = '';

Antes de poder usar com segurança o jQuery, você precisa garantir que a página esteja em um estado em que ela esteja pronta para ser manipulada. Com o jQuery, realizamos isso colocando nosso código em uma function e, em seguida, passando essa function para $(document).ready() . A function que passamos pode ser apenas uma function anônima .

 $(document).ready(function() { console.log('ready!'); }); 

Isso executará a function que passamos para .ready () quando o documento estiver pronto. Oque esta acontecendo aqui? Estamos usando $ (document) para criar um object jQuery a partir do documento da nossa página e, em seguida, chamando a function .ready () nesse object, passando-lhe a function que queremos executar.

Já que isso é algo que você vai encontrar fazendo muito, existe um método abreviado para isso se você preferir – a function $ () faz um duplo dever como um alias para $ (document) .ready () se você passar uma function:

 $(function() { console.log('ready!'); }); 

Esta é uma boa leitura: Fundamentos do jQuery

.ready () – Especifique uma function para executar quando o DOM estiver totalmente carregado.

 $(document).ready(function() { // Handler for .ready() called. }); 

Aqui está uma lista de todos os methods do jQuery

Leia sobre Introduzindo $ (document) .ready ()

Para ser realista, o document.ready não é necessário para qualquer outra coisa além de manipular o DOM com precisão e nem sempre é necessário ou a melhor opção. O que quero dizer é que quando você desenvolve um grande plugin jQuery, por exemplo, você dificilmente o usa em todo o código porque você está tentando mantê-lo DRY, então você abstrai o máximo possível em methods que manipulam o DOM, mas que devem ser invocados mais tarde. Quando todo o seu código está bem integrado, o único método exposto no document.ready é geralmente o init onde toda a mágica do DOM acontece. espero que isso responda sua pergunta.

Você deve ligar todas as ações em document.ready, porque você deve esperar até que o documento esteja totalmente carregado.

Mas, você deve criar funções para todas as ações e chamá-las de dentro do document.ready. Quando você cria funções (seus objects globais), chame-as sempre que quiser. Então, quando seus novos dados forem carregados e novos elementos forem criados, chame essas funções novamente.

Essas funções são aquelas nas quais você vinculou os events e itens de ação.

 $(document).ready(function(){ bindelement1(); bindelement2(); }); function bindelement1(){ $('el1').on('click',function...); //you might make an ajax call here, then under complete of the AJAX, call this function or any other function again } function bindelement2(){ $('el2').on('click',function...); } 

Eu anexei um link para um div e queria fazer algumas tarefas no clique. Eu adicionei o código abaixo do elemento acrescentado no DOM, mas não funcionou. Aqui está o código:

   

Não funcionou. Então eu coloquei o código jQuery dentro de $ (document) .ready e funcionou perfeitamente. Aqui está.

 $(document).ready(function(e) { $("#advance-search #reset-adv-srch").on("click", function (){ alert('Link Clicked'); }); }); 

O evento pronto ocorre quando o DOM (modelo de object de documento) foi carregado.

Como esse evento ocorre depois que o documento está pronto, é um bom lugar para ter todos os outros events e funções do jQuery. Como no exemplo acima.

O método ready () especifica o que acontece quando um evento pronto ocorre.

Dica: O método ready () não deve ser usado junto com.