2022.5.05
1、XML数据格式 - 被JSON数据格式完美代替
面试题：HTML、XHTML、DHTML、XML分别是什么？
HTML - 网页
XHTML - 更严格的网页
DHTML - 具有动态效果的静态网页：并不是新技术、新概念，只是现有技术的一个整合统称：HTML+CSS+JS(dom)
XML - 配置文件|数据格式
如何使用：
1、创建xx.xml文件
2、设置文档声明：<?xml version="1.0" encoding="utf-8"?>
version：版本号：目前有1.0和1.1版本，但是1.1版本无人使用，所以1.0版本可以说是唯一版本，而且以后也不会再更新了
encoding：设置编码格式
特殊：必须出现在第一行第一列
3、创建一个根标签，必须是一个双标签（才可以包裹更多的东西），而且【根标签只能有一个】
4、剩下的你随意：
标签名你随意
数据你随意
单双标签你随意
XML不会有任何样式，目的是保存数据的一种格式，恭喜你学完了
前端依然使用ajax去获取数据，唯独：xhr.responseText; 换成 xhr.reponseXML，
不需要脱衣服，得到的数据可以当做DOM来处理（你学的核心DOM可以操作一切结构化文档HTML和XML）
核心DOM最大的缺点：API比较繁琐
2、*JSON数据格式 - 现在最流行，最火爆的数据格式：会js的人天生就会
JSON概述：JavaScript Object Notation：js对象表示法，跟XML类似，都是用来做数据格式
优点：更简洁、更快、更容易解析：
1、哪些属于JSON数据（json字符串）：
'[1,2,3,4,5]';
'{"name":"代老湿"}'
'[{},{},{},{}]'
'{"names":[],"ages":[],"salaries":[]}'
PHP怎么穿衣服：
echo JSON_encode($arr);
2、前端如何去获取呢？
依然使用ajax，上午的xhr.responseXML其实根本不重要，因为XML已经被淘汰了，重要反而是以前的xhr.responseText;
如何去脱衣服呢？
1、如果你使用eval，问题：外层是一个{}，会报错！
解决：eval("("+jsonTxt+")"); - 脱衣服万无一失
2、 JSON.parse(jsonTxt);
3、其实js也可以穿衣服：JSON.stringify(jsonTxt); - 注意，我们前端一定只需要脱衣服，绝对不会穿，到时候我们还要学一个后端语言叫做node.js：也要负责穿衣服：JSON.stringify(jsonObj)
3、*客户端存储技术：
主流：1、cookie：几乎被淘汰了，传输大小有限2kb，需要设置生命周期最多30天
2、*webStorage：大小有限8mb，可以永久保存，缺点：H5的一个新概念，不支持老IE
3、url的查询字符串部分
作用：1、皮肤
2、记住密码
3、数据可以跳多页面传输
介绍：webStorage由两部分组成：
1、localStorage：本地级：永久存在
2、sessionStorage：会话级：一旦关闭浏览器，数据就死亡了
他们俩不用创建，但是底层其实就是一个对象而已
如何：
保存：xxxxStorage.属性名=值; === xxxStorage.setItem("键名","值")
获取：xxxxStorage.属性名 === xxxStorage.getItem("键名")
清空：xxxxStorage.clear();
删除：xxxxStorage.removeItem("属性名");
1、jQuery有人称呼是一个框架，也有人称呼是一个js库：
06年诞生的一个框架，爆火：易用
目的：简化js开发（DOM、事件、AJAX） - 带了很多很多新的属性和方法，但是一定都比以前简单
是三大框架（vue、react、angular）出现之前全球最火的一个框架
是三大框架（vue、react、angular）出现之前全球第二火的一个框架：prototype.js
16年统计8000以上 - 我们不可能学完所有的库，只能通过某个库来了解库的特点（简化DOM）
2、jQuery版本：
1.xx - 做了向上兼容，新版本的新特性也可以用得到，而且支持老IE
2.xx - 从2.xx版本开始，就不再支持老IE了
3.xx
3、为什么有人称呼是一个框架，也有人称呼是一个js库（js文件）：
大部分人只知道jQuery只有jQuery：其实由4部分组成
1、*jQuery.js - 简化客户端js开发
2、*jQuery.ui.js - 简化UI的：没有设计图，我们做出来的样式也不会太丑（提供HTML/CSS/JS）：我们就复制然后修改 - bootstrap
3、jQuery.mobile.js - 移动端：打包APP的框架，混合开发框架：uniapp
4、Qunit - 测试人员测试js代码
4、如何使用
1、使用步骤：
1、引入jQuery.js文件
2、学习他的jQuery选择器去获取元素 - 以前我们用的是DOM获取元素
3、学习他的jQueryAPI去操作元素
2、jQuery工厂函数：$() 或者 jQuery();
作用：
1、*查找元素：$("jQuery选择器") 或者 jQuery("jQuery选择器");
jQuery选择器是在css选择器的基础上添加了更多的选择器，一切的css选择器jQuery都可以使用
新的选择器：不需要记忆：
www.w3school.com.cn/jquery/jque…
特殊：
1、返回值：和以前不一样：返回的是一个jQuery集合：不允许使用一切的DOM操作，只能使用jQuery API
jQuery集合只能用jQuery自己的API
DOM集合只能用以前DOM的API
但是两者可以相互转换
2、特点：JQ集合
1、隐式迭代：悄悄遍历，不需要我们手动遍历
2、支持链式操作 - 连.操作
2、jQuery和DOM可以相互转换：
jQuery->DOM：不会把简单的变成复杂的
$("xx")[下标] - 千万不要去遍历，只要一旦搭配下标，你就没必要学jQuery了，回去用DOM吧
*DOM->jQuery：$(dom元素) - this和e.target出来自动都是一个dom元素
3、*通过 关系 获取元素：前提：先找到一个jq集合
父：$("xx").parent();
子：$("xx").children();
前一个兄弟：$("xx").prev();
后一个兄弟：$("xx").next();
其余兄弟：$("xx").siblings(); - 屌爆了，清除再也不用遍历全部元素了，可以找到除了自己的兄弟
4、操作元素：
1、*内容
$("xx").html() - 完全等效于DOM中的innerHTML
获取：$("xx").html()
设置：$("xx").html("新内容")
$("xx").text() - 完全等效于DOM中的innerText
获取：$("xx").text()
设置：$("xx").text("新文本")
$("xx").val() - 完全等效于DOM中的innerText
获取：$("xx").text()
设置：$("xx").text("新文本")
2、*属性：
$("xx").attr() - 完全等效于DOM中的getAttribute/setAttribute
获取属性值：$("xx").attr("属性名");
设置属性值：$("xx").attr("属性名","属性值");
删除属性：$("xx").removeAttr("属性名");
提供了js没有的东西：专门操作class准备的
追加class：$("xx").addClass("class名");
删除class：$("xx").removeClass("class名"); - 只删除这个class
$("xx").removeClass(); - 清空所有class
切换class：$("xx").toggleClass("class名"); - 有此class和没有此class之间做切换
3、*样式：
获取：$("xx").css("属性名"); - 一次只能获取一个属性值，不管你的样式在哪里只管当前生效的样式
设置：$("xx").css({
属性名:"属性值",
...
});
4、*创建元素&渲染页面
工厂函数的第三个作用：var 新=$(`<elem class='${变量}'>${变量}</elem>`)
原理：重载：同一个函数名，根据传入的实参的不同，可以选择不同的操作执行：arguments
渲染页面&上树：
当儿子：
*$("父").append(新);
$("父").prepend(新);
当兄弟：
$("兄").after(新);
$("兄").before(新);
5、*删除元素：$("elem").remove();
6、克隆元素：$("elem").clone(true); - 复制元素，复制出来的元素也具有js功能
