tim*_*son 107 javascript jquery dom event-handling document-ready
当我第一次开始使用Javascript/jQuery时,我被告知要使用document.ready,但我从未真正了解过原因.
有人可以提供一些基本指导,以便将javascript/jquery代码包装在jQuery中document.ready吗？
我感兴趣的一些主题:
.on()方法:我使用.on()AJAX 的方法(通常是动态创建的DOM元素)..on()点击处理程序应该始终在里面 document.ready吗？更新:为了遵循最佳实践,我的所有javascript(jQuery库和我的应用程序的代码)都位于我的HTML页面的底部,我defer在我的AJAX加载页面上使用包含jQuery的脚本上的属性,以便我可以访问这些页面上的jQuery库.
Jas*_*ant 142
简单来说,
$(document).ready是一个document准备就绪时会激活的事件.
假设您已将jQuery代码放入head部分并尝试访问dom元素(锚点,img等),您将无法访问它,因为html从上到下解释并且当您的jQuery代码时您的html元素不存在运行.
为了解决这个问题,我们将每个jQuery/javascript代码(使用DOM)放在$(document).ready函数中,当dom可以访问所有元素时调用它们.
这就是原因,当你将jQuery代码放在底部(在所有dom元素之后,就在之前</body>),没有必要$(document).ready
由于与上面解释的原因相同,因此只有在使用方法时才需要将on方法置于内部.$(document).readyondocument
//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的代码才能处于就绪处理程序中.如果它是一个插件,它不应该在ready事件中.
回答:
jQuery的.on()方法:我对AJAX使用了很多的.on()方法(动态创建DOM元素)..on()点击处理程序是否应始终位于document.ready中？
不,不总是.如果您在文档头中加载JS,则需要.如果您在通过AJAX加载页面后创建元素,则需要.如果脚本位于html元素下方,您也不需要添加处理程序.
性能:将各种javascript/jQuery对象保存在document.ready内部或外部是否更高效(同样,性能差异是否显着？)？
这取决于.附加处理程序需要相同的时间,这取决于您是否希望在页面加载时立即发生,或者您希望它等到加载整个文档.所以它将取决于你在页面上做的其他事情.
对象范围:加载AJAX的页面无法访问上一页文档内的对象.正确吗？他们只能访问document.ready之外的对象(即真正的"全局"对象)？
它本质上是它自己的功能,所以它只能访问在全局范围内声明的vars(在所有函数之外/之上)或者 window.myvarname = '';
在您可以安全地使用jQuery之前,您需要确保页面处于可以被操作的状态.使用jQuery,我们通过将代码放在一个函数中,然后将该函数传递给它来实现这一目标$(document).ready().我们传递的函数可以只是一个匿名函数.
$(document).ready(function() {
console.log('ready!');
});
这将运行我们在文档准备好后传递给.ready()的函数.这里发生了什么？我们使用$(document)从我们页面的文档创建一个jQuery对象,然后在该对象上调用.ready()函数,并将它传递给我们想要执行的函数.
因为这是你会发现自己做了很多事情,如果你愿意,有一个简写方法 - $()函数作为$(document).ready()的别名执行双重任务,如果你传递一个函数:
$(function() {
console.log('ready!');
});
这是一个很好的阅读:Jquery Fundamentals
| 归档时间： |
|
| 查看次数： |
69520 次 |
| 最近记录： |