今天初次使用Bootstrap，安装好所有默认的样式以及JS文件，运行之后发现Chrome控制台报错Uncaught TypeError: Cannot read property 'fn' of undefined
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="css/bootstrap.min.css"><!--加载bootstrap样式--> 9 <link rel="stylesheet" href="css/style.css"><!--加载自定义样式，这个样式需要加载在bootstrap样式的下面--> 10 <script src="js/popper.min.js"></script><!--如果网站有加载经过编译的js则需要加载这个popper文件--> 11 <script src="js/bootstrap.min.js"></script><!--加载bootstrap的JS文件--> 12 <script src="js/jquery-3.3.1.min.js"></script><!--如果网站有加载经过编译的js则需要加载这个JQuery文件--> 13 </head> 14 <body> 15 16 </body> 17 </html>
上面的代码运行之后发现Chrome控制台报错Uncaught TypeError: Cannot read property 'fn' of undefined 如下图：
经过一番尝试发现是JS文件加载的顺序不对，这里我们将jquery-3.3.1.min.js文件加载到bootstrap.min.js文件的前面，就不会报错了！解决方法如下图：
将JQuery文件放在bootstrap.min.js文件前面
1 <script src="js/jquery-3.3.1.min.js"></script><!--如果网站有加载经过编译的js则需要加载这个JQuery文件--> 2 <script src="js/bootstrap.min.js"></script><!--加载bootstrap的JS文件-->