怎么引入jquery-本地文件与CDN两种实操接入方式

刚入门前端写交互页面的时候，最头疼的就是基础配置问题，当时卡在怎么引入jquery这个基础操作上，连续踩了好几个低级错误，折腾半天跑不通页面交互，最后一点点试错摸清了两种最实用的接入方法。

页面完全没反应。

当时照着零散的入门教程敲代码，想给按钮写一个点击变色的交互效果，想着先把jquery引入页面就能直接调用语法，随手把script引入标签塞进了head标签的最上方，紧接着就写了$选择器的点击事件代码。满心以为刷新页面就能看到效果，结果浏览器控制台直接弹出$未定义的报错，反复核对代码拼写、标点符号、大小写，折腾了二十多分钟，始终找不到问题根源，完全没get到前端页面自上而下加载的核心逻辑，白白浪费了大量时间。

折腾好久才搞明白，jquery脚本必须在页面DOM结构加载完成后执行，放在头部会导致脚本优先加载，此时页面元素还没渲染完毕，后续的jquery代码自然无法识别调用，这是新手最容易犯的核心错误。

之后开始尝试本地文件引入的方式，从官网下载了压缩版的jquery文件，直接放在项目的根目录文件夹里，原本以为只要文件名没错就能正常使用，结果又栽在了路径书写上。当时图省事直接写了绝对路径，本地打开网页一切正常，可把项目打包上传到测试服务器之后，交互功能直接全部失效，排查半天，才发现本地绝对路径在服务器环境下完全不生效，相对路径才是适配所有环境的正确写法，这一点真的是新手极易忽略的细节。

路径细节真的很容易忽略。

后面接触多了慢慢发现，CDN引入是最适合新手和小型demo的方式，不用下载任何文件，不用管理本地资源路径，直接复制公共的稳定CDN链接，把script标签放在body标签的最底部，也就是所有页面元素的后面，保存刷新页面，jquery的所有语法就能直接正常使用，兼容性和稳定性都挺不错的，日常写练习代码完全够用，省去了很多本地文件管理的麻烦。

其实两种引入方式各有适配场景，本地引入适合离线开发、项目打包上线的正式场景，不会依赖外部网络和第三方服务器，稳定性更强；CDN引入适合临时开发、快速调试，省时高效，不用占用项目本地内存。大部分人引入失败，根本不是方法太难，就是栽在了标签位置写错、文件路径错误、CDN链接失效这几个细碎的问题上，完全都是可以规避的低级失误。

那天调试通所有引入方式之后，把正确的两套完整代码单独保存成了模板文件，后续写前端小项目再也没为这个基础问题浪费过时间。