Знакомство с $(document).ready()
Это первая вещь, которую вы должны знать перед тем как начать изучать
jQuery: если вы хотите, чтобы события выполнялись на ваших страницах,
вы должны вызывать их из функции
$(document).ready(). Каждая операция внутри него
выполняется сразу после того, как страница закончит загружаться и перед
тем как содержимое страницы будет показано.
$(document).ready(function() {
// put all your jQuery goodness in here.
});
Функция $(document).ready()
дает множество приемуществ по сравнению с другими путями заставить
события выполняться. Во первых, вам не нужно ставить ни один знак
"поведения" внутрь HTML. Вы можете разделить все JavaScript/jQuery
внутрь разных файлов, в которых легко строить и в которых код будет
разделен от содержимого страницы. Мне никогда не нравилось видеть все
эти сообщения "javascript:void()" в строке
состояния в то время как вы проводите мышкой над ссылкой. Это то, что
происходит когда вы прописываете событие внутри тега <a href>
На некоторых страницах, в которых используется обычный JavaScript, вы можете видеть атрибут "onload" внутри тега <body>.
Проблема в том, что это ограничено использованием только одной функции.
И в добавок снова добавляет знак "поведения" к содержанию.
В замечательной книге
DOM Scripting
Джереми Кейса
(Jeremy Keith)
,
описывается как построить функцию
addLoadEvent в отдельном файле JavaScript, что позволит нескольким функциям быть вызванным внутри него.
Но это требует большое количество кода для того, что должно быть очень простым.
Она тоже вызывает те же события, когда страница загружается, что дает нам дополнительное приемущество от использования
$(document).ready()
С помощью
$(document).ready()
,
вы можете загрузить событие или вызвать событие или любую другую
операцию которая выполнится перед загрузкой страницы.
Все, что вы ставите внутрь скобок будет готово к выполнению в самый
ранний момент - в момент как DOM будет записан браузером, который
позволяет нескольким красивым эффектам и другим вещам выполниться сразу
как пользователь увидит элементы страницы первый раз.
Инструкция $(document).ready()
Некоторые подсказки для работы с
$(document).ready()
Одна или две важные вещи о
$(document).ready()
про которые мы еще не говорили, это то, что вы можете использовать её более одного раза.
На практике, если вы не стараетесь сохранить ваш код небольшим, то вы можете исключить файл JavaScript.
Было бы замечательно, если бы вы смогли соединить в файле функции или в нескольких файлах. Гибкость функции
jQuery's $(document).ready()
позволяет вам безболезненно это сделать.
Вы можете, например, создать файл .js, который будет загружаться на
каждой странице и еще один который будет загружаться только на главной
странице,
оба файла будут вызывать
$(document).ready().
Поэтому, внутри тега
на вашей главной странице будет всего три ссылки на файлы
JavaScript, например так:
<script src="/scripts/jquery.js"></script>
<script src="/scripts/common.js"></script>
<script src="/scripts/homepage.js></script>
Вы также можете сделать так в одиночном файле .js :
$(document).ready(function() {
// some code here
});
$(document).ready(function() {
// other code here
});
Последнее замечание: мы приводим здесь полезную подсказку, чтобы уменьшить ваш код.
Короткий путь записи это написание $(function(){ ... }) вместо $(document).ready():
$(function() {
// do something on document ready
});
Примеры
Пример 1
Показывает сообщение когда DOM готов к использованию:
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
Пример 2
Функция выполняется когда DOM готов к использованию:
$(document).ready(function(){
// Your code here...
});
Пример 3
Использование
$(document).ready()
и сокращения ; в написание кода jQuery
без использования глобальных префиксов:
jQuery(function($) {
// Your code using failsafe $ alias here...
});
Пример 4
Обычно пишут так:
$(function() {
// Your code }