jquery源代码在html文件中的位置是否重要

Question

这是一个弹出警报的单击按钮的示例。

<script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

如果将上面的部分放在head部分中，它就可以工作。如果上面的部分放在下面，它就不起作用了。

​

这让我抓狂，因为在一个开源代码中，作者说如果将脚本源代码放在html的末尾，页面加载速度会更快。我花了很多时间来弄清楚为什么源代码不能工作，我发现原因在脚本src部分的位置。

但是，当我在http://jsfiddle.net/eSud7/3/上测试时，脚本的位置并不重要。

有谁能解释一下原因吗？

我正在使用Google App Engine，并在Firefox浏览器上测试。

更多信息:我正在使用this free template。请下载并检查index.html，作者将所有的脚本源代码放在文档的末尾，它就可以工作了。为什么？

Answer 1

是的，你确实应该在页面的底部包含你的脚本，在你的例子中，你甚至在核心库加载之前就调用了jquery函数。您必须在jquery库之后包含脚本，因为函数是在库中定义的，并且在代码执行时必须引用这些函数

//At the bottom of the page
<script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<script>

      $(document).ready("#button").click(function() {
      alert('button clicked');
});
  </script>

但是，当我在上测试时，脚本的位置并不重要。

这是因为您选择了在加载时加载jquery库(查看左侧)，因此您的库在主体加载时包含在DOM中，即在您的提琴中，库的给定位置是多余的

更新操作注释

<script>
    $(document).ready("#button").click(function() { //Included at the header, jquery object like $ and function like ready not declared yet !!!
      alert('button clicked');
    });
  </script>

在页面的底部

//Contains all the jquery functions
    <script  type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>

Answer 2

事实是，在执行脚本操作之前，只有html元素会被快速渲染并显示给你，而且看起来页面加载速度更快。

另外，javascript是被解释的，而不是被设计编译的，所以它将被逐行执行，所以如果你请求一些jquery函数，而它们还没有被解释，那么浏览器就会抛出错误，这就是为什么我们需要在第一行添加jquery。

尝试运行

<html>
  <body>
    <p> HTML Element</p>

     <script>
      alert("Hello World");
    </script>

  </body>
</html>

vs

<html>
    <head>
        <script>
            alert("Hello World");
        </script>
    </head>
    <body>
        <p> HTML Element</p>
    </body>
</html>

或者先看看这个

Script executed at top

然后

Script executed at last

它会澄清你的概念。

另外，作为参考，请在this上查看

Answer 3

您的脚本绝对不会工作，因为它没有获得jquery所需的函数。

因此，您必须使用此脚本下面的脚本：

<script  type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<script  type="text/javascript">
  // all your code stuff
</script>

这是你必须遵循的顺序，把你的代码放在页面的任何地方都无关紧要。