1、使用前端页面前的准备工作

获取JSTL标准标签库

QQ图片20200722212415.png

导入BootStrap模板

QQ图片20200722212703.png

最后一步就是在标签末尾导入两个JQuery资源

QQ图片20200722212930.png

总结：以后使用前端页面的模板代码如下

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
  4. <!DOCTYPE html>
  5. <html lang="zh-CN">
  6. <head>
  7.     <meta charset="utf-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1">
  10.     <title>页面的标题</title>
  11.     <link href="css/bootstrap.min.css" rel="stylesheet">
  12.     <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
  13.     <script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
  14. </head>
  15. <body>
  19. <script src="js/jquery-3.2.1.min.js"></script>
  20. <script src="js/bootstrap.min.js"></script>
  21. </body>
  22. </html>

2、AJAX请求是基于JQuery的！所以使用AJAX请求之前一定要记得导入JQuery资源！别忘了！

QQ图片20200722112251.png

3、只有JS对象才有src属性，要用JQuery对象[0]或者JQuery.get(0)的方式将JQuery对象转换为JS对象

QQ图片20200722113010.png

4、绑定单击事件发送AJAX请求的按钮的类型一定得是button，而不能是submit，submit作为HTML提交表单的一种方式，它会刷新页面导致AJAX渲染到前端的数据一闪而过！

QQ图片20200722164311.png

5、想让一个按钮居中？把按钮用div括起来，然后设置div的style为text-align: center就可以啦

QQ图片20200722210901.png

6、想使用JQuery点击一个按钮然后跳转到另一个页面？使用window.location.href = “URL”; 就可以祝您圆梦！

QQ图片20200722211926.png

7、以后什么登录按钮、注册按钮、返回按钮，所有的按钮都按下面的格式来：

<input type="button" value="按钮名字">

之后要加什么奇奇怪怪的BootStrap样式再去加！

8、打开一个新的网页

window.open("URL");

9、span标签是使用来组合文档中的行内元素，比如想在一个分页组件后面写上一段文字：共几页，几条数据之类的文字，就得用span标签，如果用div标签就会使这些元素在分页组件的下面！

10、在一个JSP页面中带值跳转到另一个JSP页面时的取值方法(获取URL路径的参数信息)

方法一：此方法无法解决中文乱码问题（不用这个，用下面那个）

//传值方式
window.location.href = "managerModifyArticle.jsp?id=666";
//在另一个JSP页面获取值的方式
<script>
         function getQuery(name,url){
              var reg = new RegExp('(^|\\?|&)'+name+'=([^&]*|$)'), 
                  url = url.replace(/&/g, '&'),
                  r = url.match(reg);
              return  r === null ? null : unescape(r[2]);
           }
          var web_url = window.location.href;

          /**成功获取*/
          var id = getQuery('id',web_url);
</script>

方法二：此方法完美解决中文乱码问题(以后都用这个)

<script>
    function getUrlParamCN(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = decodeURI(window.location.search).substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
</script>

例子：

/**获取从userHomePage.jsp带过来的文章id和用户id*/
        function getUrlParamCN(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = decodeURI(window.location.search).substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
        var articleId = getUrlParamCN("articleId");
        var userId = getUrlParamCN("userId");

        /**一跳转到这个页面，就发送AJAX请求，根据文章id查询文章并回显到该页面上*/
        $(function () {
            $.post("${pageContext.request.contextPath}/findArticleByIdServlet",{"id":articleId},function (data) {
                //回显文章信息
                $("#title").html(data.title);
                $("#author").html(data.author);
                $("#content").html(data.content);
            },"json");
        });

11、取消鼠标被点击之后的焦点状态

//说实话，还挺有用！
$("#id").blur();

12、使用图片时，应该把图片的包放在蓝圈 web 下

image.png

13、添加边框

div设置外边框相关如下：
border-color:#000设置4边边框颜色为黑色；
border-color:+颜色值，即可设置对象边框颜色；
border-left-color:#000 设置左边框颜色为黑色；
border-right-color:#000 设置右边框颜色为黑色；
border-top-color:#000 设置上边框颜色为黑色；
border-bottom-color:#000 设置下边框颜色为黑色；
条件：必须设置对象边框存在，设置边框宽度必须大于或等于1px，边框颜色才会显示并有存在意义。
.divcss5{ border-style:solid; border-width:1px; border-color:#000}
这样就设置对象边框为实线边框，参数就是solid，边框宽度（厚度）为1px，边框颜色为黑色，这样设置边框颜色才会生效。