Spectrum颜色选择器无法使用：$(...).spectrum不是函数错误

出现这个错误的核心原因是Spectrum插件未成功挂载到jQuery对象上，以下是具体排查和解决方法：

1. 严格保证资源加载顺序 #

必须先加载jQuery，再加载Spectrum的JS文件，且初始化代码要放在所有依赖和DOM元素之后。如果jQuery在Spectrum之后加载，或者初始化代码提前执行，都会导致找不到spectrum方法。

2. 验证jQuery版本兼容性 #

你当前使用的jQuery 2.2.0版本较老，可能与spectrum-colorpicker2存在兼容性问题。建议升级到jQuery 3.x稳定版本（比如3.6.0），新版本对现代浏览器支持更好，也能适配更多插件。

3. 检查Spectrum资源是否加载成功 #

打开浏览器开发者工具（F12）的「Network」面板，刷新页面后查看spectrum.min.js和spectrum.min.css的请求状态：

• 如果返回404，说明CDN链接失效，可更换为官方推荐的CDN地址
• 如果加载超时，检查网络连接或尝试更换CDN源

4. 确保初始化代码在DOM就绪后执行 #

虽然你已经使用了$(function(){...})包裹初始化代码，但要确保这段代码是在Spectrum脚本加载完成之后，不能放在Spectrum的<script>标签之前。

修正后的完整代码示例 #

<!-- 优先加载jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 加载Spectrum样式和脚本 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css">
<script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script>

<!-- 目标DOM元素 -->
<input type="text" maxlength="6" size="6" id="colorSelector" value="00ff00" />

<!-- 初始化插件 -->
<script>
$(function() {
  $("#colorSelector").spectrum({
    type: "component",
    showPalette: false,
    showInput: true,
    showInitial: true,
    showButtons: false
  });
});
</script>

额外排查点 #

如果页面中使用了jQuery.noConflict()解除了$的别名，需要调整初始化代码：

jQuery(function($) {
  // 这里可以正常使用$
  $("#colorSelector").spectrum({
    // 配置项
  });
});

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