学习JS的第六周

1、数据格式

1、XML

如何使用XMML，其实就是创建一个后缀为.XML的文件

1. 必须写上声明标签：?xml version="1.0" encoding="utf-8"?
2. 必须写上一个根标签，而且只能写一个根标签，而且必须是双标签，只有双标签里面才可以再放其他标签，里面想放什么就放什么

前端依然使用ajax去获取xml

1. 路由：写为"xx.xml"
2. xhr.reponseText换成xhr.responseXML可以使用【核心DOM】去操作需要的东西

2、JSON:JavaScript Object Notation:JS对象表示法，本身就是JS的一部分

作用和XML类似，都是用于当一个配置文件|数据格式 好处：比XML更简洁、更快、更容易解析

1. 哪些属于字符串？
   1. '[1,2,3,4,5]';
   2. '{"key":value,}'
   3. '[{},{},{},{}]'
   4. '{"names":[],"ages":[],"salaries":[]}'
2. 后端把数据库的数据取出来整理为一个JSON字符串：
   1. res.end(JSON.stringify(rs));
   2. echo(JSON.stringify(rs))
3. 前端依然使用Ajax去获取相应到的数据
   1. xhr.reponseText
4. 将JSON字符串解析为一个对象：2个方法：
   1. eval("(" xhr.reponseText ")");
   2. JSON.parse(xhr.reponseText);

3、jQueryUI:基于jQuery(基于JavaScript的框架)

jQuery简化了【核心DOM】 使用jQuery之前，必须先引入:：script src="https://juejin.cn/post/jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script jQuery之中最有魅力的一个方法叫做$或jQuery:工厂函数 作用：

1. 查找元素：$("JQ选择器")，包含了一切CSS选择器，甚至提供了更多新的选择器，可在 www.w3school.com.cn/jquery/jque… 底层：document.querySelectorAll()

2. 创建元素：$(<‘elem属性名="${变量}>${变量}"`>); 底层：document.createElement

3. 可以将DOM转为JQ：只有一个点this和e.target,自动得到的就是一个DOM对象，用不了JQ的API，所以找转：$(DOM)

4. 代替window.onload===>$(callback)

5. 查找元素：

   1. 直接查找:$("JQ选择器")
   2. 通过关系网：前提，要至少先找到一个人才可以使用关系 JQ自带隐式迭代：不需要遍历，可以直接对着集合做操作===> JS不能直接对集合做操作，要么下标拿到某一个，要么遍历拿到每一个次啊可以操作

6. 操作元素： 内容：底层：innerHTML/innerText/value 获取:$("xx").html/text/val();设置：$("xx").html/text/val("新内容");
   属性：底层:getAttribute/setAttribute/removeAttribute 获取：$("xx").attr("属性名");设置：$("xx").attr("属性名","属性值"); 删除：$("xx").removeAttr("属性名"); 样式：

7. 可以操作class

   1. 添加class

      1. 添加class:$("xx").addClass("新class")
      2. 删除class:$("xx").removeClass();//删全部$("xx").removeClass("d2");//只删除d2这个class
      3. 切换class:$("xx").toggleClass("d2");在有没有d2和没有d2之间做切换

   2. 直接操作css:
      设置时依然设置的是内联，因为优先级最高，获取时，不在乎是哪里的样式，只会获取生效的样式：
      获取:$("xx").css("属性名");<br>设置:$("xx").css({属性名:"值",...})

   3. 创建元素&上树
      $("父").append($(<elem 属性名="${变量}">${变量}</elem>));

   4. 删除:
      $("xx").remove();

   5. JQ动画:

      1. 显示:$("xx").show();
      2. 隐藏:$("xx").hide();
      3. 切换:$("xx").toggle();=== show hide
      4. 如果不传参数的话，是为瞬间显示和瞬间隐藏
         如果传入参数:$("xx").toggle("动画名称","时长");一定要搭配jQueryUI,jQueryUI对着三个方法进行了增强

   6. JQ不可以使用以前DOM的语法，DOM也不可以使用JQ的语法，但其实两者age者可以互换
      *DOM->JQ:$(DOM);
      JQ->DOM:jq对象[下标]

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

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

express

需要使用npm下载安装，express简化Node.js

1. 设置监听端口:
   var express=require("express");
   var app=express();
   app.listen(80);
2. 路由：客户端发来的请求中的一部分，判断路由的不同，响应不同的内容
   1. GET方式:
      app.get("路由器",(req,res)=>{
      
      1. req->依然是请求对象，保存着前端传来的请求消息：req.query.键名;（不光可以得到GET表单提交的，还可以得到GET的ajax提交的消息）
      2. 2、res->依然是响应对象，可以向前端发送数据，也可以向前端发送文件
         发送数据：res.send(json字符串);
         发送文件：res.sendFile("文件路径");
         })
   2. POST请求要稍微麻烦一点，尤其是在获取前端传到后端的请求消息，因为post是隐式提交，所以需要某些操作才能看到它:
      app.post("路由",(req,res)=>{
      
      1. req->依然是请求对象，保存着前端传来的请求消息：3步
         1、下载引入一个第三方模块：var bp=require("body-parser");
         2、使用【中间件】的语法：app.use(bp.urlencoded({extended:false}));
         3、req.body.键名;
      2. res->依然是响应对象，可以向前端发送数据，也可以向前端发送文件
         发送数据：res.send(json字符串);
         发送文件：res.sendFile("文件路径");
         })
3. 中间件:其实就是一个函数，但是它也可以访问到req和res两个对象，必须处于【路由之前】
   中间件的功能包括：
   1. 可以执行任何代码
   2. 可以修改请求和响应对象
   3. 可以终止请求
   4. 可以放行到下一个中间件/路由 - 中间件可以写多个

语法：
app.use((rea,res,resolve)=>{
一切想要执行的代码，都可以放
resolve();//放行函数
})

除了可以修改请求消息外，还可以完成两个固定套路:

1. *获取post的隐藏的请求消息：app.use(bp.urlencoded({extended:false}));
2. *内置中间件加载一切静态资源：app.use(express.static("静态资源的文件夹名"))

2、如何简化Ajax:

1. jQuery提供了一个新的ajax方法： $.ajax({
   url:"路由"-必写
   data:"请求消息"-可选
   dateType:"HTML/XML/JSON"-可选，默认值为HTML(普通字符串)，如果写了JSON，衣服就不需要自己再脱了
   type:"GET/POST"-可选，默认值为GET
   success:date=>{
   date->后端响应给你的，拿到数据要干嘛，也必须放在这个回调函数里面
   }
   })

这篇好文章是转载于：学新通技术网