javascript - jQuery 无法找到元素，除非内部文档准备就绪

Question

这个问题已经有答案了:

Why does jQuery or a DOM method such as getElementById not find the element? (7 个回答)

已关闭 9 年前。

我从这个简单的代码开始，目的是计算一次选择器。

(function($) {

    var $mydiv = $('.mydiv');
    var myFunc = function(){
         $mydiv.css('background', 'red');
    }

    $(document).ready(function(){
        myFunc();
    });

    $(document).resize(function(){
        myFunc();
    });

})(jQuery);

但是我只能通过将选择器移动到准备好的文档中来使其工作，但我不明白为什么我需要这样做。

(function($) {

    var $mydiv;
    var myFunc = function(){
         if(!$mydiv){
             $mydiv = $('.mydiv');
         }
         $mydiv.css('background', 'red');
    }

    $(document).ready(function(){
        myFunc();
    });

    $(document).resize(function(){
        myFunc();
    });

})(jQuery);

Answer 1

why document ready is necessary?

因为在加载时 javascript 开始执行时，Html 需要一些时间来呈现，因此文档准备好确保 html 已完全加载，然后再开始通过 jQuery 或 javascript 访问它。

否则 $('.elementClass') 将返回 null，因为 DOM 未加载，因此您的所有脚本都会出现意外。

如上所述here :

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.