У нас есть инструкция JQuery $(function() как:
<script type="text/javascript">
$(function(){
//Code..
})
</script>
Тупой вопрос - когда именно эта функция выполнена? Это когда вся HTML-страница была загружена клиентом?
В чем преимущество использования кода в $(function(), а не просто:
<script type="text/javascript">
//Code..
</script>
Выполняется, как только DOM анализируется и вызывается в порядке появления, если есть несколько явлений. На этом этапе документ, однако, не отображается, его просто анализируется.
Он запускается, когда документ анализируется и готов, и является эквивалентом $(document).ready(function () { }).
Очевидным преимуществом является то, что наличие тэга script перед другими элементами на странице означает, что ваш script может взаимодействовать с ними, даже если они недоступны во время разбора. Если вы запустите свой script, прежде чем элементы будут проанализированы и документ не будет готов, они не будут доступны для взаимодействия.
Когда документ завершит загрузку. Это то же самое, что и написать:
$(document).ready(function(){});
EDIT: ответьте на второй вопрос:
Если вы не завершаете свой код в блоке выше, он будет срабатывать, как только он встречается, а не после загрузки всех элементов управления на странице. Поэтому, если блок находился в верхней части страницы и ссылался на элементы на странице, эти ссылки не будут работать, поскольку элементы еще не загружены.
Но если вы закроете блок, тогда вы знаете, что страница загружена, и все элементы доступны для ссылки.
Он запускается после того, как документ полностью загружен, дерево DOM было инициализировано, все стили CSS были применены и весь Javascript был выполнен. Он отличается от события load тем, что элементы (кроме CSS/JS), которые загружают их содержимое из других URL-адресов, например изображений или флеш файлов, не обязательно заканчивают загрузку в этот момент. Обычно это называется событием "domready" или "domloaded", а некоторые современные браузеры поддерживают его напрямую (например, Firefox имеет событие DomContentLoaded), а на других его можно моделировать с помощью различных трюков, например, с использованием атрибута defer или размещения a script в самом конце тела.
Преимущество заключается в том, что вы можете надежно взаимодействовать с документом в это время; например, вы можете установить обработчик события на элемент с определенным идентификатором и убедиться, что он уже существует в дереве DOM. С другой стороны, он может работать значительно раньше, чем событие загрузки, если некоторый внешний ресурс медленно загружается. Если ваш script находится в конце вашего HTML-кода, то может быть мало различий в использовании или не использовании события domready, но обычно скрипты вызывают из тега head, и в этот момент нет элементов тела еще доступны.