jQuery升级至3.6版本并移除jQuery UI后进度条功能失效问题求助

问题根源 #

你遇到的$(...).progressbar is not a function报错，本质是因为.progressbar()是jQuery UI专属的方法——旧版本你搭配jQuery 1.5使用了jQuery UI，所以能正常调用；但迁移到jQuery 3.x且移除jQuery UI后，这个方法就不存在了，自然会触发报错。

解决方案：用无依赖的进度条实现（适配jQuery 3.6） #

我们可以用两种方式替代jQuery UI的progressbar，完全脱离UI依赖，同时兼容最新版jQuery：

方式1：使用HTML5原生<progress>标签（最简单）

HTML5原生进度条无需额外依赖，只需要少量样式调整就能匹配旧效果：

完整代码示例

<!-- HTML -->
<div>
  <progress id="progressbar" value="0" max="100"></progress>
  <p>当前进度：<span id="progress-text">0%</span></p>
</div>

<!-- CSS -->
<style>
#progressbar {
  width: 300px;
  height: 20px;
  /* 自定义样式适配旧效果 */
  appearance: none;
}
#progressbar::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 3px;
}
#progressbar::-webkit-progress-value {
  background-color: #007bff;
  border-radius: 3px;
}
/* 兼容Firefox */
#progressbar::-moz-progress-bar {
  background-color: #007bff;
  border-radius: 3px;
}
</style>

<!-- JS（jQuery 3.6） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
  let progress = 0;
  const progressInterval = setInterval(() => {
    progress += 10;
    // 更新原生进度条的值
    $("#progressbar").val(progress);
    $("#progress-text").text(progress + "%");
    
    if (progress >= 100) {
      clearInterval(progressInterval);
    }
  }, 500);
});
</script>

方式2：自定义CSS+JS进度条（完全复刻旧UI效果）

如果需要和旧版本jQuery UI的进度条样式完全一致，可以用自定义div实现：

完整代码示例

<!-- HTML -->
<div>
  <div id="progressbar" class="custom-progress">
    <div class="custom-progress-bar"></div>
  </div>
  <p>当前进度：<span id="progress-text">0%</span></p>
</div>

<!-- CSS -->
<style>
.custom-progress {
  width: 300px;
  height: 20px;
  background-color: #eee;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #ccc;
}
.custom-progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  transition: width 0.3s ease;
}
</style>

<!-- JS（jQuery 3.6） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
  let progress = 0;
  const progressInterval = setInterval(() => {
    progress += 10;
    // 更新自定义进度条的宽度
    $(".custom-progress-bar").width(progress + "%");
    $("#progress-text").text(progress + "%");
    
    if (progress >= 100) {
      clearInterval(progressInterval);
    }
  }, 500);
});
</script>

修改说明 #

1. 移除了所有jQuery UI相关的调用（比如.progressbar()初始化），替换为原生或自定义的进度条逻辑
2. 两种方式都完全兼容jQuery 3.6及以上版本，无需任何额外依赖
3. 样式可以根据你的需求调整，确保和旧效果一致

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