我的JS第六周

吴葱茏
99 阅读2分钟

数据格式

1、XML

面试题：XML、HTML、XHTML、DHTML分别是什么？

HTML-页面：预定义了很多的标签

XHTML：更严格的网页HTML4.01->XHTML->HTML5：
必须加上/

DHTML=D:dynamic：具有动态交互的静态网页，在离线端我们的网页依然具有动态特效，并不是新技术也不是新概念，二而是现有技术的一个整合系统统称：HTML+CSS+JS

XML：配置文件|数据格式：未提供标签，没有提供任何定义的标签：全靠自定义

如何使用XML，其实就是创建了一个.xml的文件

1、必须写上声明标签：

<?xml version="1.0" encoding="utf-8"?>

只有1.0版本

2、必须写上一个根标签，而且必须是双标签，只有双标签里面才可以放其他标签

3、里面随意放

依然使用ajax去获取XML

 1、路由写为："xx.xml"
 2、xhr.resonseText=>xhr.responseXML，使用核心DOM

2、JSON

作用与XML相同，配置文件|数据格式

后端将数据库取出来整理为一个json字符串：res.end(JSON.Stringify(rs))

前端：使用ajax获取：xhr.responseText

将JSON解析为一个对象：

1、eval("("+xhr.resonseText+")")
2、JSON.parse(xhr.responseText)

jQueryUI

基于jQuery的开源网页代码库（插件库）

组件库：组成网页一部分的部件，代码可重用，一般不具备js功能

插件库：跟组件差不多，但是具有js的功能（选项卡，轮播）

使用：

1、jQuery-ui的官网进行下载
2、引入：jquery-ui.css-> jquery.js->jquery-ui.js(以此引入，顺序不可乱)
3、挑选插件
4、修改样式（注意权重）
5、ajax获取数据库的数据，页面渲染
6、页面渲染后去掉API

jQuery

$工厂函数：

1、$("选择器")->查找元素
2、$(`<elem>${}</elem>`)->生成标签
3、$(DOM)->将dom元素转为jQuery对象，因为this和e.taret会被动得到页dom对象，所以转为jQuery对象
4、代替window.onload=>$(callback)

查找元素：

1、直接查找:$("JQ选择器")
2、通过关系网：
    父：parent()
    子：children()
    前一个兄弟：prev()
    后一个兄弟：next()
    其他兄弟:sibling()
    JQ自带隐式迭代，不用遍历，可直接操作

操作元素：

内容：
    获取：$("xx").html/text/val()
    设置:$("xx").html/text/val("新内容")
属性：
    获取：$("xx").attr("属性名")
    设置:$("xx").attr("属性名","属性值")
    删除：$("xx").removeAttr("属性名")
样式：
    1、添加class：$("xx").addClass("新的class")
    2、删除：$("xx").removeClass()//删除所有
            $("xx").removeClass("x")//删x
    3、切换：$("xx").toggleClass("x")//在有x和没有x之间进行切换
 css：只会操作已经生效的样式
     获取:$("xx").css("属性名")
     设置：$("xx").css({属性名:"值"})

JQ动画：

显示：$("xx").show()
隐藏：$("xx").hidden()
切换：$("xx").toggle()
可搭配JQUI：$("xx").toggle("动画名",时长)

绑定事件：$("xx").事件名(callback)

获取下标：$("xx").index();

上树：$("父").append(x)

后端框架：express

1、下载：项目路径打开cmd：npm i express

2、引入express，其为一个函数对象，用于创建服务器，需要设置端口

let express=require("express")
let app=express()
app.listen(80)

3、路由：

1、GET
app.get("路由名",(req,res)=>{
    1、req依旧是请求对象，使用req.query.键名
    2、res为响应对象，可以发送数据和文件
    发数据：res.send()
    发文件：res.sendFile("文件路径")
})
2、POST
app.post("路由",(req,res)=>{
    1、req请求对象：三步
        ①下载引入一个第三方模块：let bp=require("body-parser")
        ②使用中间件：app.use(bp.urlencoded({extended:false}))
        ③：req.body.键名
     2、res为响应对象，可以发送数据和文件
    发数据：res.send()
    发文件：res.sendFile("文件路径")
})

中间件：就是一个函数，必须放在路由之前

功能：

1、执行任何代码
2、修改请求和响应
3、终止请求
4、放行下一个中间件/路由--可写多个中间件
语法：
    app.use((req,res)=>{
        代码
        resolve()//放行函数
    })

套路：1、设置post的隐藏请求

2、内置中间件加载一切的静态资源

app.use(express.static("静态文件夹名"))

如何简化Ajax：

$.ajax({
    url:"路由"--必写
    data:"请求消息"--可选
    dataType:"HTML/XML/JSON"--可选
    type："GET/POST"--可选
    success:data=>{-->必写
        data->后端响应的数据
    }
})
avatar
文章
阅读
粉丝