Fatal编程技术网
  • jquery/
  • Jquery 什么'；$（document.ready（）和省略它之间的区别是什么？

Jquery 什么'；$（document.ready（）和省略它之间的区别是什么？

jquery

Jquery 什么'；$（document.ready（）和省略它之间的区别是什么？,jquery,Jquery,在大多数教程中，都提到了两种执行jquery脚本的方法： 带有窗口。onload挂钩 使用$（document）.ready（function（）{…}）事件（可以缩写为$（function（）{…}）） 我发现即使我省略了所有的代码，它也能起作用，只要把代码放在一个遮挡中就可以达到同样的目的。就这样, <html> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script&g

在大多数教程中，都提到了两种执行jquery脚本的方法：

  • 带有
    窗口。onload
    挂钩
  • 使用
    $（document）.ready（function（）{…}）
    事件（可以缩写为
    $（function（）{…}）
    ）
我发现即使我省略了所有的代码，它也能起作用，只要把代码放在一个
遮挡中就可以达到同样的目的。就这样,

<html>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<body>
    <button id="btn" name="test" value="clickme">clickme</button>
</body>
<script>

//$(document).ready( function(){
//    $('#btn').on("click", function(e){
//        alert("hi")
//     }
//)})

$('#btn').on('click', function(e){
    alert('hi')
})
</script>
</html>


点击我
//$（文档）.ready（函数（）{
//$（'#btn'）。在（“单击”，函数（e）{
//警报（“hi”）
//     }
//)})
$（'#btn'）。在（'click'，函数（e）上{
警报（“嗨”）
})
正如您所看到的，未注释的代码（省略了所有
document.ready
staff或
window.onload
）和注释的代码都可以按预期向我发出警报

所以我的问题是，在这种情况下（绑定事件），因为我可以编写与未注释的代码片段一样优雅的代码。为什么我要像大多数教程中所说的那样编写代码（这与上面的注释样式相同）？

好吧，这两者并不完全相同。内联Javascript在DOM被自上而下解析时会在遇到它时立即执行。但是，您提到的钩子是在加载/准备好DOM之后执行的。所以，是的，除了组织之外，如果您确定您的JS只依赖于在内联之前加载的DOM的一部分，那么您就可以了。否则您肯定需要钩子。

根据jQuery文档：

.ready（处理程序）

描述：指定DOM完全加载时要执行的函数

document.ready
表示浏览器已解析所有DOM元素。有一种情况是，如果您有一个包含大量元素的长
标记，那么DOM元素对象不是完全由浏览器创建的，而且它也开始解析JavaScript。此时，您将无法从DOM树中查询
#btn
元素，因此事件侦听器无法附加到元素。

HTML中没有
延迟
或
异步
属性的标记将按照从上到下解析HTML文档的顺序执行。这意味着靠近文档顶部的脚本将在解析文档的其余部分之前执行，因此在它可用之前执行。这使得脚本的放置或脚本的执行时间在许多情况下都是相关的

在控制此执行时间时，您至少有五种执行启动脚本的选择：


  • 您可以将脚本放在
    部分或
    部分的顶部，并在加载时执行它。这样做的缺点是DOM尚未加载，因此无法对页面中的元素进行操作
    • 

  • 您可以在
    标记之前插入脚本，所有DOM都将被加载，您的脚本将能够访问所有内容
    • 

  • 您可以将脚本插入任意位置（包括
    标记中），并使用
    $（document）.ready（fn）
    在DOM准备就绪之前不执行
    fn
    。在内部，jQuery侦听
    DOMContentLoaded
    事件，并在触发时执行任何
    .ready（）
    处理程序
    • 

  • 您可以将脚本插入任意位置（包括
    标记），并使用
    window.onload（fn）
    在DOM准备就绪且所有外部资源（如图像）加载完毕之前不执行
    fn
    。注意，您还可以使用jQuery版本
    $（window.load（fn）
    • 

  • 您可以使用脚本标记上的
    async
    或
    defer
    属性强制它异步加载，稍后再加载。这将创建一个不确定的脚本执行时间（尽管总是比仅内联的时间晚），因此您可能需要一些特定的控件，如
    $（document）.ready（）
    ，以便在脚本执行之前知道DOM是安全的。您可以看到这些其他问题/答案以及有关async和defer属性操作的更多详细信息
    • 
因此，如果小心地将脚本标记放置在正确的位置，或者启动脚本没有尝试访问DOM元素，则不需要使用
    $（document）.ready（fn）
    或
    window.onload（fn）
    

    但是，如果您不能完全控制脚本的放置位置，并且需要访问DOM元素，或者您希望脚本能够放置在任何位置，并且仍然能够执行正确的操作，或者如果您只希望所有脚本都位于
    标记中，然后，您需要延迟脚本的执行，直到DOM准备就绪，并且
    $（document）.ready（fn）
    或
    窗口。onload（fn）
    将使执行变得容易。
    为了回答您的问题，您没有发现添加和省略
    $（document）.ready（function（）{}）之间有任何区别的原因
    是因为您在
    html
    标记结束之前保留了它
    

      

    • 您的代码是从上到下解析的
      • 

    • 当它到达脚本时，DOM已经准备好了。因此，
      $（document.ready
      将启动
      • 

    • 但是由于脚本位于底部，所以您可以确定DOM已经准备好了。在本例中，
      $（document）.ready
      没有区别
      • 

    
要查看差异，请将脚本标记移动到顶部的
    部分。然后，为了确保脚本正常工作，需要将其包含在
    $（document.ready
    之间。否则，您将向不存在的按钮添加
    单击
    处理程序，该按钮将不起作用
    
至于
    window.onload
    和
    $（document.ready
    ）之间的区别：
    

  • 窗口。加载所有内容后将触发onload
    。这意味着
它被激发，DOM已经准备好，所有的图像和其他文件也都准备好了														
    •