Событие ready

Как мы уже упоминали в предыдущих главах, привычка работать с готовым документом может сослужить хорошую службу в будущем. Тогда можно поставить ваш JavaScript код в самое начало документа, в секцию head, в виде готового кода или ссылки на внешний JavaScript файл. Вы можете поместить его в ивент ready внутри документа. Рассмотрим тот же самый пример из главы "Hello, world!", но в этот раз поместит код в ивент:

<div id="divTest1"></div>
<script type="text/javascript">
function DocumentReady()
{
	$("#divTest1").text("Hello, world!");	
}

$(document).ready(DocumentReady);
</script>

Смотрите, что мы делаем. Мы создаем функцию, называем ее DocumentReady, и она запускается в тот самый момент, когда документ готов для работы с DOM. В последней строчке кода мы используем ready() метод, чтобы назначить нашей функции ready ивент, т.е. сказать jQuery, что как только документ готов, мы хотим вызвать нашу функцию.

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

<div id="divTest2"></div>
<script type="text/javascript">
$(document).ready(function()
{
	$("#divTest2").text("Hello, world!");	
});
</script>

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

<div id="divTest3"></div>
<script type="text/javascript">
$(function()
{
	$("#divTest3").text("Hello, world!");	
});
</script>

В последнем примере, наша анонимная функция отправлена прямиком в jQuery конструктор, который назначает её ивенту ready. Когда вы протестируете код, вы увидите, что ивент начинает работать в момент загрузки страницы, т.е. так быстро, что вы даже не замечаете этого.

Как уже ясно, запаковывать ваш код в ready event function - лучшая практика при работе с jQuery, и поэтому мы будем часто использовать этот подход в течение всего курса, кроме случаев, когда нам надо будет уменьшить размер примера.