数据格式：
1、XML格式：
1、面试题：HTML、XHTML、DHTML、XML分别是什么？
HTML - 网页
XHTML - 更严格的网页
DHTML - 动态的网页：并不是新技术、也不是新概念，只是现有技术的整合统称，可以让我们的网页在离线版也具有动态效果
DHTML = HTML + CSS + JS
XML - 配置文件|数据格式：淘汰了，现在最流行的数据格式：JSON - javascript Object notation
2、如何使用XML：
1、创建文件xx.xml
2、声明文档：<?xml version='1.0' encoding='utf-8'?>
version - 版本：1.0 和 1.1，但是只有人使用1.0，1.1版本无人使用（垃圾），以后也不用在学习了，不会再有新版本：淘汰了
encoding - 编码格式：在中国编码始终utf-8
必须出现在第1行第1列
3、必须写上一个根标签：而且这个根标签只能有一个（双标签），没有任何的预定义标签的，所有的都需要你自定义
4、里面，你随意，想放什么标签就放什么标签
5、恭喜你学完了
6、打开必须用服务器端方式打开
前端：依然使用ajax去获取xml
1、url - "xx.xml";
2、xhr.responseXML; - 获取到的xml文件，可以使用核心DOM进行解析处理拿到你想要的部分
核心DOM：无敌的，既可以操作HTML又可以操作XML，只不过API比较繁琐
开发中：正常来说后端会想办法将数据库的数据整理为一个XML格式 - 但是现在绝对不可能遇到了（淘汰了）
被淘汰的原因：解析数据非常恶心，核心DOM的语法本来就又臭又长
2、JSON格式：JavaScript Object Notation：js对象表示法，本身就是js的一部分 - JSON字符串 作用：类似于XML - 数据格式 好处：比XML 更快、更简洁、更容易解析 - 一个优秀的数据格式：能极大的提成我们程序员的开发效率
1、认识一下哪些属于JSON字符串：后端把数据库的数据取出来整理为一个JSON字符串
1、'[1,2,3,4,5]';
2、'{"key":value}';
3、'[{},{},{},{}]';
4、'{"names":[],"ages":[],"salaries":[]}';
2、PHP如何将数据变为JSON字符串 - 穿衣服
echo JSON_encode($arr); - PHP的方法
JSON.stringify(data); - Node.js方法：历史上第一次出现一门语言可以通吃前后端
3、前端依然使用ajax获取数据：
xhr.responseText;//json字符串
把JSON字符串转为一个JSON对象 - 脱衣服：2种
var json对象=eval("("+json字符串+")");
*var json对象=JSON.parse(json字符串);
、展望：jQuery框架 + Bootstrap组件库 + Node.js + 小东西（gulp/git/svn） - 除了Node.js其余东西都非常的简单，量比较大
要求：1、习惯使用帮助文档|百度 - 能不记就不记忆 2、代码速度要提升了，多背单词 - 每分钟200下键盘
2、jQuery框架概念： jQuery类库其实就是一个.js文件 在三大框架（vue（中国人自己搞得一个框架）、react、angular）出现之前，曾经全球最火的 在三大框架（vue（中国人自己搞得一个框架）、react、angular）出现之前，曾经全球第二火的：prototype.js ...多不胜数，15年的时候代老湿统计过一次，8000+类库，导致了一个问题，永远学不完，所以我们以某个一个库为例，学习类库的特点（简化JS - 尤其简化DOM操作）
3、jQuery类库：有10000多行代码，为我们带来了一个叫做jQuery对象（属性和方法） 版本：1.xx - 兼容老IE的同时，还做了向上兼容（新版本带来的API - 1.xx也可以使用） 2.xx - 2开始就不再支持老IE了 3.xx 目的：方便程序员开发js，简化js（1、简化核心DOM操作 2、简化了绑定事件 3、简化了ajax - 没有简化ES、BOM 4、带来了新功能）
4、面试题：为什么有的人称呼jQuery叫做框架，又有的人称呼jQuery叫做类库？ 因为大部分人不知道jQuery其实是由4部分组成的： *1、jQuery.js - 专门简化js开发的，大部分人也只知道它 *2、jQuery.ui.js - 专门针对UI开发 - 哪怕没有设计师，我们做出的网页也不至于太丑（HTML/CSS/JS） - 太老了样式太丑了 3、jQuery.mobile.js - 专门针对移动端开发的，现在有更棒的混合开发框架：uniapp 4、Qunit - 专门给测试人员（英文好）用于测试js代码的软件
今日目标：简化DOM
5、如何使用jQuery： 1、固定步骤： 1、在HTML页面引入jQuery.js文件 2、*使用jQuery提供的选择器去获取元素 3、*使用jQuery提供的API去操作元素
2、jQuery提供了一个工厂函数（很重要的，可以干很多事情/操作的一个函数）
语法：*$() 或 jQuery();
*作用：
1、查找元素：$("jQuery选择器") - 支持一切的css选择器，但是在css选择器的基础上还加上了更多的选择器，所以叫jQuery选择器
千万不要记忆：习惯使用帮助文档：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
注意：1、封装底层代码：document.querySelectorAll(),只不过提供的更加的丰富
2、*找到的元素已经不再是DOM集合/对象，应该叫做jQuery集合/对象
2、转换：
问题：jQuery和DOM对象只能使用自己的方法，不能使用别人的方法
1、JQ -> DOM：绝对不用，不会把简单变成复杂的，也千万不要对jq集合进行for循环
$("xx")[下标]
2、*DOM -> JQ：有用，this,【target】->自动出来是一个DOM对象，用不了JQ的API
$(DOM对象)
3、jQuery的特性：
1、隐式迭代 - 不用/千万不要去循环遍历，自带循环功能，千万不要加下标
2、链式操作 - 找到一个元素后可以不断的连续的.操作它
6、通过 关系 找到元素：前提：至少要找到一个元素才能使用关系 父：("xx").children(); 前一个兄弟：("xx").next(); *其他兄弟：$("xx").siblings(); - 除了自己以外的其他兄弟，原生javascript没有的操作
7、操作元素 *内容： *1、("xx").html(); 设置：$("xx").html("新内容");
2、$("xx").text() - 类似于原生JS中innerText，不可以识别标签
获取：$("xx").text();
设置：$("xx").text("新文本");
*3、$("xx").val() - 类似于原生JS中value，单独为input准备
获取：$("xx").val();
设置：$("xx").val("新值");
*属性：
$("xx").attr(); - 类似于原生JS中getAttribute/setAttribute，也可以操作自定义属性
获取：$("xx").attr("属性名");
设置：$("xx").attr("属性名","属性值");
删除：$("xx").removeAttr("属性名");
*样式：
1、jQuery新提供的可以单独操作class属性来控制样式：
追加class：$("xx").addClass("新class");//追加并不是替换
删除class：$("xx").removeClass();//特殊：不传参数，删全部
传入参数，删指定
切换class：$("xx").toggleClass("d2");//在有d2和没有d2之间进行切换
2、直接操作样式：
获取：$("xx").css("属性名");//牛逼：不管你是内联还是内部还是外部样式表，只获取到当前生效的样式
设置：$("xx").css({//设置的依然是内联样式，一次可以修改多个样式
"属性名":"属性值",
...
});
8、*创建元素并且渲染页面 创建元素：工厂函数的第三个功能： var 新元素={变量}'>${内容}</标签名>`);
上树：4种
*$("父元素").append(新元素);//当儿子，最后一个儿子
$("父元素").prepend(新元素);//当儿子，第一个儿子
$("兄弟").before(新元素);//当兄弟，上一个
$("兄弟").after(新元素);//当兄弟，下一个
如果你希望创建元素后立刻上树：
$("父元素").append($(`<标签名 class='${变量}'>${内容}</标签名>`))
9、*删除元素：$("xx").remove();
10、克隆元素：就是复制元素，看似很屌，实则没用 - 垃圾 $("xx").clone();
今天学完了：DOM操作
总结：工厂函数：目前一共可以做3个功能：
1、查找元素：$("选择器");
2、DOM->JQ：$(DOM对象);
3、创建元素：$("<><>");
底层原理：重载：arguments，通过判断我们传入的实参的不同执行不同的操作
1、JQ事件：
绑定事件：$("xx").事件名(callback) - 里面支持e
1、回忆目前我们学过的事件有哪些？
click/dblclick/change/mouseover|mouseenter(没有冒泡)/mouseout|mouseleave(没有冒泡)/mousemove/load/focus/blur/input/submit/resize/mousedown/mouseup/readystatechange/keydown
2、面试题：原生JS中window.onload事件 和 JQ提供的$(document).ready(callback) 有什么区别？
1、window.onload：需要等待所有的资源（HTML、CSS、JS、图片、视频、音频）加载完毕才会执行，执行效率可以说是最低最后，一个页面只能使用一次
2、$(document).ready(callback)：仅仅只会等待HTML加载完毕就执行，效率较高，而且一个页面可以使用多个
简写：1、$(document).ready(callback)
2、$().ready(callback)
3、$(callback) - 工厂函数的第4个功能
3、新事件：
1、*****滚动监听事件：
作用：
1、做出更多的特效
2、滚动监听+ajax：滚动加载新内容（等我们搭配上jQuery版本的ajax在学习）
语法：
$(window/document).scroll(()=>{
1、获取滚动条当前的位置
$(window).scrollTop()
2、获取xx在什么位置：只管你距离页面顶部/左边有多远
$("xx").offset().top/left;
})
2、JQ动画：JQ提供了预定义动画和自定义动画 - JS没有的 1、预定义动画：3组9个API 1、隐藏和显示： 隐藏：("xx").show(time,callback) 特殊：1、如果没有传递任何（time）实参时，是不具有动画的，瞬间显示和瞬间隐藏，以后就不要自己再写display:none/block; 2、如果传递了实参（time），具有动画：同时修改宽度高度和透明度 3、回调函数：动画执行完毕后才会执行的操作 - 以后你的动画完毕后想要干什么就必须放到这个回调函数里面 4、如果你希望一会儿显示，一会儿隐藏，没有必要自己写if判断：$("xx").toggle(time,callback)===show+hide;
2、滑动效果（卷帘门）
隐藏：$("xx").slideUp(time,callback)
显示：$("xx").slideDown(time,callback)
特殊：1、如果没有传递任何（time）实参时，也具有动画的，只不过速度很快
2、如果传递了实参（time），具有动画：同时修改高度
3、回调函数：动画执行完毕后才会执行的操作 - 以后你的动画完毕后想要干什么就必须放到这个回调函数里面
4、如果你希望一会儿显示，一会儿隐藏，没有必要自己写if判断：$("xx").slideToggle(time,callback)
3、淡入淡出：
隐藏：$("xx").fadeOut(time,callback)
显示：$("xx").fadeIn(time,callback)
特殊：1、如果没有传递任何（time）实参时，也具有动画的，只不过速度很快
2、如果传递了实参（time），具有动画：同时修改透明度
3、回调函数：动画执行完毕后才会执行的操作 - 以后你的动画完毕后想要干什么就必须放到这个回调函数里面
4、如果你希望一会儿显示，一会儿隐藏，没有必要自己写if判断：$("xx").fadeToggle(time,callback)
2、自定义动画：
1、并发动画：所有的操作一起执行
$("xx").animate({
"css属性名":"css属性值",
...
},time,callback)
2、排队动画
$("xx").animate({
"css属性名":"css属性值",
},time,callback).animate({
"css属性名":"css属性值",
},time,callback).animate({
"css属性名":"css属性值",
},time,callback).animate({
"css属性名":"css属性值",
},time,callback)
特殊：1、animate不支持颜色相关的和transform转换相关的操作，解决：
1、不用animate，用css代替，但是你就失去了回调函数
2、等我们明天学习了jQueryUI，jQueryUI对animate进行了增强操作
2、只要是动画就一定会有排队的可能，有的情况要记得停止动画：
$("xx").stop().animate()
1、jQueryUI：基于Jquery的开源网页用户界面代码库 - 提供了HTML、CSS、JS的一个插件库（放着很多很多的插件）
组件库：组件：组成网站一部分的部件，代码重用，一般不具备js的
插件库：跟组件差不多，但是带有js效果的
如何使用jQueryUI：
1、下载jQueryUI - 不需要你做
2、在页面上引入：- js的引入顺序千万不能乱，因为jQueryUI是基于jQuery的
<link rel="stylesheet" type="text/css" href="jquery-ui-1.13.0.custom/jquery-ui.css"/>
<script src="jquery-ui-1.13.0.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-1.13.0.custom/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
3、官方文档的demo中挑选你需要的/喜欢的插件，直接梭到你的项目中
4、根据UI提供的给你的设计图，修改样式 - 如果你修改不成功，只有一个可能：权重不够
5、利用ajax去获取数据库中的数据，来进行数据渲染
6、千万别忘了调用jQueryUI提供的xx方法实现效果
个人比较推荐的JQUI的插件：
1、选项卡/标签页/tabs
2、菜单/menus
3、手风琴/折叠面板
4、自动完成/模糊查询
5、特效进行了增强：toggle("特效名称",time,callback)===show+hide加强了
6、增强了animate：现在支持颜色操作了，但是依然不支持transform转换
7、交互留给你们自己尝试
2、日期选择器：layDate.js - 简单，漂亮，但是已经下架了，原属于layUI.js，由于白嫖过多，赞助太少，下架了 学会看文档
3、万能的插件库： 1、jQuery插件库 - 无敌了，任何特效都能找到，但是要收费（每天一个账号可以白嫖2次） 2、jQuery之家 - 就是jQuery插件库的另一个网站，是免费的，而且不需要登录账号
