页面无法关联jQuery，求排查以下代码问题及原因

嘿，我一眼就看到问题所在啦，咱们来拆解一下：

核心问题：脚本加载顺序搞反了 #

浏览器是从上到下依次解析页面资源的，你现在把自定义的script.js放在了jQuery的CDN脚本前面——如果script.js里用到了$或者jQuery相关的语法，这时候jQuery还没被浏览器加载解析，自然会出现“找不到jQuery”的错误。

修正后的代码示例 #

把jQuery的引入放到自定义脚本前面就好：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="script.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<title>Page Title</title> 
</head> 
<body>

额外验证小技巧 #

• 按F12打开浏览器开发者工具，切换到「控制台」面板，如果看到$ is not defined这类报错，就坐实了是加载顺序的问题
• 如果还是不行，可以试试把jQuery下载到本地，用本地路径引入，排除CDN网络访问的问题
• 另外，记得在script.js里把依赖jQuery的代码包在DOM就绪函数里，避免DOM还没加载完就执行操作：

  $(document).ready(function() {
    // 你的jQuery代码写在这里
  });
  

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