Bootstrap 5 报 TypeError: $ is not a function 是因彻底移除 jQuery 依赖，需删除 jQuery 引入、改用原生 API 初始化组件（如 new bootstrap.Modal()）、动态元素需手动初始化，并用 CSS transition 替代 jQuery 动画。
Bootstrap 5 报 TypeError: $ is not a function 怎么办
因为 Bootstrap 5 彻底删掉了 jQuery 依赖，所有 JS 组件（Modal、Dropdown、Toast 等）都重写为原生 DOM API + ES6+ 类。只要代码里还留着 $().modal('show') 或 $('.dropdown').dropdown()，浏览器就直接报这个错。
实操建议：
- 删掉项目中所有
jquery.min.js或jquery.slim.js的引入（除非其他插件强依赖） - 确保 Bootstrap 5 的 JS 文件（如
bootstrap.bundle.min.js）已正确加载，且在你的自定义脚本之前执行 - 把旧写法逐个替换：比如
$('#myModal').modal('show')→new bootstrap.Modal(document.getElementById('myModal')).show() - 注意全局对象名是
bootstrap（小写），不是Bootstrap或BS
data-bs-toggle 还能用吗？为什么动态插入的 HTML 不生效
能用，但只对「页面加载时已存在的元素」自动初始化。Bootstrap 5 启动时会扫描 DOM，匹配 data-bs-toggle="modal" 这类属性并调用对应构造器 —— 这个过程只跑一次。
常见错误现象：
- 用
innerHTML或insertAdjacentHTML动态加了个带data-bs-toggle="dropdown"的按钮，点不动 - Vue/React 渲染后组件没反应，控制台也没报错
原因很简单：Bootstrap 不监听 DOM 变化，也不会劫持 innerHTML。它不提供 MutationObserver 自动补救。
实操建议：
- 动态插入后，手动初始化：例如
const dropdownEl = document.querySelector('.my-dynamic-dropdown'); new bootstrap.Dropdown(dropdownEl); - 避免混用：不要一边写
data-bs-toggle，一边又new bootstrap.Dropdown(...)，否则事件监听可能重复绑定 - 确认元素存在再初始化：
if (dropdownEl) { new bootstrap.Dropdown(dropdownEl); }
原生 JS 替代 jQuery 的关键操作有哪些
不是简单改函数名，而是整套交互范式变了。核心替换点集中在 DOM 查询、事件绑定、类名操作和动画触发上。
常见对比与注意事项：
-
$('.btn')→document.querySelectorAll('.btn')（返回 NodeList，不是数组，需[...]展开或用forEach） -
$(el).on('click', handler)→el.addEventListener('click', handler)（注意：事件目标是元素本身，不是 jQuery 对象） -
$(el).addClass('active')→el.classList.add('active')（classList是原生 API，支持toggle/replace） - 动画不再靠
.fadeIn()，而是靠 CSS transition + 切换类，比如el.classList.add('fade-in')配合.fade-in { opacity: 1; transition: opacity .15s; }
性能影响：原生操作更快，内存占用更低，但需要自己处理 IE 兼容性（Bootstrap 5 已不支持 IE）。
为什么 CSS 动画 + transition 能替代 jQuery 的 fadeIn/slideToggle
因为 Bootstrap 5 的所有过渡效果（模态框淡入、下拉菜单展开、提示框滑出）全部基于 CSS transition 和 @keyframes 实现，JS 只负责添加/移除类，不操纵内联样式或定时器。
这样做的好处：
- 硬件加速更稳定（尤其是 opacity、transform）
- JS 主线程不卡顿，动画帧率更可靠
- 可被浏览器 DevTools 的「Animations」面板直接调试
容易踩的坑：
- 忘记给元素设初始状态：比如
.fade类默认opacity: 0，但若没写transition: opacity .15s，就不会有淡入效果 - 用
display: none配合transition无效 —— display 不支持过渡，得用visibility+opacity或max-height - 手动调用
modal.show()后，如果 CSS 中.modal.fade .modal-dialog缺少transition，动画就变成硬切
最常被忽略的一点：Bootstrap 5 的动画类（如 .fade、.show）必须和对应结构配合使用，单独加类不会触发完整行为 —— 它们只是 CSS 钩子，背后依赖 JS 控制类的增删时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
