HTML内部jQuery功能正常，引用外部.js文件后功能失效求助

我刚碰到过类似的问题，把内联jQuery移到外部文件后失效，大概率是路径或者加载环节出了问题，咱们一步步排查：

1. 先排查最常见的路径错误 #

你用的~/js/jQueryPractice.js里的~符号，在纯静态HTML或者普通服务器环境下不会被浏览器识别——它一般是ASP.NET这类后端框架里的根目录标识，浏览器会把它当成路径的一部分去查找，直接导致文件404找不到。

解决办法：

• 如果你的项目根目录下确实有js文件夹，改用根相对路径：/js/jQueryPractice.js
• 要是HTML文件和js文件夹在同一层级（比如都在根目录），直接写js/jQueryPractice.js就行（去掉~）

验证方法：按F12打开浏览器开发者工具，切换到「Network」标签，刷新页面看这个JS文件的请求状态，要是显示404，那肯定是路径错了。

2. 确认jQuery库的加载顺序 #

你目前的HTML里已经把jQuery的<script>放在外部JS前面了，这部分是对的——因为外部脚本里用到了$，必须先加载jQuery才能识别这个符号。不过还是可以再确认下jQuery是否加载成功：
在开发者工具的「Console」标签里输入$，如果返回function(a,b){...}这种函数内容，说明jQuery加载正常；要是报错$ is not defined，那就是jQuery的CDN链接有问题，换个稳定的CDN或者本地引入jQuery文件试试。

3. 检查外部JS文件的代码完整性 #

确保jQueryPractice.js里的代码和之前内联的完全一致，没有语法错误：

$(document).ready(function () {
  $("#mainButton").click(function () {
    $("#mainInput").hide("slow");
  });
});

可以在开发者工具的「Sources」标签里找到这个JS文件，看看代码是否完整加载，有没有被截断或者拼写错误。

4. 用极简代码做测试（快速定位问题） #

如果还是找不到问题，先写个最简单的测试代码放到外部JS里：

$(document).ready(function(){
  console.log("外部JS加载成功！");
  $("#mainButton").text("点击隐藏输入框");
});

刷新页面后看控制台有没有输出，按钮有没有显示文字——如果有，说明加载没问题，再回头排查原代码的逻辑；如果没有，还是加载路径或者jQuery的问题。

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