Какое событие запускает JQuery $ function ()?

Question

У нас есть оператор JQuery $(function() как:

<script type="text/javascript">
$(function(){
  //Code..
})
</script>

Тупой вопрос - когда именно эта функция выполняется? Это когда вся HTML-страница была загружена клиентом?

В чем преимущество использования кода внутри $(function() по сравнению с простым:

<script type="text/javascript">
//Code..
</script>

Answer 1

Он запускается, когда документ был проанализирован и готов, и является эквивалентом $(document).ready(function () { }).

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

Answer 2

Выполняется, как только DOM анализируется, и вызывается в порядке появления, если есть несколько появлений.Однако на этом этапе документ не отображается, а только что проанализирован.

Answer 3

Когда документ завершает загрузку. Это то же самое, что написать это:

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

РЕДАКТИРОВАТЬ: Чтобы ответить на ваш второй вопрос:

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

Но если вы обернетесь в блоке, то вы знаете, что страница загружена и все элементы теперь доступны для ссылки.

Answer 4

Он запускается после полной загрузки документа, инициализации дерева DOM, применения всех стилей CSS и выполнения всего Javascript.Он отличается от события load тем, что элементы (кроме CSS / JS), которые загружают свое содержимое с других URL-адресов, таких как изображения или флэш-файлы, не обязательно завершили загрузку на этом этапе.Это обычно называется событием «domready» или «domloaded», и некоторые современные браузеры поддерживают его напрямую (например, Firefox имеет событие DomContentLoaded), а в других его можно моделировать с помощью различных приемов, таких как использование атрибута defer или размещениескрипт в самом конце тела.

Преимущество состоит в том, что вы можете надежно взаимодействовать с документом в это время;например, вы можете установить обработчик событий для элемента с определенным идентификатором и быть уверенным, что он уже существует в дереве DOM.С другой стороны, он может запускаться значительно раньше, чем событие загрузки, если какой-либо внешний ресурс загружается медленно.Если ваш сценарий находится в конце вашего HTML-кода, тогда может быть небольшая разница в использовании или отсутствии использования события domready, но обычно сценарии вызываются из тега head, и в этот момент элементы тела недоступныеще.