一、JQueryUI

基于jQuery的开源网页用户界面代码库 - 提供了HTML、CSS、JS的一个插件库。

1.1 如何使用jQueryUI：

• 下载jQueryUI：
• 必须在页面上进行引入： - 顺序不能错，一定要先引入jquery.js再引入jquery-ui.js。

<link rel="stylesheet" type="text/css" href="jquery-ui-1.13.2.custom/jquery-ui.css"/>
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js" type="text/javascript" charset="utf-8"></script>

• 挑选出你需要的/喜欢的插件，直接梭到你的项目中
• 根据设计图，来修改样式 - 修改不成功，只有一个可能：权重不够
• 使用ajax去获取数据库中的数据，来进行页面渲染

二、jQuery

2.1 $的作用：

• 查找元素：$("css选择器"); 等同 document.querySelectorAll；
  1. 父：$("JQ的选择器").parent()
  2. 子：$("JQ的选择器").children()
  3. 前一个兄弟：$("JQ的选择器").prev();
  4. 后一个兄弟：$("JQ的选择器").next();
  5. 其他兄弟：$("JQ的选择器").siblings();
• 创建元素：$("<标签></标签>"); 等同 document.createElement；
• 可以将DOM转为JQ：$(DOM对象)，底层用到了一个人：重载：arguments - 可以通过判断用户传入的实参的不同执行不同的操作。
• 代替window.onload -> $(callback);

2.2 JQ的遍历：

$("一堆人").each((i,val)=>{
    elem->选择器找到的每一个元素
})

2.3 JQ的样式的操作：

• 操作class：
  1. 添加：$("JQ的选择器").addClass("新class");
  2. 删除：$("JQ的选择器").removeClass();
  3. 切换：$("JQ的选择器").toggleClass("d2"); - 在有d2和没有d2之间进行切换
• 操作内联样式：
  1. 获取：$("JQ的选择器").css("css属性名")
  2. 设置：$("JQ的选择器").css("css属性名","css属性值");
• 设置多个样式：

$("xx").css({
        css属性名:"css属性值",
        ...
});

2.4 JQ操作属性：

• 获取：$("xx").attr("属性名");
• 设置：$("xx").attr("属性名","属性值");

2.5 操作内容:

• 获取：$("JQ的选择器").html/text/val()
• 设置：$("JQ的选择器").html/text/val("新内容")

2.6 JQ上树：

• 父亲.append(儿子)

2.7 JQ动画：

• 显示 : $("xx").show();
• 隐藏 : $("xx").hide();
• 切换 : $("xx").toggle();如果不传参数，是瞬间显示，瞬间隐藏，可以传入实参：$("xx").api("动画名称",时长);

2.8 删除元素：

• $("JQ的选择器").remove()

2.9 绑定事件：

• $("JQ的选择器").事件名(callback)

JQ不可以用以前DOM的语法，DOM也不可以用JQ的语法，但是两者其实可以互换

三、express

Node.js的第三方框架：express，需要使用npm去下载它，express中有两个核心概念

3.1 下载：在你的项目路径下打开cmd：npm i express

3.2 引入后发现express是一个函数，创建服务器应用，还要设置监听端口！

var express=require("express");
var app=express();
app.listen(端口号);

3.3 路由

客户端发来的请求中的一部分，也称呼叫做相对路径，通过判断路由的不同响应不同的内容。

• get方法

app.get("路由",(req,res)=>{
    //req和res不是以前的req和res，用法会与原生Node有所不同
    //req->依然是请求对象，保存着前端传来的请求消息：req.query.键名;
    //res->依然是响应对象，可以为前端发数据，也可以为前端发页面：
    //发数据：res.send("想要发的东西");
    //发文件：res.sendFile("文件的路径");
})

• post方法

app.post("路由",(req,res)=>{
//req和res不是以前的req和res，用法会与原生Node有所不同
//req->依然是请求对象，保存着前端传来的请求消息：3步
        //需要引入一个第三方模块（中间件的语法）：var bp=require("body-parser")
        //使用中间件的语法：app.use(bp.urlencoded({extended:false}))
        //req.body.键名;
//res->依然是响应对象，可以为前端发数据，也可以为前端发页面：
        //发数据：res.send("想要发的东西");
        //发文件：res.sendFile("文件的路径");
})

3.4 中间件

express本身就是一个功能极简的框架，完全路由和中间件两部分构成，中间件其实就是一个函数，但是它也可以访问req和res两个对象，处于路由之前 。

• 中间件的功能包括：
  1. 可以执行任何代码
  2. 可以修改请求和响应对象
  3. 可以终止请求
  4. 可以放行你到下一个中间件/路由 - 中间件可以写多个
• 语法：

app.use((req,res,resolve)=>{
        一切你想要执行的代码，中间件代码
        resolve();//放行的函数
})

• 固定套路：
  1. 获取post的请求消息，见上面 - app.use(bp.urlencoded({extended:false}))
  2. 内置中间件加载一切静态资源：app.use(express.static("静态资源的文件夹名"));

四、简化ajax

4.1 jQuery提供了一个新的ajax：

$.ajax({
        url:"路由", - 必写
        data:"请求消息", - 可选
        dataType:"HTML/XML/JSON", - 可选，默认值为HTML，如果你写了JSON，则可以省略JSON.parse方法
        type:"GET/POST", - 可选，默认值为GET
        success:(data)=>{ - 必写
                data->后端响应的内容，你不需要再写xhr.responseText
        }
})

4.2 自己封装一个

<script>
    function $() {

    }

    $.ajax = function ({ type = "GET", url, data = "", success, dataType = "JSON" }) {
        var xhr = new XMLHttpRequest();

        if (type == "GET") {
            xhr.open(type, url + "?" + data);
            xhr.send(null);
        } else {
            xhr.open(type, url);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }

        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (dataType == "HTML") {
                    success(xhr.responseText)
                } else if (dataType == "XML") {
                    success(xhr.responseXML)
                } else if (dataType == "JSON") {
                    success(JSON.parse(xhr.responseText))
                }
            }
        }
    }
</script>