非CDN方式上传jQuery/JavaScript库至页面的问题求助

• 为使按钮正常工作安装了必要的库。
  
• 随后出现报错。
  
• 通过拖拽方式将jQuery源文件添加至页面。
  
• 之后再次出现报错。
  

请问如何以非CDN方式将jQuery库或JavaScript库上传至我的页面？盼您协助。

1. 下载官方库文件
   从jQuery官网下载对应版本的压缩（.min.js）或未压缩源文件，建议保存到项目内专门的第三方库目录，比如创建js/libs文件夹统一存放。

2. 放置文件到项目目录
   将下载好的jQuery文件（如jquery-3.7.1.min.js）复制到上述目录，确保文件处于网页可访问的路径范围内。

3. 在HTML中通过script标签引入
   在HTML的<body>标签末尾（推荐，避免阻塞页面加载）添加引入代码，注意路径要与文件实际位置匹配：

   <!-- 示例：jQuery文件放在项目根目录的js文件夹下 -->
   <script src="./js/jquery-3.7.1.min.js"></script>
   

   若网页在子目录中，需调整相对路径，比如子页面在pages文件夹下，路径应为../js/jquery-3.7.1.min.js。

4. 验证加载状态
   在引入代码后添加测试脚本，确认库是否加载成功：

   <script>
     typeof jQuery !== 'undefined' 
       ? console.log('jQuery加载成功') 
       : console.log('jQuery加载失败，请检查路径');
   </script>
   

5. 常见问题排查

   • 路径错误：核对src属性的路径与文件实际位置，Linux服务器环境下需注意大小写区分。
   • 文件损坏：重新从官方渠道下载库文件，避免使用不完整的文件。
   • 重复引入：禁止同时用CDN和本地文件引入同一库，会引发冲突。

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