学习JS的第六周

二十二536
111 阅读2分钟

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="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属性名="(<`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(); 设置：("xx").html/text/val("新内容");
    属性：底层:getAttribute/setAttribute/removeAttribute 获取：("xx").attr("属性名");设置：("xx").attr("属性名"); 设置：("xx").attr("属性名","属性值"); 删除：$("xx").removeAttr("属性名"); 样式：

  7. 可以操作class

    1. 添加class

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

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

    3. 创建元素&上树
      ("父").append(("父").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->后端响应给你的，拿到数据要干嘛，也必须放在这个回调函数里面
    }
    })
avatar
文章
阅读
粉丝