jQuery
событие, подготовленное документами

Что готово для документа и как его использовать?

Код jQuery часто заверяется в jQuery(function($) { ... }); так что он запускается только после завершения загрузки 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>

Это важно, потому что jQuery (и JavaScript вообще) не может выбрать элемент DOM, который не был отображен на странице.

<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>

Обратите внимание: вы можете псевдоним пространства имен jQuery путем передачи пользовательского обработчика в метод .ready() . Это полезно для случаев, когда другая библиотека JS использует один и тот же сокращенный псевдоним $ jQuery , который создает конфликт. Чтобы избежать этого конфликта, вы должны вызвать $.noConflict(); - Это заставляет использовать только пространство имен jQuery по умолчанию (вместо коротких $ alias).
Передав пользовательский обработчик обработчику .ready() , вы сможете выбрать имя псевдонима для использования 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>')
});

Вместо того, чтобы просто помещать код jQuery в нижнюю часть страницы, использование функции $(document).ready гарантирует, что все HTML-элементы были отображены, и вся документальная модель документа (DOM) готова для выполнения кода JavaScript.

jQuery 2.2.3 и ранее

Все они эквивалентны, код внутри блоков будет работать, когда документ будет готов:

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

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

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

Поскольку они эквивалентны, первая является рекомендуемой формой, следующая версия - это ключевое слово jQuery вместо $ которое дает те же результаты:

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

jQuery 3.0

нотация

Начиная с jQuery 3.0 рекомендуется только эта форма:

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
});

Все остальные обработчики документа устарели в jQuery 3.0.

Асинхронный

Начиная с jQuery 3.0, готовый обработчик всегда будет вызываться асинхронно . Это означает, что в приведенном ниже коде журнал «внешний обработчик» всегда будет отображаться первым, независимо от того, готов ли документ к точке выполнения.

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

> наружный обработчик
> внутренний обработчик

Разница между $ (document) .ready () и $ (window) .load ()

$(window).load() устарел в jQuery версии 1.8 (и полностью удален из jQuery 3.0 ) и как таковой больше не должен использоваться. Причины отмены указаны на странице jQuery об этом событии

Предостережения о событии загрузки при использовании с изображениями

Общей проблемой, которую разработчики пытаются решить с помощью .load() является выполнение функции, когда изображение (или коллекция изображений) полностью загружено. Есть несколько известных оговорок с этим, что следует отметить. Это:

• Он не работает последовательно и не надежно кросс-браузер
• Он не срабатывает корректно в WebKit, если изображение src установлено на тот же src что и раньше
• Он неправильно выравнивает дерево DOM
• Может перестать запускаться для изображений, которые уже хранятся в кеше браузера

Если вы все еще хотите использовать load() это описано ниже:

$(document).ready() ждет, пока не будет доступна полная DOM - все элементы в HTML были проанализированы и находятся в документе. Однако на данный момент ресурсы, такие как изображения, могут не быть полностью загружены. Если важно подождать, пока все ресурсы будут загружены, $(window).load() и вы будете знать о значительных ограничениях этого события, то вместо этого можно использовать следующее:

$(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
});

Прикрепление событий и управление DOM внутри ready ()

Пример использования $(document).ready() :

1. Присоединение обработчиков событий
   Присоединить обработчики событий jQuery

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

2. Запустить код jQuery после создания структуры страницы

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

3. Манипулировать загруженную структуру DOM
   Например: скрыть div когда страница загружается в первый раз и отображать ее в событии нажатия кнопки

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

Разница между jQuery (fn) и выполнением кода перед

Использование события, готового к документу, может иметь небольшие недостатки производительности с задержкой до 300 мс. Иногда такое же поведение может быть достигнуто путем выполнения кода непосредственно перед закрывающим </body> :

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

приведет к аналогичному поведению, но будет выполняться раньше, чем не дожидаться запуска события события, как это происходит в:

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

Акцент на том, что первый пример основан на ваших знаниях вашей страницы и размещении сценария непосредственно перед закрывающим </body> и, в частности, после тега span .