Bootstrap 5已彻底弃用jQuery，所有组件基于原生DOM API实现；须改用data-bs-*属性、bootstrap.bundle.min.js，并手动初始化动态元素。
如果您在升级或使用 Bootstrap 5 时发现下拉菜单无法展开、模态框点击无响应、工具提示不显示，且控制台未报错，则极可能是因Bootstrap 5 已彻底弃用 jQuery 依赖，而旧有代码仍残留 jQuery 调用或属性命名未同步更新。以下是针对该事实的客观说明与多角度分析：
一、Bootstrap 5 确实已完全弃用 jQuery
Bootstrap 5 不再将 jQuery 视为运行时依赖，所有 JS 组件（Modal、Dropdown、Tooltip、Collapse、Toast 等）均基于原生 DOM API 和 ES6+ 语法重写。这意味着引入 jQuery 不仅无作用，反而会额外占用内存、延长首屏解析时间。框架强制要求使用 data-bs-* 属性前缀（如 data-bs-toggle="modal"）替代旧版 data-toggle，并必须加载 bootstrap.bundle.min.js（含 Popper）以启用交互功能。
1、检查 HTML 中是否仍存在 data-toggle、data-target 等无 bs 前缀的属性；
2、确认 script 标签中未引入 jquery.min.js 或任何 $() 调用语句；
3、验证浏览器控制台是否存在 ReferenceError: $ is not defined 报错；
4、使用 document.querySelector('[data-bs-toggle="dropdown"]') 测试原生选择器是否能正确获取目标元素。
二、弃用 jQuery 的核心优势
移除 jQuery 后，Bootstrap 5 在执行效率、包体积与现代标准适配方面获得实质性提升。原生 API 避免了 jQuery 的抽象层开销，尤其在低端移动设备上表现更稳定。同时，开发者被引导直接面对 DOM 规范，减少对黑盒封装的依赖，有利于长期维护。
1、首屏 JS 解析时间平均下降 30–50ms（Lighthouse 实测数据）；
2、无需加载约 87KB 的 jquery.min.js，显著降低初始资源体积；
3、组件事件统一基于 CustomEvent 和原生 addEventListener，避免 jQuery 事件系统兼容性陷阱；
4、querySelectorAll + forEach 替代 $.each 强制暴露批量操作逻辑，提升代码可读性与调试效率。
三、弃用 jQuery 带来的实际挑战
对于存量项目或习惯 jQuery 开发模式的团队，迁移过程需主动处理语法断层与行为差异。原生 API 默认不具备 jQuery 的隐式集合遍历、链式调用与跨浏览器兜底能力，部分交互逻辑需手动补全，否则易出现“只作用于首个元素”或“重复绑定事件”等问题。
1、document.querySelector('.btn') 仅返回第一个匹配元素，须改用 querySelectorAll('.btn').forEach()；
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
2、$('.dropdown').addClass('show') 需拆解为多个原生操作：遍历节点、调用 classList.add()；
3、$(document).on('click', '.btn', handler) 需改写为事件委托形式：document.addEventListener('click', e => { if (e.target.matches('.btn')) { handler(e); } })；
4、Bootstrap 5 默认不监听 touchstart，移动端点击响应依赖 pointerdown 或 click，需自行扩展触摸支持逻辑。
四、兼容性与初始化方式变更
Bootstrap 5 的自动初始化机制仅响应符合规范的 data-bs-* 属性，且依赖 DOM 就绪状态。若 JS 在 DOM 构建完成前执行，或通过 innerHTML 动态插入含 data-bs-* 的元素，则组件不会自动激活，必须显式调用 JS API 初始化。
1、确保 script 标签置于 body 底部，或监听 DOMContentLoaded 事件；
2、动态生成的下拉菜单需手动执行 new bootstrap.Dropdown(element)；
3、禁用 defer 属性后未校验执行顺序的 CDN 引入，可能导致 bootstrap.bundle.min.js 先于 DOM 加载；
4、type="module" 可替代 defer 实现可靠执行时序，推荐用于模块化项目。
五、事件与交互行为的关键差异
Bootstrap 5 组件事件不再由 jQuery 触发，而是基于标准 CustomEvent 发布。监听方式必须使用原生 addEventListener，且事件名称统一为小写加连字符格式（如 shown.bs.modal），旧版 on('shown.bs.modal') 写法完全失效。
1、监听模态框显示完成应写作：element.addEventListener('shown.bs.modal', handler)；
2、触发自定义事件需使用 new CustomEvent('my.custom.event', { bubbles: true })；
3、阻止默认行为必须显式调用 e.preventDefault()，无 jQuery 的 return false 语义；
4、事件对象中不再包含 jQuery 封装的 currentTarget 和 delegateTarget，需通过 e.composedPath() 或 e.target.closest() 手动查找上下文元素。
