jQuery
wydarzenie gotowe do dokumentu

Co to jest dokument gotowy i jak go używać?

Kod jQuery jest często zawijany w jQuery(function($) { ... }); dzięki czemu działa tylko po zakończeniu ładowania DOM.

<script type="text/javascript"> 
  jQuery(function($) {
    // this will set the div's text to "Hello".
    $("#myDiv").text("Hello");
  });
</script>

<div id="myDiv">Text</div>

Jest to ważne, ponieważ jQuery (i ogólnie JavaScript) nie może wybrać elementu DOM, który nie został wyrenderowany na stronie.

<script type="text/javascript">
  // no element with id="myDiv" exists at this point, so $("#myDiv") is an
  // empty selection, and this will have no effect
  $("#myDiv").text("Hello");
</script>

<div id="myDiv">Text</div>

Pamiętaj, że możesz aliasować przestrzeń nazw jQuery, przekazując niestandardową procedurę obsługi do metody .ready() . Jest to przydatne w przypadkach, gdy inna biblioteka JS używa tego samego skróconego aliasu $ co jQuery , co powoduje konflikt. Aby uniknąć tego konfliktu, musisz wywołać $.noConflict(); - To zmusza cię do używania tylko domyślnej przestrzeni nazw jQuery (zamiast krótkiego aliasu $ ).
Przekazując niestandardowy moduł obsługi do modułu obsługi .ready() , będziesz mógł wybrać nazwę aliasu, aby użyć jQuery .

$.noConflict();

jQuery( document ).ready(function( $ ) {
   // Here we can use '$' as jQuery alias without it conflicting with other 
   // libraries that use the same namespace 
   $('body').append('<div>Hello</div>')
});

jQuery( document ).ready(function( jq ) {
   // Here we use a custom jQuery alias 'jq' 
   jq('body').append('<div>Hello</div>')
});

Zamiast po prostu umieścić kod jQuery na dole strony, użycie funkcji $(document).ready zapewnia, że wszystkie elementy HTML zostały wyrenderowane i cały model Object Object Model (DOM) jest gotowy do uruchomienia kodu JavaScript.

jQuery 2.2.3 i wcześniejsze

Wszystkie są równoważne, kod wewnątrz bloków uruchomi się, gdy dokument będzie gotowy:

$(function() {
  // code
});

$().ready(function() {
  // code
});

$(document).ready(function() {
  // code
});

Ponieważ są one równoważne, pierwsza jest zalecaną formą, dlatego poniżej znajduje się wersja ze słowem kluczowym jQuery zamiast $ które dają takie same wyniki:

jQuery(function() {
  // code
});

jQuery 3.0

Notacja

Począwszy od jQuery 3.0, zalecany jest tylko ten formularz:

jQuery(function($) {
  // Run when document is ready
  // $ (first argument) will be internal reference to jQuery
  // Never rely on $ being a reference to jQuery in the global namespace
});

Wszystkie inne procedury obsługi dokumentów gotowe są w jQuery 3.0 przestarzałe.

Asynchroniczny

Począwszy od jQuery 3.0, gotowy moduł obsługi zawsze będzie wywoływany asynchronicznie . Oznacza to, że w poniższym kodzie dziennik „zewnętrzny moduł obsługi” będzie zawsze wyświetlany jako pierwszy, niezależnie od tego, czy dokument był gotowy w miejscu wykonania.

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

> zewnętrzny przewodnik
> wewnętrzny przewodnik

Różnica między $ (dokument) .ready () i $ (okno) .load ()

$(window).load() został wycofany z jQuery w wersji 1.8 (i całkowicie usunięty z jQuery 3.0 ) i jako taki nie powinien być już używany. Przyczyny wycofania podano na stronie jQuery o tym zdarzeniu

Ostrzeżenia dotyczące zdarzenia ładowania, gdy są używane z obrazami

Częstym wyzwaniem, które programiści próbują rozwiązać za pomocą skrótu .load() jest wykonanie funkcji, gdy obraz (lub zbiór obrazów) zostanie całkowicie załadowany. Należy zauważyć kilka znanych zastrzeżeń. To są:

• Nie działa konsekwentnie ani niezawodnie w różnych przeglądarkach
• Nie działa poprawnie w WebKit, jeśli obraz src jest ustawiony na taki sam src jak poprzednio
• Nie powoduje to prawidłowego bąbelkowania drzewa DOM
• Może przestać strzelać do obrazów, które już znajdują się w pamięci podręcznej przeglądarki

Jeśli nadal chcesz używać load() jest to udokumentowane poniżej:

$(document).ready() czeka, aż pełny DOM będzie dostępny - wszystkie elementy HTML zostały przeanalizowane i znajdują się w dokumencie. Jednak zasoby, takie jak obrazy, mogą nie zostać w pełni załadowane w tym momencie. Jeśli ważne jest, aby poczekać, aż wszystkie zasoby zostaną załadowane, $(window).load() i zdajesz sobie sprawę ze znaczących ograniczeń tego zdarzenia, możesz zamiast tego użyć poniższego:

$(document).ready(function() {
  console.log($("#my_large_image").height()); // may be 0 because the image isn't available
});

$(window).load(function() {
  console.log($("#my_large_image").height()); // will be correct
});

Dołączanie zdarzeń i manipulowanie DOM wewnątrz ready ()

Przykładowe zastosowania $(document).ready() :

1. Dołączanie procedur obsługi zdarzeń
   Dołącz moduły obsługi zdarzeń jQuery

$(document).ready(function() {
  $("button").click(function() {
    // Code for the click function
  });
});

2. Uruchom kod jQuery po utworzeniu struktury strony

jQuery(function($) {
// set the value of an element.
   $("#myElement").val("Hello");
});

3. Manipuluj załadowaną strukturą DOM
   Na przykład: ukryj div gdy strona ładuje się po raz pierwszy i pokaż go przy zdarzeniu kliknięcia przycisku

$(document).ready(function() {
  $("#toggleDiv").hide();
  $("button").click(function() {
    $("#toggleDiv").show();
  });
});

Różnica między jQuery (fn) a wykonywaniem kodu wcześniej

Korzystanie ze zdarzenia gotowego do dokumentu może mieć niewielkie wady wydajności , z opóźnionym wykonywaniem do ~ 300 ms. Czasami to samo zachowanie można osiągnąć, wykonując kod tuż przed tagiem zamykającym </body> :

<body>
  <span id="greeting"></span> world!
  <script>
    $("#greeting").text("Hello");
  </script>
</body>

spowoduje podobne zachowanie, ale zadziała wcześniej niż nie czeka na wyzwalacz zdarzenia gotowości dokumentu, jak to robi w:

<head>
  <script>
    jQuery(function($) {
      $("#greeting").text("Hello");
    });
  </script>
</head>
<body>
  <span id="greeting"></span> world!
</body>

Nacisk na fakt, że pierwszy przykład opiera się na znajomości Twojej strony i umieszczeniu skryptu tuż przed tagiem zamykającym </body> a konkretnie po tagu span .