JQuery、express、简化ajax

45 阅读1分钟

一、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").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>