一、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;
- 父:$("JQ的选择器").parent()
- 子:$("JQ的选择器").children()
- 前一个兄弟:$("JQ的选择器").prev();
- 后一个兄弟:$("JQ的选择器").next();
- 其他兄弟:$("JQ的选择器").siblings();
- 创建元素:$("<标签></标签>"); 等同 document.createElement;
- 可以将DOM转为JQ:$(DOM对象),底层用到了一个人:重载:arguments - 可以通过判断用户传入的实参的不同执行不同的操作。
- 代替window.onload -> $(callback);
2.2 JQ的遍历:
$("一堆人").each((i,val)=>{
elem->选择器找到的每一个元素
})
2.3 JQ的样式的操作:
- 操作class:
- 添加:$("JQ的选择器").addClass("新class");
- 删除:$("JQ的选择器").removeClass();
- 切换:$("JQ的选择器").toggleClass("d2"); - 在有d2和没有d2之间进行切换
- 操作内联样式:
- 获取:$("JQ的选择器").css("css属性名")
- 设置:$("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").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两个对象,处于路由之前 。
- 中间件的功能包括:
- 可以执行任何代码
- 可以修改请求和响应对象
- 可以终止请求
- 可以放行你到下一个中间件/路由 - 中间件可以写多个
- 语法:
app.use((req,res,resolve)=>{
一切你想要执行的代码,中间件代码
resolve();//放行的函数
})
- 固定套路:
- 获取post的请求消息,见上面 - app.use(bp.urlencoded({extended:false}))
- 内置中间件加载一切静态资源: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>