jQuery引入有三种方式:一、通过CDN在head或body底部引入官方地址;二、下载本地文件放入项目目录后用相对路径引入;三、ES模块方式通过type="module"和import加载。均需验证$是否定义及版本号正确。

如果您希望在HTML页面中使用jQuery库,但网页无法正常加载或执行jQuery代码,则可能是由于jQuery未正确引入。以下是将jQuery引入HTML页面的具体步骤:
一、通过CDN引入jQuery
使用内容分发网络(CDN)是最常用且无需下载文件的方式,可直接在HTML的
或底部引入远程jQuery文件。该方式依赖稳定网络连接,加载速度快且支持浏览器缓存。1、在HTML文档的
标签内或标签结束前,添加引入,路径需与实际存放位置一致。4、检查浏览器开发者工具的“Network”选项卡,确认jquery-3.7.1.min.js状态码为200且无404错误。
三、使用模块化方式在现代HTML中引入
在支持ES模块的环境中,可通过type="module"声明脚本为ESM,并使用动态import()或静态import语法加载jQuery(需配合构建工具或本地服务器)。此方式适用于需按需加载或与其他模块系统集成的场景。
1、确保HTML文件通过本地HTTP服务器(如Live Server)而非file://协议打开。
2、在
3、在导入后,通过jq.default或jq.default(…)调用jQuery函数,因ESM默认导出为命名空间对象。
4、验证时在模块脚本中执行console.log(jq.default),输出应为jQuery构造函数。
四、验证jQuery是否正确加载并可用
无论采用何种引入方式,都必须进行运行时验证,避免因路径错误、网络中断或加载时机不当导致后续脚本失败。验证应在DOM就绪后执行,防止操作未生成的元素。
1、在
2、在回调函数内执行$('#nonexistent').length语句,若返回值为0且无ReferenceError,说明jQuery对象已定义且选择器机制工作正常。
3、在控制台中直接输入$().jquery,应返回字符串"3.7.1"(版本号与引入文件一致)。
4、若出现Uncaught ReferenceError: $ is not defined,请立即检查










