小编典典

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

javascript

刚开始使用Javascript / jQuery时,我被告知要使用document.ready,但我从未真正了解原因。

有人可能会提供一些基本准则,说明何时在jQuery的内部包装javascript / jquery代码document.ready吗?

我感兴趣的一些主题:

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

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


阅读 583

收藏
2020-04-25

共1个答案

小编典典

简单来说

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

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

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

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

出于与我上面解释的相同原因,仅在使用method 时才需要将onmethod放入内部。$(document).ready``on``document

    //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 () {
    });

编辑

根据评论,

  1. $(document).ready不等待图像或脚本。那$(document).ready和之间的最大区别$(document).load

  2. 只有访问DOM的代码才应位于就绪处理程序中。如果是插件,则不应处于ready事件中。

2020-04-25