解决“jQuery 未定义”错误

已发表: 2024-03-27

“jQuery 未定义”错误是 Web 开发中常见的障碍，尤其是对于那些刚刚将 jQuery（一种广泛使用的 JavaScript 库）集成到网页中的人来说。当 JavaScript 代码在加载库之前或根本没有加载库时尝试使用 jQuery 语法或函数时，浏览器控制台中会弹出此错误消息。本质上，这是浏览器的一种表达方式：“我不知道 jQuery 是什么”，这会导致任何与 jQuery 相关的脚本执行立即停止。

错误的变化

“jQuery 未定义”错误可能以多种方式出现，具体取决于浏览器、环境（如开发环境与生产服务器）或脚本包含在网页中的方式。此错误消息的一些常见变体包括：

jQuery 未定义
$ 未定义
未捕获的引用错误：$ 未定义
未捕获的 ReferenceError：jQuery 未定义
ReferenceError：jQuery 未定义
参考错误：$ 未定义
类型错误：$(…)。不是一个函数
类型错误：jQuery(…)。不是一个函数

理解 WordPress 中的“jQuery 未定义”

在 WordPress 生态系统中，主题和插件广泛使用 jQuery 来添加交互性并增强用户体验。也许您正在使用的插件旨在利用 jQuery 的功能（滑块、弹出窗口、表单验证等）。当浏览器报告“jQuery 未定义”时，它本质上意味着您站点的 JavaScript 正在尝试在 jQuery 本身加载之前调用 jQuery 函数，或者根本没有加载。

WordPress 中出现此错误的常见原因

WordPress 特有的几种情况可能会导致此错误，包括：

主题和插件：主题或插件不正确地排队 jQuery，或依赖于过时的版本，可能会导致此问题。

手动编辑：对主题文件进行自定义编辑，特别是如果手动取消注册 jQuery 或不正确地排队，可能会导致此错误。

冲突：有时，安装多个插件并尝试加载各自版本的 jQuery 可能会导致冲突，进而导致错误。

此错误的一般原因

脚本顺序不正确：最常见的原因是您的 HTML 页面在加载之前尝试使用 jQuery。依赖 jQuery 的脚本必须放置在 jQuery 库的<script>标记之后。

未能包含 jQuery ：仅仅忘记在网页上包含 jQuery 就可能导致此错误。确保您有一个可以正确获取 jQuery 库的<script>标记。

冲突的库：有时，其他 JavaScript 库或脚本可能与 jQuery 冲突，特别是当它们也使用$符号时。这可能会无意中导致 jQuery 被覆盖或未正确初始化。

缓存问题：在某些情况下，您的浏览器可能会缓存不包含 jQuery 的旧版网页，或者 jQuery 的路径可能不正确，从而导致加载库失败。

内容分发网络 (CDN) 问题：如果您从 CDN 加载 jQuery，并且 CDN 已关闭或无法访问，您的站点将无法加载该库，从而导致此错误。

如何修复 jQuery 未定义错误

在进行任何更改之前，确保拥有完整的网站备份至关重要。如果您有权访问临时或开发环境，则可以使用该环境来修复错误并绕过实时站点上直接编辑的任何潜在中断。

有了这些保护措施，您就可以解决“jQuery 未定义”错误了。

通过测试脚本源来验证 jQuery 是否已加载

此问题背后的一个常见原因是，虽然可能包含 jQuery，但由于各种原因（例如不正确的 URL、网络问题或文件访问权限），它未正确加载。要验证 jQuery 是否正确加载，一种简单而有效的方法是直接在浏览器中测试脚本源。

测试 jQuery 脚本源的步骤

首先，您需要在 HTML 代码中找到包含 jQuery 的脚本标记。这个标签至关重要，因为它指定了应该加载 jQuery 的源。在代码中查找如下所示的行：

 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

此src属性包含您尝试加载的 jQuery 库的 URL。
从script 标记的src属性中提取 URL 。这是指向您网站上包含的 jQuery 文件的直接链接。确保准确复制整个 URL，包括开头的http://或https://部分。
在网络浏览器中打开一个新选项卡或窗口，并将复制的 URL 粘贴到地址栏中。按 Enter 键导航至此 URL。

如果 jQuery 文件正确加载，您将在浏览器中看到 jQuery 库的全部内容以纯文本形式显示。这表明 jQuery 脚本源可以访问并且可以按预期运行。

验证 jQuery 加载的替代方法

如何通过页面源验证 jQuery 加载

使用查看页面源代码来搜索 jQuery 加载。

使用您喜欢的网络浏览器导航到您要检查的网页。
右键单击网页上的任意位置，然后从上下文菜单中选择“查看页面源” 。 此选项在浏览器之间可能略有不同。
打开源代码后，您现在需要找到 jQuery 脚本包含项。通过使用浏览器内置的搜索功能可以轻松完成此操作：
在 Windows 上按Ctrl+F或在 Mac 上按 Command+F打开搜索栏。
在搜索字段中输入jquery ，然后按 Enter。 此操作将突出显示源代码中所有出现的 jquery。
在突出显示的结果中查找类似于链接到 jQuery 库的脚本标记的行。

它可能看起来像这样：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

或者对于本地托管的 jQuery，如下所示：

 <script src="/path/to/jquery.min.js"></script>

如果您找到这样一行，则 jQuery 已包含在您的页面中。如果没有，jQuery 可能无法加载，这可能会导致您遇到的问题。

使用开发者工具验证 jQuery 加载

使用开发人员工具确定 jQuery 加载。

访问您的网站并在浏览器中打开开发人员工具。通常可以通过右键单击页面并选择“检查”或按F12或Ctrl+Shift+I (Windows) /Cmd+Option+I(Mac) 来完成此操作。
在开发人员工具中，找到并单击“网络”选项卡。 此选项卡显示您的网站在加载时发出的所有网络请求。
选中“禁用缓存”选项，然后在“网络”选项卡打开的情况下重新加载您的网站以捕获所有加载活动。
使用过滤器选项将结果范围缩小到 JavaScript 文件。通常，您可以通过选择JS过滤器或在过滤器/搜索框中键入jquery来完成此操作。
滚动浏览正在加载的脚本列表或使用“网络”选项卡中的搜索功能来查找与 jQuery 相关的条目。您正在查找名称中包含jquery 的文件，表明正在加载 jQuery 库。

确保 jQuery 正确包含在 WordPress 中

如果您发现 jQuery 未加载，或者尽管存在 jQuery，但您遇到问题，您可能需要确保它已正确包含在您的 WordPress 主题或插件中。 WordPress 通过wp_enqueue_script函数提供了一种强大的方法来管理脚本。 此方法是首选方法，因为它可以有效处理脚本依赖性并有助于避免冲突。

在 WordPress 中将 jQuery 入队

使用 FTP 客户端或托管服务提供的文件管理器连接到您的 WordPress 站点。
导航到主题的文件夹并找到functions.php文件。 建议创建一个子主题并在其中进行更改，以避免在主题更新时丢失自定义内容。
如果缺少 jQuery，您可以通过将以下代码片段添加到您的functions.php文件中将其排入队列：

 函数 my_theme_enqueue_scripts() {

 wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

这可确保 WordPress 在您网站的所有页面上包含 jQuery。

如果您要添加依赖于 jQuery 的自定义脚本，请确保将 jQuery 列为依赖项，如下所示：

 wp_enqueue_script( '自定义脚本', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true );

使用 Google 托管的 jQuery 实施本地回退

在您的网站中包含 Google 托管的 jQuery 版本是利用 Google 的 CDN 快速可靠地交付这一流行 JavaScript 库的常见做法。然而，为了确保您的网站保持稳健，应对潜在的 CDN 中断或网络问题，实施本地后备至关重要。如果由于任何原因 Google 托管的版本无法加载，此设置允许您的网站自动使用本地托管的 jQuery 版本。此方法通过优化性能同时确保冗余来遵循 Web 开发最佳实践。以下是有效实施该策略的分步指南。

包括 Google 托管的 jQuery

首先，您需要将 Google 托管的 jQuery 脚本标记添加到您的网站。将此标记放置在HTML 文档的<head>部分中或位于结束</body>标记之前，以确保依赖于 jQuery 的其他脚本可以使用它。 例如：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

添加本地后备脚本

紧接着 Google 托管的 jQuery 的脚本标记，您将添加一小段 JavaScript。该脚本检查 jQuery 是否已从 Google CDN 成功加载。如果没有，它会动态地将新的脚本标记写入 HTML 文档以从本地源加载 jQuery。

 <脚本>

 window.jQuery || document.write('<script src="/path/to/local/jquery-3.5.1.min.js"><\/script>');

</脚本>

确保将“/path/to/local/jquery-3.5.1.min.js”替换为服务器上托管的 jQuery 文件的正确路径。

理解代码

window.jQuery ：这部分脚本检查 jQuery 对象是否全局可用，这表明 jQuery 已成功加载。

document.write ：此方法用于将 HTML 插入到文档中。此处用于在未加载 CDN 版本的情况下为本地 jQuery 文件添加脚本标记。转义序列<\/script>用于防止字符串被解释为脚本块的结尾。

了解回退机制

回退机制基于一个简单的检查：window.jQuery 。如果未定义 jQuery 对象，则意味着 CDN 版本未正确加载。然后使用document.write方法注入一个新的<script>标签，该标签从本地文件加载 jQuery。

好处

确保 jQuery 始终可用，即使 CDN 发生故障也是如此。
在本地加载 jQuery 可以减少某些场景下的延迟，特别是在 CDN 版本响应缓慢或用户网络连接 CDN 出现问题的情况下。
拥有本地副本可以让您控制正在使用的 jQuery 版本，从而实现一致的测试和调试。

将代码片段添加到 wp-config.php 文件

当您尝试了各种方法来解决 WordPress 中的“jQuery 未定义”错误或类似 JavaScript 问题但没有成功时，禁用脚本串联可能是一个有用的故障排除步骤。脚本串联是 WordPress 的一项功能，它将多个 JavaScript 文件组合成一个请求，以缩短加载时间。但是，这有时会导致错误或导致脚本加载问题，特别是在存在冲突或特定脚本未正确加载的情况下。

编辑 wp-config.php 文件

使用 FTP 客户端或 Web 托管控制面板提供的文件管理器来访问 WordPress 站点的文件。

在文本编辑器中打开wp-config.php文件。如果您使用的是 FTP 客户端，则需要先下载文件，使用计算机上的文本编辑器将其打开，然后编辑后将其上传回来。如果您在网络托管控制面板中使用文件管理器，通常可以直接在浏览器中编辑文件。

滚动到文件底部，就在/* That's all, stop edit!行之前快乐的博客。*/ .在这里，粘贴以下代码片段：

 /** WordPress 目录的绝对路径。 */

 if ( !define('ABSPATH') )

 定义（'ABSPATH'，目录名（__FILE__）。'/'）;

 定义('CONCATENATE_SCRIPTS', false);

添加代码片段后，保存更改。如果您在计算机上本地编辑文件，请确保将其上传回服务器，替换现有的wp-config.php 。

理解片段

ABSPATH 定义：此行确保正确定义 WordPress 目录的绝对路径，这是 WordPress 正确运行的基本要求。

禁用串联：“define('CONCATENATE_SCRIPTS', false);”行明确告诉 WordPress 不要链接脚本。这可以通过单独加载每个脚本来帮助调试脚本问题，从而更容易地识别哪个脚本可能导致问题。

手动添加 jQuery 库

直接在 WordPress 主题的header.php文件中手动包含 jQuery 库是一种简单的方法，特别是当解决 jQuery 相关问题的其他方法未成功时。 此方法可确保 jQuery 在页面渲染过程的早期加载，从而降低“jQuery 未定义”错误的风险。

如何手动包含 jQuery 库

转至Google 托管库页面以访问最新版本的 jQuery。
找到页面上列出的最新版本的 jQuery，然后复制提供的脚本标记。时间
使用 FTP 客户端或托管服务提供的文件管理器来访问 WordPress 站点的文件。
在 WordPress 目录中，转到wp-content/themes/your-theme-folder/并找到header.php文件。 将your-theme-folder替换为主题的实际名称。
在文本编辑器中打开header.php文件。 如果您通过网络托管控制面板使用文件管理器，则可以直接在浏览器中编辑文件。

通过 FTP 客户端访问主题文件夹中的 php 头文件。

将您从 Google 托管库复制的 jQuery 脚本标记粘贴到header.php文件中的开始<head>标记之后。 将其放置在 head 部分顶部附近可确保 jQuery 尽早加载，并且可供任何依赖它的脚本使用。

例如，

 <头>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <!-- 下面是您的其他头部内容 -->

添加 script 标签后，保存header.php文件。 如果您在计算机上本地编辑了该文件，请不要忘记将其上传回服务器，以替换该文件的旧版本。

重要考虑因素

子主题：如果您直接更改主题，则最佳做法是使用子主题。 这可以防止您的更改在更新父主题时被覆盖。

测试您的网站：手动添加 jQuery 后，彻底测试您的网站，以确保脚本按预期运行并且不存在兼容性问题。

结束语

在我们的博客中，我们浏览了各种解决方案来解决“jQuery 未定义”错误，强调确保 jQuery 在网站上正确加载和实现的重要性。我们介绍了通过页面源代码检查和浏览器的“网络”选项卡来验证 jQuery 的存在，并讨论了通过 Google 托管的 jQuery 并辅以本地回退来增强站点可靠性。此外，我们还探索了高级 WordPress 故障排除技术，例如在wp-config.php文件中禁用脚本串联以及手动将 jQuery 添加到主题的header.php文件中。自始至终，重点都放在谨慎的编辑实践上，包括使用暂存环境和子主题进行安全修改，以维护网站功能和用户体验。

利用 AI 加速您的 WordPress 网站创建

使用 10Web AI Website Builder，创建适合您业务需求的自定义 WordPress 网站，速度提高 10 倍。

生成您的网站

无需信用卡