Функции для выполнения после того, как документ полностью загружен.
Хотя JavaScript обеспечивает событие load для
выполнения кода, когда страница отображается, это событие не будет
выполненно пока все объекты, такие как изображения не будут полностью
загруженны.
В большинстве случаев, этот сценарий может быть запущен как только
иерархия DOM будет полностью построена.
Обработчик переданный в .ready() гарантированно
будет выполнен после того как DOM готов, так что это, как правило,
лучшее место, чтобы приложить все другие обработчики событий и запустить
другой код jQuery.
При использовании сценариев, которые зависят от значений свойств CSS,
очень важно указать ссылки на внешние таблицы стилей или вставить
элементы стиля до ссылки на скрипты.
В случаях, когда код зависит от загруженных объектов (например, если
требуются размеры изображения), код должен быть помещен в обработчик для
события load.
Метод .ready() как правило не совместим с атрибутом <body onload="">.
Если load должен быть использован, либо не используйте .ready() или используйте метод jQuery .load()
для прикрепления обработчика события load к окну или более конкретным объектам, таким как изображение.
Все три из следующих синтаксиса эквивалентны:
$(document).ready(handler)$().ready(handler) (не рекомендуется использовать)$(handler)
Существует также $(document).bind("ready", handler).
Этот оператор действует аналогично методу ready, но с одним исключением:
если событие ready уже запущенно, а вы попытаетесь применить
.bind("ready"), то этот обработчик не будет выполняться.
Метод .ready() может быть вызван только на объект jQuery
соответствующий текущему документу, так что выбор может быть опущен.
Метод .ready() обычно используется с анонимной функцией:
$(document).ready(function() {
// Вызов обработчика для .ready().
});
Если .ready() вызывается после инициализации DOM, новый переданный обработчик будет немедленно запущен. Псевдоним имен jQuery
Когда используется другая библиотека JavaScript, мы бы хотели вызвать jQuery.noConflict() для предотвращения конфликтов имен.
Когда вызывается эта функция, сокращение $ более не доступно,
это заставляет нас написать jQuery каждый раз, когда мы обычно пишем $.
Тем не менее, обработчик переданный в метод .ready()
может принять аргумент, который передает глобальный объект jQuery.
Это означает, что мы можем переименовать объект внутри контекста нашего обработчика .ready() не влияя на другой код:
jQuery(document).ready(function($) {
// Код обычно использующий $ расположен здесь.
});
Примеры
Пример 1
Отображает сообщение, когда объектная модель документа готова к использованию.
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
Результат выполнения кода выше:
Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
<style>p { color:red; }</style>
</head>
<body>
<p>
</p>
</body>
</html>
Пример 2
Данная функция выполняется, когда объектная модель готова к использованию:
$(document).ready(function(){
// Your code here...
});
Пример 3
Использование $(document).ready() и псевдонима $ при написании безотказного кода jQuery не полагаясь на глобальные псевдонимы:
jQuery(function($) {
// Your code using failsafe $ alias here...
});
Пример 4
Обычно пишется так:
$(function() {
// Your code here...
});
|