Bootstrap 5删掉jQuery依赖是因为现代浏览器已解决兼容性问题且jQuery维护成本高；超70%用户未使用其插件却需加载87KB文件；组件改用原生API，需手动迁移语法并注意批量操作、事件委托等差异。
Bootstrap 5为什么删掉了jQuery依赖
因为维护成本和现代浏览器能力已经让它成了冗余层。jQuery当年解决的兼容性问题（比如addEventListener不统一、querySelector缺失、事件对象差异）在IE11之后基本消失，而Bootstrap 4末期统计显示，超70%的使用者其实没用到它提供的jQuery插件——却仍得为整个jquery.min.js（约87KB）买单。
实操建议：
- 升级时别只删
jquery.js引用，还要检查所有自定义JS是否调用了$()或.modal('show')这类jQuery语法，它们会直接报ReferenceError: $ is not defined - Bootstrap 5的
Modal、Dropdown等组件改用原生类构造器：用new bootstrap.Modal(...)替代$('#myModal').modal('show') - 如果你项目里还混着大量jQuery DOM操作（比如
$('.btn').on('click', ...)），别硬切——先用document.querySelectorAll('.btn')+.forEach()过渡，再逐步封装成函数
原生JS实现和jQuery写法的关键差异点
不是“换函数名”那么简单，是事件绑定逻辑、DOM查找范围、链式调用习惯全变了。比如$(selector).find('.item').addClass('active')这种链式，在原生里得拆成两步，且没有隐式遍历。
常见错误现象：document.querySelector('.dropdown').classList.add('show')只影响第一个下拉菜单，而jQuery默认批量操作；又或者用addEventListener绑了多次，导致点击一次触发N次。
立即学习“Java免费学习笔记（深入）”；
实操建议：
-
querySelector返回单个元素，要批量操作必须用querySelectorAll+ 循环，或封装一个forEach工具函数 - Bootstrap 5的
data-bs-*属性（如data-bs-toggle="modal"）仍有效，但仅限于自动初始化场景；手动控制必须走JS API，不能靠属性触发方法 - 事件监听推荐用委托：比如
document.addEventListener('click', e => { if (e.target.matches('[data-bs-toggle="collapse"]')) { ... } })，避免重复绑定
哪些jQuery功能在Bootstrap 5里被重写了
不是简单删除，而是用更轻、更可控的方式重实现了核心交互逻辑。比如collapse不再依赖jQuery的animate，转而用CSS transitions + getComputedStyle读高宽；tooltip和popover底层换成了@popperjs/core，和jQuery完全无关。
性能影响明显：移除jQuery后，首屏JS解析时间平均下降30–50ms（基于Lighthouse实测），尤其对低端移动设备更敏感。
实操建议：
- 别自己手写
slideToggle模拟——Bootstrap 5的Collapse类已内置toggle()、show()、hide()，且自动处理height动画和Aria状态 - 如果要用过渡效果，确保元素有
transition: height .35s ease，否则Collapse的show()会瞬间展开 -
Tooltip初始化前必须确保popper.js（或@popperjs/core）已加载，否则控制台报TypeError: Popper is not a constructor
升级时最容易被忽略的细节
不是语法替换完就万事大吉。很多坑藏在边界场景里：比如动态插入的DOM不会自动初始化组件、事件监听器没清理导致内存泄漏、SSR环境下window未定义直接崩掉。
实操建议：
- 动态生成的按钮（如AJAX后追加的
data-bs-toggle="modal"），需手动调用bootstrap.Modal.getOrCreateInstance(el)，否则点击无反应 - 组件实例化后记得保存引用，销毁时调用
instance.dispose()，否则事件监听器残留，尤其在单页应用路由切换时容易引发重复触发 - 服务端渲染（如Next.js、Nuxt）中，所有Bootstrap JS调用必须包裹在
if (typeof window !== 'undefined')里，否则构建时报ReferenceError: window is not defined
原生化不是为了标新立异，是让每个bootstrap.Modal实例都清楚自己管哪块DOM、什么时候该销毁、出错了往哪查——这些事jQuery黑盒里很难看清。
