JQuery DOM Готов

Question

В следующем фрагменте кода:

<form>
    <fieldset>
        <button id="indexGetStarted" class="button" type="submit">Get Started!</button>
    </fieldset>
</form>
<script type="text/javascript">

    $(document).ready(function() {

        $('#indexGetStarted').click(function() {
            $('form').submit();
            return false;
        });

    });

</script>

Нужно ли $(document).ready(function() { ... }?

Answer 1

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

Answer 2

Да, требуется для написания чистого кода, но есть ярлык:

$(function() { .... });
// is the same as
$(document).ready(function() { .... });

Поведение объектов DOM, прикрепление событий и т. Д. До полной загрузки объектов DOM будет непредсказуемым и часто вообще не будет работать.

Это может работать, если элементы объявлены до загрузки частей скрипта.

Answer 3

Нет, это не нужно. Если вы размещаете сценарии после элементов DOM в источнике, эти элементы естественно доступны. Некоторые тесты показывают, что это ускорит рендеринг, особенно в IE.

Вы можете связать материал с событием 'ready' ранее в разметке, а затем запустить $.ready() перед закрытием тела с тем же эффектом.

Answer 4

Строго говоря, это всегда необходимо, если вы обращаетесь к элементам DOM во вложенном коде. $(document).ready() задерживает выполнение кода до полного построения дерева DOM, что важно, поскольку вы получаете доступ к дереву DOM через $('#indexGetStarted'). Практически, это, вероятно, будет работать в любом случае, но я бы не рекомендовал это.