刚开始使用Javascript / jQuery时,我被告知要使用document.ready,但我从未真正了解原因。
有人可能会提供一些基本准则,说明何时在jQuery的内部包装javascript / jquery代码document.ready吗?
document.ready
我感兴趣的一些主题:
.on()
更新: 为了遵循最佳实践,我所有的JavaScript(jQuery库和应用程序的代码)都位于HTML页面的 底部 ,并且我在defer加载AJAX的页面上使用jQuery脚本中的属性,以便可以访问这些页面上的jQuery库。
defer
简单来说
$(document).ready是document准备就绪时触发的事件。
$(document).ready
document
假设您已将jQuery代码放在head一节中并尝试访问dom元素(锚点,img等),则将无法访问它,因为它html是从上到下解释的,并且当jQuery代码时不存在html元素运行。
head
dom
html
为了克服这个问题,我们将每个jQuery / javascript代码(使用DOM)放在$(document).ready函数中,当dom可以访问所有元素时会调用该函数。
这就是原因,当您将jQuery代码放在底部(在所有dom元素之后,在之前</body>)时, 不需要$(document).ready
</body>
出于与我上面解释的相同原因,仅在使用method 时才需要将onmethod放入内部。$(document).ready``on``document
on
$(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 () { });
编辑
根据评论,
$(document).ready不等待图像或脚本。那$(document).ready和之间的最大区别$(document).load
$(document).load
只有访问DOM的代码才应位于就绪处理程序中。如果是插件,则不应处于ready事件中。