什么时候应该使用jQuery的document.ready函数？

107

刚开始使用Javascript / jQuery时，我被告知要使用document.ready，但我从来没有真正了解过为什么。

有人可能会提供一些基本准则，说明何时将javascript / jquery代码包装在jQuery中document.ready吗？

我感兴趣的一些主题：

jQuery的.on()方法：我.on()对AJAX 使用了很多方法（通常在动态创建的DOM元素上）。.on()单击处理程序是否应该始终在内部 document.ready？
性能：将各种javascript / jQuery对象保留在 document.ready 内部或外部是否更有性能（性能差异是否显着？）？
对象范围：AJAX加载页面不能说是访问对象中的前一页的的document.ready，正确吗？他们只能访问document.ready 之外的对象（即真正的“全局”对象）吗？

更新：为了遵循最佳实践，我所有的JavaScript（jQuery库和应用程序的代码）都位于HTML页面的底部，并且我在defer加载AJAX的页面上使用jQuery脚本中的属性，以便可以访问这些页面上的jQuery库。

— 蒂姆·彼得森
source

2

因为如果DOM还没有准备好，您可能会得到意想不到的结果，仅此而已。

— 罗伯特·哈维

1

2.-好吧，我只是在外面用调试功能，可以通过控制台调用某些var / function，

— 2012年

@RobertHarvey什么样的“意外”结果？你能提供一个例子吗？

— 蒂姆·彼得森

3

您尝试修改尚未加入DOM的元素或属性。

— 罗伯特·哈维

143

简单来说

$(document).ready是document准备就绪时触发的事件。

假设您将jQuery代码放在head一节中并尝试访问dom元素（锚点，img等），则将无法访问它，因为它html是从上到下解释的，并且当jQuery代码时不存在html元素运行。

为了克服这个问题，我们将每个jQuery / javascript代码（使用DOM）放在$(document).ready函数中，当dom可以访问所有元素时会调用该函数。

这就是原因，当您将jQuery代码放在底部（在所有dom元素之后，在之前</body>）时，不需要$(document).ready

出于与我上面解释的相同原因，仅当使用method 时，才需要将on方法放置在内部。$(document).readyondocument

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

编辑

根据评论，

$(document).ready不等待图像或脚本。那$(document).ready和之间的最大区别$(document).load
只有访问DOM的代码才应位于就绪处理程序中。如果是插件，则不应处于ready事件中。

— 贾什万特
source

@Dipaks是的，为什么不呢？我们只是非常习惯使用$(document).ready。看到这个

— Jashwant 2012年

只要您head在元素被操纵后在和脚本中加载jQuery ，document.ready就不需要。图片是一个特殊的情况……

— elclanrs 2012年

@elclanrs看到我更新的问题。之后，我会在HTML页面底部使用特定于应用程序的代码加载jQuery。

— 蒂姆·彼得森

@Jashwant dom.ready与not.dom的性能差异如何？这些相关吗？

— 蒂姆·彼得森

1

我们不会将所有jQuery代码都放在就绪处理程序中。仅访问DOM的代码。如果它是一个插件，它不应该在ready 事件

— 胡安·门德斯

7

答案：

jQuery的.on（）方法：我对AJAX使用.on（）方法很多（动态创建DOM元素）。.on（）单击处理程序是否应该始终位于document.ready内部？

不，并非总是如此。如果将JS加载到文档头中，则需要这样做。如果要在通过AJAX加载页面后创建元素，则需要这样做。如果脚本也位于html元素下方，那么您也不需要添加处理程序。

性能：将各种javascript / jQuery对象保留在document.ready内部或外部是否更有性能（性能差异是否显着？）？

这取决于。附加处理程序所需的时间相同，这取决于您是否希望它在页面加载时立即发生，还是要等待直到整个文档加载完毕。因此，这将取决于您在页面上正在做什么。

对象范围：加载AJAX的页面无法访问上一页文档中的对象。准备好了吗？他们只能访问document.ready之外的对象（即真正的“全局”对象）吗？

它本质上是它自己的函数，因此它只能访问在全局范围（所有函数之外/之上）声明的var或 window.myvarname = '';

— 贾斯汀
source

6

在安全地使用jQuery之前，您需要确保页面处于可以被操作的状态。使用jQuery，我们可以通过将代码放入一个函数中，然后将该函数传递给来实现此目的$(document).ready()。我们传递的函数只能是匿名函数。

$(document).ready(function() {  
    console.log('ready!');  
});

文档准备好后，它将运行传递给.ready（）的函数。这里发生了什么？我们使用$（document）从页面的文档中创建一个jQuery对象，然后对该对象调用.ready（）函数，并向其传递我们要执行的函数。

由于这是您会做的很多事情，因此，如果您愿意，可以使用一种简便的方法-$（）函数作为$（document）.ready（）的别名，如果您将其传递给函数，则具有双重作用：

$(function() {  
    console.log('ready!');  
});

这是一本好书：Jquery基础知识

— 汤姆·萨杜伊
source

3

不要混淆，(function($){ })(jQuery);它包装了您的代码，以便$是封闭中的jQuery

— John Magnolia 2014年

3

.ready（） -指定在DOM完全加载时要执行的函数。

$(document).ready(function() {
  // Handler for .ready() called.
});

这是所有jQuery方法的列表

阅读介绍$（document）.ready（）

— 迪帕克
source

3

现实地讲，document.ready除了准确地操作DOM之外，不需要其他任何东西，并且并非总是需要它或最佳选择。我的意思是说，例如，当您开发一个大型jQuery插件时，几乎不会在整个代码中使用它，因为您试图将其保持为DRY，因此您将尽可能多地抽象化用于操作DOM但应被调用的方法稍后的。当所有代码紧密集成在一起时，公开的唯一方法document.ready通常是init发生所有DOM魔术的地方。希望这能回答您的问题。

— 氏族
source

0

您应该将所有操作绑定到document.ready中，因为您应该等待文档完全加载完毕。

但是，您应该为所有操作创建函数，并在document.ready中调用它们。创建函数（全局对象）时，可以随时调用它们。因此，一旦加载了新数据并创建了新元素，请再次调用这些函数。

这些功能是您绑定事件和操作项的功能。

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}

— 普尔吉特·米塔尔
source

0

我在div上附加了一个链接，并希望在单击时执行一些任务。我将代码添加到DOM中附加元素的下面，但是没有用。这是代码：

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

它不起作用。然后，我将jQuery代码放在$（document）.ready内，并且运行良好。这里是。

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});

— 更安全的艾哈迈德
source

-2

当DOM（文档对象模型）已加载时，发生ready事件。

因为此事件在文档准备好之后发生，所以是拥有所有其他jQuery事件和函数的好地方。就像上面的例子一样。

ready（）方法指定发生ready事件时发生的情况。

提示：ready（）方法不应与一起使用。

— Shrikant Shiledar
source