我一直想知道,主要是因为在创建页面时,由于以下原因,我总是遇到麻烦:
您什么时候写JavaScript
- 在里面
<head>
- 在里面
<body>
- 与
$(document).ready()
我可能很愚蠢,但是有几次我的JavaScript(/ jQuery)由于位置错误或yes或nodoc.ready()
命令而没有执行。所以我真的很想知道。
jQuery和'var'命令也是如此
$(document).ready()
只需确保在加载JavaScript之前已加载所有DOM元素。
没关系的时候
不等待该事件触发,您可能最终要处理页面上尚不存在的DOM元素或样式。DOM ready事件还使您可以更加灵活地在页面的不同部分上运行脚本。例如:
<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
将运行,因为在脚本运行之前已加载了map div。实际上,通过将脚本放在页面底部,您可以获得一些相当不错的性能改进。
什么时候重要
但是,如果要在<head>
元素中加载脚本,则大多数DOM都没有加载。此示例不起作用:
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>
不会,因为尚未加载map div。
一个安全的解决方案
您可以通过等待整个DOM加载完成来避免这种情况:
<script type="text/javascript">$(document).ready(function () {
document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>
按照现代的“最佳实践”,它是这样的:
- 在
<head>
开始呈现页面之前,将脚本放置在应该发生的时间。例如HTML 5填充程序库或Modernizr之类的东西。 - 如果对脚本导入方式的控制有限,则将脚本置于“就绪”处理程序中。诸如可以在页面上包含的实用程序之类的东西通常会使用“就绪”处理程序,因为它们不确定如何使用它们,这些实用程序可以包含在页面中以不加干扰地添加功能。
<body>
如果在其他所有情况下都可以避免使用脚本,请将脚本放在末尾。
有时,您最终会遇到页面中的依赖项,而这些依赖项要求您将原本希望在body元素的末尾加载的内容。这是不希望发生的情况,但是如果您无法避免这种情况,则会强制将脚本加载到<head>
而不是末尾<body>
。
最好在文档末尾加载内容,因为浏览器<script>
在加载标签时会评估标签的内容。(有一些“现代”方法可以避免这种情况,但这正在进入更复杂的领域。)
何时使用“就绪”处理程序(或“加载”处理程序)的决定与有关将<script>
标签放置在何处的决定有些不同。例如,如果您从服务器端模板系统中获得了页面内窗口小部件来生成(不需要的,但是您能做什么?)jQuery引用,那么即使其他代码,您也需要在页面顶部导入jQuery。可能会将初始化推迟到“就绪”处理程序。就是说,何时使用“就绪”的决定与您的脚本是否愿意在正确的时间点将其导入页面有关,还是要确保无论在何处都发生正确的事情,它的<script>
标签被放置。
这取决于何时需要执行代码。
如果要操纵DOM树(例如,将元素四处移动/显示隐藏等)并将代码放在文档的开头,则在执行代码时元素将不存在,因此代码将无法工作。
在这种情况下,您可以将代码放在文档的开头,并在文档DOM准备就绪时调用它, $(document).ready()
在您的文档末尾放置代码几乎是没有必要的,我可以想到的一个例子是google plus +1按钮,它要求您将脚本放在最后一个+1按钮之后,因此只需将其粘贴到文档末尾即可为了确定。
文章标签:document-body , head , javascript , jquery , location
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!