HTML中Script标签加载异常 需重复引入才可正常运行问题

你遇到的问题由两个核心错误导致：

• 混淆了jQuery官方库文件和自定义业务脚本文件：你代码里两个不同路径引入的JQ.js/jq.js并不是同一个文件，其中一个是jQuery库本身，另一个是你编写的包含按钮点击逻辑的业务代码。你在head和body后各引入了其中一个，相当于任意位置缺了引入，就会少加载库或者少加载业务逻辑，功能自然失效。
• 未处理DOM加载顺序：如果在<head>中加载操作DOM的脚本，此时浏览器还未解析完<body>内的按钮、图片等节点，jQuery选择器无法匹配到目标元素，事件绑定不会生效。

不需要重复引入两次脚本，按以下步骤调整即可：

1. 先重命名文件做区分：将jQuery官方库文件重命名为jquery.min.js，自定义业务代码命名为main.js这类辨识度高的名称，避免同名文件混淆。
2. 所有脚本统一放在</body>标签前（所有DOM元素之后）按顺序引入，先引入jQuery库，再引入自定义业务代码，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JQuery Selectors</title>
</head>
<body>
  <h1>Events in JQuery</h1>
  <img src="../../../Media/word-image-1.png" alt="image" id="img1" width="1000px">
  <button id="btn">Click</button>

  <!-- DOM全部解析完成后按顺序引入脚本 -->
  <script src="../../../JQuery/jquery.min.js" type="text/javascript"></script>
  <script src="../JS/main.js" type="text/javascript"></script>
</body>
</html>

3. 如果需要把脚本放在<head>中引入，必须将自定义业务逻辑包裹在jQuery的DOM就绪回调中，等DOM树解析完成后再执行事件绑定：

// 自定义main.js中的代码
$(function() {
  $("button").click(() => {
    $("#img1").css("width", "500px");
  });
});

注意：同一个页面重复引入多次jQuery库，会导致之前绑定的事件、挂载的插件全部重置失效，还会拖慢页面加载速度，正常场景下全页面只需要引入一次jQuery库即可。

内容的提问来源于stack exchange，提问作者Filipe Silva