Vanilla JavaScript equivalente di JQuery's $.pronto?

Durante lo sviluppo di siti Web, i programmatori utilizzano il semplice JavaScript chiamato "Vaniglia javascript"E la libreria JavaScript"jQuery". Molti moderni quadri e biblioteche di sviluppo web incoraggiano o addirittura richiedono l'uso di vaniglia javascript invece di jQuery, in quanto può essere più efficiente, flessibile e più facile da comprendere e mantenere.

Questo blog dimostrerà l'equivalente JavaScript vanilla di JQuery $.Metodo pronto ().

Vanilla JavaScript equivalente di JQuery's $.pronto()

L'equivalente Javascript vanilla di JQuery's $.La funzione pronta () è la "documento.addEventListener ("DomContentload", function () …);" funzione.

Come utilizzare l'evento "DomContentloded" di Vanilla Javascript?

"Domcontentload"È un evento in JavaScript che viene sparato o attivato senza dover aspettare fogli di stile, grafica o sottoframe da caricare completamente prima di analizzare il contenuto di base HTML.

Sintassi

elemento.addEventListener (evento, funzione, usecapture);

In questa sintassi:

• "evento"È il primo parametro, che può essere qualsiasi evento JavaScript valido.
• "funzione"È il corpo principale eseguito quando l'evento viene attivato.
• "usecapture"È un parametro opzionale.

Esempio

In questo esempio lo script viene eseguito quando il DOM viene completamente caricato usando Vanilla JavaScript.

Per fare ciò, creeremo intestazioni in un file HTML che verrà visualizzato nella pagina dopo il caricamento della pagina:

Vaniglia javascript

Dom è completamente caricato

In ""Tag, visualizzare un messaggio di avviso durante il caricamento della pagina e stampare il messaggio sulla console quando viene caricata la pagina:

Secondo lo snippet di codice sopra:

• Invocare il "addEventListener ()"Metodo con l'evento"Domcontentload"E una funzione che stamperà un messaggio dopo aver caricato l'intera pagina.
• La finestra di dialogo Avviso viene visualizzata prima di caricare la pagina.

Si può osservare che il contenuto è stato visualizzato quando il DOM è completamente caricato:

Come usare la funzione jQuery $ ready ()?

IL "$.pronto()"La funzione in jQuery viene utilizzata per eseguire una funzione o un blocco di codice non appena il DOM è pronto/disponibile per la manipolazione. Ciò significa che la funzione verrà eseguita non appena la pagina avrà finito di caricare e analizzare l'HTML ma prima che tutte le altre risorse, come immagini e fogli di stile, abbiano finito di caricare.

Sintassi

Per il "pronto()"Funzione in jQuery, usa la sintassi di seguito:

$ (documento).ready () body

In questa sintassi, il "corpo"Viene eseguito dopo il caricamento dell'intera pagina.

Esempio

Nel seguente esempio, il documento HTML specifico nasconderà l'elemento sul pulsante Fare clic dopo il caricamento dell'intera pagina.

Per l'uso di jQuery nel codice, è importante caricare prima la libreria:

Aggiungi alcuni contenuti nel file HTML che verrà visualizzato nella pagina dopo il caricamento del DOM:

funzione jquery ready ()

Dom è completamente caricato

Nascondi l'elemento

Nel tag, mostra prima un messaggio di avviso durante il caricamento del DOM. Quindi, dopo aver visualizzato il contenuto, nascondi l'intestazione mentre fai clic sul pulsante:

Si può vedere che il contenuto è stato caricato sulla pagina dopo aver caricato l'elemento DOM e l'intestazione si nasconderà sul clic del pulsante:

Questo riguardava l'equivalente della funzione jQuery $ ready () in vaniglia javascript.

Conclusione

IL "Domcontentload"L'evento è equivalente a JQuery"$.pronto()" metodo. Il "Domcontentload" e il "$.Ready () ”verrà sparato prima dell'evento di carico. Ciò significa che è possibile utilizzarlo per eseguire il codice non appena il DOM è pronto senza aspettare che vengano caricate tutte le risorse. Questo blog ha dimostrato l'equivalente di vaniglia Javascript di JQuery $.Metodo pronto ().