### (6)集成JQuery、Bootstrap **集成jquery** [jquery 下载地址](https://jquery.com/download/) index.jsp 头部增加获取项目根目录(获取当前上下文) ```html <%String path = request.getContextPath();%> ``` 然后在body中增加以下js ```javascript <script type="text/javascript" src="<%=path %>/static/lib/jquery/jquery-3.5.1.min.js"></script> <script type="text/javascript"> $(function() { alert(1111); }); </script> ``` 没有报错Uncaught ReferenceError: $ is not defined,则表示集成成功 **集成Bootstrap** [Bootstrap 下载地址]([https://v3.bootcss.com/](https://v3.bootcss.com/)) 增加css样式文件 ```css <link rel="stylesheet" href="<%=path %>/static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"> ``` 增加js文件 ```javascript <script type="text/javascript" src="<%=path %>/static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> ``` **完整文件示例** ```html <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%String path = request.getContextPath();%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>首页</title> <link rel="stylesheet" href="<%=path %>/static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <button>这是原生的按钮</button> <button type="button" class="btn btn-success">Bootstrap Success</button> <script type="text/javascript" src="<%=path %>/static/lib/jquery/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="<%=path %>/static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function() { alert(1111); }); </script> </body> </html> ```