В данной статье рассмотрим, зачем в JS скриптах используется данный метод jQuery, а также особенности его применения.
Назначение
Начнем с того, что .ready() – это метод JQuery для обработки события готовности страницы.
Под готовностью страницы понимается готовность дерева DOM: к этому моменту сформированы все элементы на странице, они еще могут визуально не отображаться (например, различный мультимедийный контент может быть не до конца загружен), но ко всем элементам DOM можно обратиться или установить для них обработчик.
Таким образом, помещая код внутри конструкции
|
1 2 3 |
$(document).ready(function() { // ... }); |
вы можете беспрепятственно работать со всеми элементами DOM.
Синтаксис
Полная запись:
|
1 2 3 |
$(document).ready(function() { console.log("ready!"); }); |
Код, который необходимо выполнить после готовности страницы, можно вынести в отдельную, заранее объявленную именованную функцию:
|
1 2 3 4 |
function myFunction() { // Код, выполняемый после готовности страницы } $(document).ready(myFunction); |
Сокращенная запись:
|
1 2 3 |
$(function() { console.log("ready!"); }); |
Еще один вариант сокращенной записи
|
1 2 3 4 |
function myFunction() { // Код, выполняемый после готовности страницы } $(myFunction); |
Особенности
- .ready() метод jQuery, не забудьте подключить библиотеку до использования данного метода.
- Необходимости использования метода .ready() нет, если вы располагаете или подключаете скрипт непосредственно перед закрывающим тегом </body>, поскольку HTML парсится последовательно и в конце документа DOM уже сформирован.
- Не располагайте внутри функции, вызов которых может осуществляться до загрузки дерева DOM.
- Если нужно работать с контентом, или дождаться его окончательной загрузки, используйте метод .load() вместо .ready().
