Javascript 外部JS文件赢得'；无法识别html中的元素_Javascript_Jquery_Html

Javascript 外部JS文件赢得'；无法识别html中的元素

javascript jquery html

Javascript 外部JS文件赢得'；无法识别html中的元素,javascript,jquery,html,Javascript,Jquery,Html,这可能是我在用JavaScript编程时遇到的最奇怪的事情，我在网上找不到任何解决方案所以我所做的就是创建一个html文档和一个外部链接到它的JS文件。当我尝试在JS文件中引用页面中的元素时，它什么都不做，控制台中也没有任何错误。下面是一个例子： $（'#框'）。单击（函数（）{ 警报（“测试”）； }) 如果您像下面这样定义HTML，它的行为如何： <html> <head> <script src="https://ajax.googleapis

这可能是我在用JavaScript编程时遇到的最奇怪的事情，我在网上找不到任何解决方案

所以我所做的就是创建一个html文档和一个外部链接到它的JS文件。当我尝试在JS文件中引用页面中的元素时，它什么都不做，控制台中也没有任何错误。下面是一个例子：

$（'#框'）。单击（函数（）{
警报（“测试”）；
})

如果您像下面这样定义HTML，它的行为如何：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
  </head>
  <body>
    <div id="box" style="width: 200px; height: 100px; background: #000;">
     </div>
  </body>
  <script src="script.js" type="text/javascript"></script>
</html>

实际上，建议在文档正文之后包含自定义JavaScript。

除了修复您的问题之外，HTML将在JavaScript执行完成之前显示在页面上

如果您像下面这样定义HTML，它的行为如何：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
  </head>
  <body>
    <div id="box" style="width: 200px; height: 100px; background: #000;">
     </div>
  </body>
  <script src="script.js" type="text/javascript"></script>
</html>

实际上，建议在文档正文之后包含自定义JavaScript。

除了修复您的问题之外，HTML将在JavaScript执行完成之前显示在页面上

如果scripts.js正在使用jquery，则需要在加载scripts.js之前加载jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
<script src="script.js" type="text/javascript"></script>

如果scripts.js正在使用jquery，则需要在加载scripts.js之前加载jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
<script src="script.js" type="text/javascript"></script>

您有两个不同的问题：

首先，必须在脚本之前加载jQuery，以便在脚本运行时它可用。因此，切换两个脚本标记的顺序以解决该问题

在加载DOM之前，脚本无法运行。当您在

标记中运行它时，它是在加载DOM之前运行的，因此此时页面是空的，因此您的代码无法找到合适的元素来安装单击处理程序。有几种方法可以解决这个问题。最简单的方法是将所有脚本标记移到

之前。这将确保在脚本运行时DOM可用，并且您不必执行任何其他特殊操作

以下是HTML的修订版，应该可以使用：

<html>
<head>
</head>
<body>

<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>

在jQuery中，

$（document）.ready（fn）

构造指示jQuery仅在DOM完成加载时调用特定函数。这允许您将此初始化脚本放置在任何位置，jQuery将确保在DOM就绪之前不会调用回调函数。

您有两个不同的问题：

首先，必须在脚本之前加载jQuery，以便在脚本运行时它可用。因此，切换两个脚本标记的顺序以解决该问题

在加载DOM之前，脚本无法运行。当您在

之前。这将确保在脚本运行时DOM可用，并且您不必执行任何其他特殊操作

以下是HTML的修订版，应该可以使用：

<html>
<head>
</head>
<body>

<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>

在jQuery中，

$（document）.ready（fn）

构造指示jQuery仅在DOM完成加载时调用特定函数。这允许您将此初始化脚本放置在任何位置，jQuery将确保在DOM准备就绪之前不会调用回调函数。

尝试将脚本引用放在body标记关闭之前，并确保首先加载jQuery。在包含jQuery之后，应包含脚本（使用jQuery）。顺便说一下，绑定事件的最佳时间可能是调用Document.Ready时<代码>$（function（）{$（'#box'）。单击（function（）{alert（'test'）；}；}）尝试将脚本引用放在body标记关闭之前，并确保先加载jquery。您应该包括脚本（使用jquery）顺便说一句，在包含jQuery.之后，绑定事件的最佳时间可能是调用Document.Ready时。

$（function（）{$（'#box'）。单击（function（）{alert（'test'）；}；}）

Hmm。这确实有效。知道为什么会这样吗？我真的希望我的脚本源代码在头部。你的问题是：必须在你对它应用任何事件之前创建。是的。就是这样。所以我想我不可能把它放在头部而不是身体中。你可以用

$（文档）。ready（function（）{…}来包装你的代码

按所述的块，嗯。这确实有效。知道为什么会这样吗？我真的希望我的脚本源在头部。你的问题是：必须在你对其应用任何事件之前创建。是的。就是这样。所以我想我没有办法把它放在头部而不是身体中。你可以用

$（文档）包装你的代码.ready（function（）{…}）；

如前所述的块