jquery函数没有document.ready为什么不能工作？答案

【问题标题】：jquery functions are not working without document.ready why.?jquery函数没有document.ready为什么不能工作？
【发布时间】：2015-05-25 15:13:33
【问题描述】：

//在我们使用 Document.ready 之前，此代码不起作用

$('.a').on('click',function(){
   $('.a').fadeOut(200);
});

$(document).ready(function () {
   $('.a').on('click', function() {
   $('.shad').fadeIn(1000);
   });
});

【问题讨论】：

你看到这个答案了吗？ stackoverflow.com/questions/20819501/…

标签： jquery

【解决方案1】：

函数之外的任何 JavaScript 都按照它在页面中出现的顺序执行。当你过早调用 $('.a') 时，这些元素可能还不存在，jQuery 可能还没有加载。

$(document).ready(function() { ... } 中的任何内容都将在整个页面准备就绪后执行，此时所有 'a' 类元素都将存在于页面上。（参见Jeremy Thille 的评论，以澄清“就绪”与“已加载”。）

HTML：

<div class="a">click me</div>
<div class="shad">SHAD!</div>

JS：

$(document).ready(function () {
    $('.shad').hide(); // Hide the element on load
    $('.a').on('click', function () {
        $('.shad').fadeIn(1000); // Fade in on click
    });
});

小提琴：https://jsfiddle.net/BenjaminRay/j7kr21aj/

【讨论】：

这不准确。代码将在页面就绪后执行，而不是加载。就绪意味着：已经到达 HTML 文件的末尾并且已经创建了 DOM。加载意味着：所有资源，包括脚本和图像，都完全加载到视图中。这意味着如果 jQuery 没有完成加载，脚本将无法工作。如果 jQuery 的 script 标签放在使用它的脚本之后，就会发生这种情况。
@Jeremy Tille 感谢您的澄清和解释。我更新了描述 .ready() 函数何时发生的措辞。

【解决方案2】：

它是由试图在 DOM 中不存在的元素上创建事件引起的。使用 $(document).ready 确保 DOM 中存在元素。

$(document).ready(function () {
   $('.a').on('click', function() {
   $('.a').fadeOut(200);
   $('.shad').fadeIn(1000);
   });
});

【讨论】：

【解决方案3】：

这是因为 $(document).ready(function () { ... })（通常使用快捷方式 (function () { ... })）在 DOM 准备好进行操作时运行（因此是函数的名称）。在此之前，您在 jQuery 选择器中引用的 DOM 元素不可用。请注意，如果 <script> 元素在它之后（例如，在 <body> 的末尾），您可以操作 DOM 元素。

作为 jQuery 文档says，

传递给 .ready() 的处理程序保证在 DOM 已准备就绪，因此这通常是附加所有其他内容的最佳位置事件处理程序并运行其他 jQuery 代码。

【讨论】：