Waniliowy JavaScript odpowiednik JQuery's $.gotowy?

Podczas opracowywania stron internetowych programiści używają prostego JavaScript o nazwie „JavaScript waniliowy”I biblioteka JavaScript„JQuery". Wiele nowoczesnych ram programistycznych i bibliotek zachęca, a nawet wymaga korzystania z waniliowego JavaScript zamiast JQuery, ponieważ może być bardziej wydajne, elastyczne i łatwiejsze do zrozumienia i utrzymania.

Ten blog pokaże waniliowy odpowiednik Javery $ $.Metoda gotowa ().

Waniliowy JavaScript odpowiednik JQuery's $.gotowy()

Waniliowy JavaScript odpowiednik JQuery $.Ready () funkcja to „dokument.addEventListener („DomContentloaded”, function () …);”Funkcja.

Jak używać zdarzenia „DomContent” waniliowego JavaScript?

"DomContentloaded”To wydarzenie w JavaScript, które jest wystrzelone lub wyzwalane bez konieczności czekania na arkusze, grafikę lub ramki podrzędne, zanim przeanalizuje podstawową zawartość HTML.

Składnia

element.addEventListener (zdarzenie, funkcja, usecapture);

W tej składni:

• "wydarzenie”To pierwszy parametr, który może być dowolnym ważnym zdarzeniem JavaScript.
• "funkcjonować”Jest głównym korpusem wykonanym podczas uruchomienia zdarzenia.
• "Usecorture”Jest opcjonalnym parametrem.

Przykład

W tym przykładowym skrypcie jest wykonywany, gdy DOM jest w pełni załadowany za pomocą waniliowego JavaScript.

Aby to zrobić, utworzymy nagłówki w pliku HTML, który będzie wyświetlany na stronie po załadowaniu strony:

JavaScript waniliowy

DOM jest w pełni załadowany

W "”Tag, wyświetl komunikat ostrzegawczy podczas ładowania strony i wydrukuj wiadomość na konsoli po załadowaniu strony:

Zgodnie z powyższym fragmentem kodu:

• Wywołać „addEventListener ()„Metoda z wydarzeniem”DomContentloaded”I funkcja, która wydrukuje wiadomość po załadowaniu całej strony.
• Okno dialogowe Alert jest wyświetlane przed załadowaniem strony.

Można zauważyć, że zawartość została wyświetlona, ​​gdy DOM jest w pełni załadowany:

Jak korzystać z funkcji jQuery $ gotowy ()?

„„$.gotowy()”Funkcja w jQuery służy do uruchamiania funkcji lub bloku kodu, gdy tylko DOM będzie gotowy/dostępny do manipulacji. Oznacza to, że funkcja zostanie wykonana, gdy tylko strona zakończy ładowanie i analizowanie HTML, ale przed wszystkimi innymi zasobami, takimi jak obrazy i arkusze stylów, zakończyły ładowanie.

Składnia

Dla "gotowy()”Funkcja w jQuery, użyj poniżej podanej składni:

$ (dokument).gotowy () Body

W tej składni „ciało”Jest wykonywany po całkowitym załadowaniu całej strony.

Przykład

W poniższym przykładzie konkretny dokument HTML ukryje element na przycisku Kliknij po załadowaniu całej strony.

Aby używać JQuery w kodzie, ważne jest, aby najpierw załadować bibliotekę:

Dodaj trochę zawartości w pliku HTML, który wyświetli się na stronie po załadowaniu DOM:

funkcja jQuery Ready ()

DOM jest w pełni załadowany

Ukryj element

W znaczniku najpierw pokaż komunikat ostrzegawczy podczas ładowania DOM. Następnie, po wyświetleniu treści, ukryj nagłówek podczas klikalania przycisku:

Można zauważyć, że zawartość została załadowana na stronie po załadowaniu elementu DOM, a nagłówek ukryje się na przycisku Kliknij:

Chodziło o równowartość funkcji jQuery $ gotowy () w waniliowym JavaScript.

Wniosek

„„DomContentloaded„Wydarzenie jest równoważne JQuery'emu”$.gotowy()" metoda. „DomContentloaded” i „$.gotowy () ”wystrzeliwuje przed zdarzeniem ładowania. Oznacza to, że możesz go użyć do wykonywania kodu, gdy tylko DOM będzie gotowy bez oczekiwania na załadowanie wszystkich zasobów. Ten blog pokazał waniliowy JavaScript odpowiednik jQuery $.Metoda gotowa ().