Vanilla JavaScript equivalente a JQuery's $.preparar?

Ao desenvolver sites, os programadores usam o javascript simples chamado “Javascript de baunilha”E a biblioteca JavaScript“jQuery”. Muitas estruturas modernas de desenvolvimento da web e bibliotecas incentivam ou até exigem o uso de javascript de baunilha em vez de jQuery, pois pode ser mais eficiente, flexível e mais fácil de entender e manter.

Este blog demonstrará o Javascript de baunilha equivalente ao jQuery $.método pronto ().

Vanilla JavaScript equivalente a JQuery's $.preparar()

O JavaScript de baunilha equivalente a JQuery's $.Função pronta () é a “documento.addEventListener ("domcontentloaded", function () …);”Função.

Como usar o evento "DomContentLoaded" de Javascript de baunilha?

““DomContentLoaded”É um evento em JavaScript que é disparado ou acionado sem ter que esperar por folhas de estilo, gráficos ou sub -quadros para carregar completamente antes de analisar o conteúdo básico de HTML.

Sintaxe

elemento.addEventListener (evento, função, usecapture);

Nesta sintaxe:

• ““evento”É o primeiro parâmetro, que pode ser qualquer evento JavaScript válido.
• ““função”É o corpo principal executado quando o evento é acionado.
• ““Usecapture”É um parâmetro opcional.

Exemplo

Neste exemplo, o script é executado quando o DOM está totalmente carregado usando JavaScript de baunilha.

Para fazer isso, criaremos títulos em um arquivo HTML que será exibido na página após carregar a página:

Javascript de baunilha

DOM está totalmente carregado

Em "”Tag, exiba uma mensagem de alerta enquanto carrega a página e imprima a mensagem no console quando a página for carregada:

De acordo com o snippet de código acima:

• Invoque o “addEventListener ()”Método com o evento”DomContentLoaded”E uma função que imprimirá uma mensagem depois de carregar a página inteira.
• A caixa de diálogo de alerta é mostrada antes de carregar a página.

Pode -se observar que o conteúdo foi exibido quando o DOM está totalmente carregado:

Como usar a função JQuery $ Ready ()?

O "$.preparar()”A função no jQuery é usada para executar uma função ou um bloco de código assim que o DOM estiver pronto/disponível para manipulação. Isso significa que a função será executada assim que a página terminar de carregar e analisar o HTML, mas antes de todos os outros recursos, como imagens e folhas de estilo, terminam de carregar.

Sintaxe

Para o "preparar()”Função no jQuery, use a sintaxe abaixo:

$ (documento).pronto () body

Nesta sintaxe, o “corpo”É executado depois que a página inteira estiver completamente carregada.

Exemplo

No exemplo a seguir, o documento HTML específico ocultará o elemento no botão Clique depois de carregar a página inteira.

Para usar o jQuery em seu código, é importante carregar primeiro a biblioteca:

Adicione algum conteúdo no arquivo HTML que será exibido na página após carregar o DOM:

função jQuery pronta ()

DOM está totalmente carregado

Ocultar o elemento

Na tag, primeiro mostre uma mensagem de alerta enquanto carrega o DOM. Depois, depois de exibir conteúdo, oculte o cabeçalho enquanto clica no botão:

Pode -se observar que o conteúdo foi carregado na página após o carregamento do elemento DOM e o cabeçalho se esconderá no botão Clique:

Isso foi tudo sobre o equivalente à função JQuery $ Ready () em Javascript de baunilha.

Conclusão

O "DomContentLoaded”O evento é equivalente ao JQuery's“$.preparar()”Método. O "domcontentloaded" e o "$.pronto () ”vai disparar antes do evento de carga. Isso significa que você pode usá -lo para executar o código assim que o DOM estiver pronto sem esperar que todos os recursos sejam carregados. Este blog demonstrou o Javascript de baunilha equivalente do jQuery $.método pronto ().