2

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

<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 浏览器上进行了测试。

附加信息：我正在使用这个免费模板。请下载并检查 index.html，作者将所有脚本源放在文档末尾，它可以工作。为什么？？？？？？？

4

5 回答 5

3

是的，您应该在页面底部包含您的脚本，在您的情况下，您甚至在核心库加载之前就调用了 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>

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

那是因为您已选择在加载时加载 jquery 库（请看左侧），因此您的库在正文加载时包含在 DOM 中，即在您的小提琴中，您给库的位置是多余的

OP评论的更新

<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>
于 2013-01-16T06:44:59.267 回答
3

事实是，在执行脚本操作之前，只有 html 元素会快速呈现并显示给您，看起来页面加载速度更快，

javascript也不是按设计编译的，所以它会逐行执行，所以如果你要求一些jquery函数并且它们还没有被解释，那么浏览器会抛出错误，这就是为什么我们需要首先添加jquery线。

尝试运行

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

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

  </body>
</html>

对比

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

或者先看看这个

在顶部执行的脚本

进而

最后执行的脚本

它会清除你的概念。

也供您参考，请查看此

于 2013-01-16T07:00:52.533 回答
2

绝对你的脚本不会工作，因为它没有得到 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>

这是您必须遵循的顺序，然后将代码放在页面中的任何位置都没有关系。

于 2013-01-16T06:46:10.657 回答
1

脚本按照它们在 DOM 中遇到的顺序执行1

所以是的，脚本之间的顺序很重要。

在这种情况下，您的脚本在 jQuery之前运行，因此尝试访问$会导致 ReferenceError。要“修复”它，请将您的脚本放在jQuery 脚本元素下。脚本是在 : 中<head>还是底部并不重要，但脚本<body>的相对顺序很重要。

这是无效排序的一个简单模型：

<script>
   alert($)  // attempt to use $, but ..
</script>
<script>
   $ = "foo" // .. $ not set UNTIL here (later)
</script>

如果这两个脚本元素的顺序颠倒了，那么“foo”将如预期的那样被警告。

1（也许除了那些标记为 async=true 的，我不会谈论。）

于 2013-01-16T06:45:00.670 回答
0

这个答案适用于那些对为什么有时代码有效而有时在将库源放在页面底部时却无效的人。

在我自己沉浸在这个谜团中很长一段时间之后，我把它展示出来了。在这个问题上有两个独立且不同的关注点，一个是关于执行代码，一个是关于加载代码。

只要您在加载页面时不执行任何代码，jquery 源的位置就无关紧要。是的，你没看错，而且绝对正确。

请允许我举例说明；

<script>
    $("#emailInput").change(function(){
        // perform some operations when a change is detected in the input emailInput
    });
</script>

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

上面的代码将在页面加载时执行。如您所见$("#emailInput")，拥有 jquery 选择器是在 jquery 库被加载和执行之前执行的（这是 jquery 将定义 $ 及其所做的所有事情的地方）。这就是导致错误Uncaught ReferenceError: $ is not defined to be throw 的原因。

但是，如果页面加载时代码没有执行，我们不会有任何错误，这也最好用一个例子来说明。

<html>
    <head>
        <script>
            function writeMessage(){
                $("#message").html("Surprise ladies!");
            }
        </script>
    </head>
    <body>
        <button onclick="writeMessage()">Click me</button>

        <div id="message"></div>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    </body>
</html>

上面的代码是完整和正确的，所以你可以自己试试看，它工作得很好。这是因为页面加载时该函数writeMessage()尚未执行。该功能仅在按下按钮时执行；这是在页面加载之后（到那时 jquery 库已经加载并执行）。

我在评论中看到，在这个链接中，代码在加载库后工作。删除在底部找到的jquery src，再次运行它，jquery仍然可以工作！我最好的猜测是，代码使用的是 jsfiddle 网站上提供的库。

我希望这能澄清我们一直生活在其中的谜团。

于 2020-04-24T19:36:32.537 回答