Question

这是一个简单的html文件：

<!DOCTYPE html>
<html>
   <head>
<title>Test Uploading Func.</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js">                  </script>        
<link type="text/css" href="jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>

        <!--Include js file-->
        <script type="text/javascript" src="upload.js" ></script>
</head>
<body>
    <button id="Upload" value="upload">upload</button>      
    <script type="text/javascript" src="upload.js" ></script>
</body>

这是我要包含的js文件：

$( '#Upload' ).bind('click', function(){
alert(">");
});

如果我只是在开头包含js文件，则选择器＃无法知道ID 上传，因此我必须再次添加在文件的末尾...我知道这是不正确的。但我不知道如何解决它？我们不是只在标签 head 中包含所有js文件吗？我展示的合适的编码风格是什么？谢谢。

更新问题!!!

如果我有很多这样的场景，我应该在所有功能中添加“$（document）.ready（）”吗？有点奇怪...... 还有一种方法吗？或者Web开发人员总是这样做。

我应该在哪里包含我的js文件？在开始还是结束？

如果我将它们全部包含在内，那么这种问题就不会出现了。那么为什么很多人只是在开始时包含js文件？

Answer 1

在选择元素之前，等待DOM为ready：

$(document).ready(function () {
    $( '#Upload' ).bind('click', function(){
        alert(">");
    });
});

更新

如果您在代码运行时操作期望在页面上的元素，则总是使用$(document).ready(...)。如果您的代码位于文档的<head></head>中，这一点尤其重要。

如果您的代码位于$(document).ready(...)标记内，则 使用</body>，但请注意differences between the two。

Answer 2

为什么不检查$(document).ready()并且只包括一次：

$(document).ready(function() {
    $( '#Upload' ).bind('click', function(){
        alert(">");
    });
});

Answer 3

将所有脚本放在body标签的底部通常被认为是更好的做法。我通常不会用于需要像HTML5 shiv或某些分析脚本一样位于顶层的专用脚本。

这样做的主要原因是脚本解释会暂停HTML / CSS渲染，这实际上可以减少感知的加载时间性能。

另一个好处是，您通常不必担心DOM就绪事件，因为当您的脚本在引用元素下面触发时，您可以确定HTML已“准备就绪”。

Answer 4

如果你使用jQuery，你应该总是把它放在$(document).ready(function(){ ... code here ... });
或$(function(){ ... code here ... })中，如果你不知道你是否有元素'还在努力装载。这样你就可以确保一切都按预期工作。这个功能还有另外一个问题，但这是最重要的。

避免包含js文件两次的方法

4 个答案: