jQuery document.ready

我对jQuery中的document.ready有点困惑。jQuery document.ready

你什么时候在 $（document）.ready（）里面定义了javascript函数，什么时候没有？

只需将$（document）.ready（）中的所有javascript代码放在里面足够安全吗？

当你不这样做时会发生什么？

例如，我使用通常的jQuery选择器，当你点击东西时会做某些事情。如果你没有用document.ready包装这些有什么危害？

如果有人在加载页面之前在分割秒中单击某个元素，是否会导致问题？还是会导致其他问题？

来源

2012-03-11 Dave31415

当DOM已被浏览器加载并准备好被操作时，会触发document.ready处理程序。

是否应该使用它取决于您将自定义脚本放在哪里。如果你把它们放在文档的末尾，就在关闭</body>标签之前，你不需要使用document.ready，因为当你的脚本执行的时候，DOM已经被加载了，你将能够操作它。

如果另一方面您将脚本放在文档的<head>部分中，则应该使用document.ready确保DOM在尝试修改它或将事件处理程序附加到各个元素之前已完全加载。如果你不这样做，并且你试图将一个事件处理函数附加到一个按钮上，这个事件将永远不会被触发，因为在脚本运行的那一刻，你用来查找按钮的jQuery选择器没有返回任何元素，并且您没有成功附加处理程序。

来源

2012-03-11 18:21:40

感谢。我想知道这是为什么我会出现一些奇怪的行为。 – Dave31415 2012-03-11 18:38:09

如果您正在调用href属性中的js函数，那么在ready（）中添加事件处理函数并没有什么坏处。如果您使用jQuery添加它们，那么您必须确保这些处理程序引用的对象已加载，并且此代码必须在文档被视为就绪（）之后出现。这并不意味着他们必须在ready（）调用中，但是，您可以在自己内部调用ready（）函数中调用它们。

来源

2012-03-11 18:21:26

当您需要该代码在执行前等待DOM加载时，您将代码放入$(document).ready。如果代码不需要首先加载DOM，则可以将其放在$（document）.ready之外。

顺便说一句，$(function() { })是短手$ (document).ready();

$(function() { 
    //stuff here will wait for the DOM to load 
    $('#something').text('foo'); //should be okay 
}); 

//stuff here will execute immediately. 
/* this will likely break */ 
$('#something').text('weee!');

来源

2012-03-11 18:22:14

谢谢！从来不知道'$ function（）' – 2012-05-22 20:00:54

实际上，它比这更有趣。由于这个构造，你可以在技术上将任何函数引用传递给'$（）'，并且在文档准备就绪时将它踢掉：'$（myfunction）'。由于少了一次关闭，因此可以节省记忆。 – 2012-05-22 20:17:12

话又说回来，你可以做到这一点有太多的其他方式：'$（文件）。就绪（myfunction的）'是一样的'$（myfunction的）' – 2012-05-22 20:18:04

如果在文档的末尾有你的脚本，你不需要的document.ready。

示例：有一个按钮，单击它时，您需要显示警报。您可以将单击事件绑定到document.ready中的按钮。您可以在文档的末尾编写jquery脚本，或者将元素加载到标记中。

在document.ready事件中写入所有内容会使您的页面变得臃肿。

来源

2012-03-11 18:22:21 Asdfg

什么时候在$（document）里面定义javascript函数。准备好（），你什么时候没有？

如果职能应该是全球可访问（这可能表明你的应用程序的设计不好），那么你必须定义它们的ready处理程序之外。

仅仅是把$（document）.ready（）中的所有javascript代码放在里面足够安全吗？

见上文。

当你不这样做时会发生什么？

取决于您的JavaScript代码在做什么以及它的位置。最糟糕的情况是，您将会遇到运行时错误，因为您正试图在DOM元素存在之前访问它们。如果您的代码位于head中，并且您不仅定义函数，而且已尝试访问DOM元素，则会发生这种情况。

例如，我使用通常的jQuery选择器，当您点击东西时会执行某些操作。如果你没有用document.ready包装这些有什么危害？

有没有 “伤害” 本身。如果脚本位于head中，那么它将不起作用，因为DOM元素尚不存在。这意味着，jQuery无法找到并将处理程序绑定到它们。
但是，如果你在结束body标记之前放置脚本，那么DOM元素将存在。

为了安全起见，只要你想访问DOM元素，将在ready事件处理到DOM被加载后才能被调用的函数这些调用。

由于jQuery tutorial（你应该看它）已经指出：

我们什么时候使用jQuery读取或操纵文档对象模型（DOM）做

由于几乎所有的东西，我们需要确保我们开始添加事件等，只要DOM准备就绪。

要做到这一点，我们注册的文件ready事件。
$(document).ready(function() { 
    // do stuff when DOM is ready 
}); 

要提供一个更完整的例子：

<html> 
    <head> 
     <!-- Assuming jQuery is loaded --> 
     <script> 

      function foo() { 
       // OK - because it is inside a function which is called 
       // at some time after the DOM was loaded 
       alert($('#answer').html()); 
      } 

      $(function() { 
       // OK - because this is executed once the DOM is loaded 
       $('button').click(foo); 
      }); 

      // OK - no DOM access/manipulation 
      alert('Just a random alert ' + Math.random()); 

      // NOT OK - the element with ID `foo` does not exist yet 
      $('#answer').html('42'); 

     </script> 
    </head> 
    <body> 
     <div id="question">The answer to life, the universe and everything</div> 
     <div id="answer"></div> 
     <button>Show the answer</button> 

     <script> 
      // OK - the element with ID `foo` does exist 
      $('#answer').html('42'); 
     </script> 
    </body> 
</html>

来源

2012-03-11 18:25:06

有为什么函数foo（）被排除在外的document.ready其他任何理由比范围？这仅仅是一种惯例，还是有一种像表演一样的理由？当我使用全局作用域时，我使用“window.foo = function（）{};”样式来使用显式范围定位。这不会推动JS执行，它会稍后声明变量，从而允许浏览器在声明函数之前继续加载HTML，并因此呈现可见（可忽略的）更快的东西？ – Nenotlep 2013-02-26 08:47:56

@Nenotlep：我想说，在ready handler中移动函数的速度可能会更快，这正是你提到的原因。这就是为什么将所有脚本放在主体尾部也是很好的做法。但是如果性能影响可以忽略不计，那也归结为个人偏好。这个具体的例子只是为了展示什么*有*进入'ready'处理程序什么不需要。 – 2013-02-26 10:40:21

jQuery document.ready

回答

相关问题