何时应该使用jQuery的document.ready函数？

Question

何时应该使用jQuery的document.ready函数？

javascriptjquerydomevent-handlingdocument-ready

112

我第一次开始使用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页面的底部，并且我在我AJAX加载的页面上使用defer属性来包含jQuery，以便我可以在这些页面上访问jQuery库。

- tim peterson

2

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

1

2.- 我通常使用 outside 来进行调试，并可以通过控制台调用一些变量/函数。 - jd_7

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

3

你试图修改尚未添加到DOM的元素或属性。 - Robert Harvey

8个回答

7

答案：

jQuery的.on()方法：我经常在AJAX中使用.on()方法（动态创建DOM元素），那么是否应该将.on()点击处理程序放在document.ready内部呢？

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

性能：将各种javascript/jQuery对象放在document.ready内部还是外部更高效（性能差异是否显着）？

这取决于情况。附加处理程序需要相同的时间，只是取决于您是否希望它在页面加载时立即发生，还是等待整个文档加载完毕。因此，这将取决于您在页面上执行的其他操作。

对象作用域：无法访问先前页面的document.ready中存在的对象，正确吗？它们只能访问在document.ready之外的对象（即真正的“全局”对象）？

它基本上是自己的函数，因此只能访问在全局范围内声明的变量（在所有函数之外/上面声明），或者使用 window.myvarname = '';。

- Justin

6

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

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

一旦文档准备就绪，将运行我们传递给.ready()的函数。这里发生了什么？我们使用$(document)从页面文档创建一个jQuery对象，然后在该对象上调用.ready()函数，将要执行的函数传递给它。

由于这是您经常会做的事情，如果您喜欢，有一个简写方法- $()函数可以同时作为$(document).ready()的别名，如果您传递一个函数：

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

这是一篇很好的阅读材料：jQuery基础

- Tomas Ramirez Sarduy

3

不要将其与 (function($){ })(jQuery); 混淆，该语句会将您的代码包装在闭包中，以便 $ 在该闭包内表示 jQuery。 - John Magnolia

3

.ready() - 当DOM完全加载后，指定要执行的函数。

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

这里是所有jQuery方法的列表。

继续阅读介绍$(document).ready()。

- Dipak

3

要实际一些，document.ready仅用于准确地操作DOM，并非始终需要或是最佳选择。我的意思是，例如你正在开发一个大型jQuery插件，你几乎不会在整个代码中频繁使用它，因为你正在尝试保持DRY（Don't Repeat Yourself），所以你将尽可能多的抽象成方法来操作DOM，但这些方法是后面才调用的。当所有的代码紧密集成时，在document.ready中暴露的唯一方法通常是init，其中包含所有的DOM魔法。希望这回答了你的问题。

- elclanrs

1

你应该在 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...);
}

- Pulkit Mittal

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');
    });
});

- Safeer Ahmed

-2

ready事件发生在DOM（文档对象模型）加载完成后。

由于此事件发生在文档准备就绪之后，因此这是一个很好的地方来放置所有其他jQuery事件和函数。就像上面的例子一样。

ready()方法指定了ready事件发生时会发生什么。

提示：不应将ready()方法与一起使用。

- Shrikant Shiledar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jashwant · Accepted Answer

简单来说，$(document).ready是一个事件，当document准备就绪时触发。

如果你将jQuery代码放置在标签中，并尝试访问一个dom元素（例如anchor、img等），你将无法访问它，因为从上到下解释，而当你的jQuery代码运行时，html元素还不存在。

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

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

只有当你在document上使用on方法时，由于上面解释的原因，才没有必要把on方法放在$(document).ready内。

    //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的代码应该在准备好事件处理程序中。如果是插件，则不应该在准备好事件中。