一篇博客带你实现一个真正的项目！

 先来看看它是什么样式的：

目录：

1、大体步骤練：

        1、创建Maven项目秊

        2、引入依赖秊

        3、创建必要的目录秊

        4、编写代码秊

        5、打包部署（基于SmartTomcat）秊

        6、在浏览器验证秊

 2、具体代码实现練：

        1、V——用户界面，前端部分秊：

        HTML 部分勞：

        CSS 部分勞：

        JS 部分勞： 

1、大体步骤：

        要想自己实现一个Web项目，具体步骤如下：

        1、创建Maven项目

        打开 Idea，创建 new project，在新弹窗的左侧选项中，选择 Maven，点击 next； 

        在新弹窗里写好项目的名称和路径，然后点击 finish，就完成项目创建了。

        2、引入依赖

        现在我们进入了代码编辑界面，开始项目的第二步：引入必需的依赖，包括 servlet、mysql、jackson。 

        先找到自动跳转出来的 pom.xml 文件，文件位置如下：

        在这里填上一段 标签，之后我们引入的依赖代码就会放在这个标签内部。

        打开Maven中央仓库网站：https://mvnrepository.com/  

        在最上方搜索 servlet ，点击第一个搜索结果 Java Servlet API，再在下方的版本号里选择 3.1.0 版本，最后复制下面那串代码到之前的 pom.xml 文件的 dependencies 标签中：

​

​

        mysql 和 jackson 也是一样，先在搜索框搜索 mysql ，点击第一个搜索结果，再找到 5.1.47 版本的，点击之后还是复制那串代码到 dependencies 标签下：

​

​

        在搜索框搜索 jackson ，点击第一个搜索结果，再点击 2.12.6.1 版本，最后复制代码：

​

 ​

         最后引入成功后，就会开始下载依赖，如果你的idea没有显示下载，那么可以自己手动点击刷新下载。

​

        3、创建必要的目录

        当我们成功引入依赖后，就可以开始创建必需的目录：
        1）在 main 目录下创建一个 webapp 目录

        2）在 webapp 目录下创建一个 WEB-INF 目录；注意字母为全大写！

 

         3）在 WEB-INF 目录下创建一个文件，命名为 web.xml ：

         4）最后把下面这串代码复制到 web.xml 文件里：

    Archetype Created Web Application

        4、编写代码

        这里的内容是之后我们需要花大时间编写的代码，这里只是先演示一下看看我们之前的步骤有没有成功，例如我们先写一个 servlet ：

        1）在 main 目录的 java 目录里创建一个类，命名为 HelloServlet：

        2）在 HelloServlet 里填入以下代码：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().write("hello servlet");
    }
}

        5、打包部署（基于SmartTomcat）

        这里的打包部署我们使用 smart Tomcat 来合并完成；smart Tomcat 是一个 idea 的插件，所以如果你是第一次使用，需要先下载下来。

        1）点击左上角的 File > Settings···

         2）点击左侧选项的 Plugins > Markplace > 在搜索框搜索 smart tomcat > 点击 Installed 

> apply > OK 结束！

        3）安装好了以后就可以导入这个插件了！先点击 idea 右侧的 Add Configuration···

        4） 在新弹出的弹窗里点击左上角的 + 号，再找到我们下载好的 smart Tomcat ，点击OK：

         5）在这个smart tomcat 设置界面，需要设置的有三个，name 可以随意设置，自己顺眼就行；Tomcat Server 刚开始是没有的，需要选择自己安装 tomcat 的路径的文件夹；第三个 Context Path 很重要，设置后一定得记住，当然记不住也没关系，之后可以再打开这个界面看看。

         6）设置完之后，界面右上角就会变为下面这样，点击右边的那个绿的小三角就可以启动 tomcat 服务器了，点击后会出现一大堆红色代码，不懂担心，就这样的：

        6、在浏览器验证

        当我们成功启动服务器后，就可以在浏览器里验证以下，看看我们之前所做的准备有没有错误或Bug：

        1）在浏览器输入这串地址：127.0.0.1:8080/blog_system/hello ，注意，第一个斜杠和第二个斜杠之间的是我们之前在smart tomcat 里设置的 context path ，第二个斜杠后面的是 HelloServlet上面设置的 servlet path ，当页面出现 “hello servlet” 时，就说明前置准备已经完毕了：

 2、具体代码实现：

        这个项目我们使用前后端分离的方式，使用MVC模式，所以我们在代码实现时也分为M、V、C这三部分。

        1、V——用户界面，前端部分：

        前端部分主要分为三个板块：html、css 和 javascript 。

        HTML 部分：

        在真正写代码之前呢，我们需要在 webapp 目录下创建一个 image 文件夹，里面存放三张图片，可以是 jpg 格式，也可以是png 格式， 第一张图片命名为“系统头像”，这个是在系统导航栏最左侧显示的一个小头像；第二张命名为“用户头像”，这个是登录进页面显示的当前用户头像；第三张命名为“背景”，这个图片是你的博客系统的整个背景图片。上面三张你都可以选择你喜欢的，就像我下面那张图片一样。

        1）博客列表页：

        在 webapp 下创建一个新的文件，命名为 blog_list.html ，并输入以下代码：

    
    
    
    
    
    


    
    
        
        我的博客系统
        
        
        主页
        写博客
        退出
    

    
    
        
        
            
                
                
                github 地址
                
                    文章
                    分类
                
                
                    2
                    1
                
            
        
        
        
            
            
        
    

    
    

    
    

    

        2）博客详情页：

        在 webapp 目录下创建一个文件，命名为 blog_detail.html ：

    
    
    
    
    
    

    
    
    
    
    


    
    
        
        我的博客系统
        
        
        主页
        写博客
        退出
    

    
    
        
        
            
                
                夏开开
                github 地址
                
                    文章
                    分类
                
                
                    2
                    1
                
            
        
        
        
            
            
                
                
                
                
                
                
                
            
        
    


    

        3）博客编辑页：

        在编写博客编辑页之前需要导入editor.md 这个 api ，这个可以自己自行下载，也可以在文章最后进入我的码云下载，里面也有整套代码。

        在 webapp 目录下创建一个文件，命名为 blog_edit.html ：

    
    
    
    
    
    

    
    
    
    
    


    
    
        
        我的博客系统
        
        
        主页
        写博客
        退出
    
    
    
    
        

            
                
                
                
            
            
            
                
                
            
        
    

    

        4）博客登录页：

        在 webapp 目录下创建一个文件，命名为 blog_login.html ：

    
    
    
    
    
    


    
    
        
        我的博客系统
        
        
        主页
        写博客
        
        
    

    
        
        

            
                登录
                
                    用户名:
                    
                
                
                    密码:
                    
                
                
                    
                    
                
            
        
    

        CSS 部分：

        这部分代码可以直接在webapp 目录里写，也可以先创建一个 css 目录，在这个目录里写，我选择的是在创建一个 css 目录：

        1）博客通用样式：

        创建一个文件，命名为 common.css ：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,body{
    height: 100%;
}

body{
    
    background-image: url(../image/粉红猪猪背景.jpeg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.nav{
    
    width: 100%;
     
    height: 50px;
    
    background-color: rgba(51, 51, 51, 0.5);
    
    color: white;
    
    display: flex;
    
    align-items: center;
}


.nav img{
    width: 40px;
    height: 40px;
    
    border-radius: 50%;
    
    margin-left: 30px;
    
    margin-right: 10px;
}

.nav .spacer{
    
    width: 78%;
}


.nav a{
    color: white;
    
    text-decoration: none;
    
    padding: 0 10px;
}



.container{
    
    width: 1000px;
    
    height: calc(100% - 50px);

    
    margin: 0 auto;

    
    display: flex;
    
    justify-content: space-between;
}

.container .left{
    height: 100%;
    width: 200px;
}

.container .right{
    height: 100%;
    width: 790px;

    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;

    
    overflow: auto;
}


.card{
    
    background-color: rgba(255, 255, 255, 0.8);
    
    border-radius: 10px;
    
    padding: 30px;
}

.card img{
    width: 140px;
    height: 140px;
    
    border-radius: 50%;
}

.card h3{
    text-align: center;
    padding: 10px;
}

.card a{
    
    display: block;
    text-align: center;
    text-decoration: none;
    color: grey;
    padding: 10px;
}

.card .counter{
    display: flex;
    justify-content: space-around;
    padding: 5px;
}

        2）博客列表页样式：

        创建一个文件，命名为 blog_list.css ：

.blog{
    width: 100%;
    padding: 20px;
}

.blog .title{
    
    text-align: center;
    
    font-size: 22px;
    
    font-weight: bold;
    padding: 10px;
}

.blog .date{
    text-align: center;
    color: rgb(189, 8, 77);
    
    padding: 10px 0;
}

.blog .desc{
    
    text-indent: 2em;
}

.blog a{
    
    display: block;
    width: 140px;
    height: 40px;
    
    margin: 13px auto;
    
    border: 2px rgb(238, 87, 87) solid;
    border-radius: 20px;

    
    color: rgb(238, 87, 87);
    
    line-height: 40px;
    
    text-align: center;
    
    text-decoration: none;

    
    transition: all 1s;
}

.blog a:hover{
    background-color: tomato;
    color: white;
}

        3）博客详情页样式：

        创建一个文件，命名为 blog_detail.css ：

.blog-content{
    padding: 30px;
}

.blog-content h3{
    
    text-align: center;
}

.blog-content .date{
    text-align: center;
    color: rgb(189, 8, 77);
    
    padding: 20px 0;
}

.blog-content p{
    
    text-indent: 2em;
    padding: 10px 0;
}

        4）博客编辑页样式：

        创建一个文件，命名为 blog_edit.css ：

.blog-edit-container{
    width: 1000px;
    height: calc(100% - 50px);
    
    margin: 0 auto;
}

.blog-edit-container .title{
    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-edit-container .title #title{
    width: 900px;
    height: 40px;

    border-radius: 10px;
    border: none;
    outline: none;

    font-size: 22px;
    line-height: 40px;
    padding-left: 10px;

    background-color: rgba(255, 255, 255, 0.8);
}

.blog-edit-container .title #submit{
    width: 95px;
    height: 40px;
    
    color: white;
    background-color: rgb(231, 76, 89);

    border-radius: 10px;
    border: none;
    outline: none;
}

.blog-edit-container .title #submit:active{
    background-color: rgb(201, 11, 4);
}

#editor{
    border-radius: 10px;
    
    opacity: 90%;
}

        5）博客登录页样式：

        创建一个文件，命名为 blog_login.css ：

.login-container{
    width: 100%;
    height: calc(100% - 50px);

    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}

.login-dialog{
    width: 400px;
    height: 350px;

    background-color: rgba(255, 255, 255, 0.9);
    
    border-radius: 10px;
}

.login-dialog h3{
    text-align: center;
    padding: 50px;
}

.login-dialog .row{
    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.login-dialog .row span{
    
    display: block;
    width: 100px;
    font-weight: 700;
}


#username,#password{
    width: 200px;
    height: 40px;
    
    font-size: 22px;
    
    line-height: 40px;
    
    padding-left: 10px;

    border-radius: 10px;
    
    
    
    outline: none;
}

.row #submit{
    width: 300px;
    height: 50px;
    
    margin-top: 45px;

    border-radius: 10px;
    border: none;
    outline: none;

    color: white;
    background-color: rgb(212, 53, 67);

    font-size: 15px;
}

.row #submit:active{
    background-color: rgb(184, 45, 10);
}

        JS 部分： 

        js 部分也是一样，可以选择创建一个子目录，也可以不创建直接生产文件，这里我们只需要创建两个文件，

        1）创建一个文件，命名为 common.js ：

// 这里放置一些检测登录状态的公共代码：

//加上一个逻辑，通过GET /login 这个接口来获取当前的登陆状态：
function getUserInfo(pageName){
    $.ajax({
        type: 'get',
        url: 'login',
        success: function(body){
            // 判定此处的body是不是一个有效的user对象（userId 是否为非0）
            if(body.userId && body.userId > 0){
                // 此时登陆成功，不做处理
                console.log('当前登陆成功！用户名：'+body.username);

                // 根据当前用户登录的情况，把用户名设置到html页面上：
                if(pageName == 'blog_list.html'){
                   changeUserName(body.username);
                }
            }else{
                // 登录失败：
                // 让前端页面跳转到login.html
                alert('当前尚未登录，请登录后再访问！')
                location.assign('blog_login.html');
            }
        },
        error: function(){
            alert('当前尚未登录，请登录后再访问！')
            location.assign('blog_login.html');
        }
    });
}

function changeUserName(username){
    let h3 = document.querySelector('.card>h3');
    h3.innerHTML = username;
}

        2）创建一个文件，命名为 jquery.min.js ：

!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\("+M+"*(even|odd|(([+-]|)(\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\d+)|))"+M+"*\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\("+M+"*((?:-\d)?\d*)"+M+"*\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^hd$/i,K=/^[^{]+{s*[native w/,Z=/^(?:#([w-]+)|(w+)|.([w-]+))$/,ee=/[+~]/,te=new RegExp("\\[\da-fA-F]{1,6}"+M+"?|\\([^\r\n\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([-x1fx7f]|^-?d)|^-$|[^-x1fx7f-uFFFFw-]/g,ie=function(e,t){return t?""===e?"ufffd":e.slice(0,-1)+"\"+e.charCodeAt(e.length-1).toString(16)+" ":"\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|"")"),e.querySelectorAll("[selected]").length||v.push("\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\["+M+"*name"+M+"*="+M+"*(?:''|"")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\f"),v.push("[\r\n\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:x20trnf]*)[x20trnf]*/?>(?:|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;ex",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"",""],col:[2,"",""],tr:[2,"",""],td:[3,"",""],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d
",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1 
        这一篇博客先写到这里，因为实在太长了，可以点进我的主页，还有第二篇哦！