一、XML数据格式：
1、面试题：HTML、XHTML、DHTML、XML分别是什么？
HTML - 网页（预定义标签）
XHTML - 更严格的网页
DHTML - 动态效果的网页：并不是新技术，只是统称：HTML+CSS+JS(dom)
XML - 配置文件|数据格式 - 现在几乎没人使用，因为最流行的是JSON - 未知的标签语言（没有任何一个预定义的标签，所有标签都需要你自定义）
2、如何使用：
1、创建后缀名.xml的文件
2、声明头部：
<?xml version='1.0' encoding='utf-8'?>
version：版本只能用1.0，还有1.1，但是1.1版本几乎无人使用，所以1.0是目前唯一的版本，而且以后都不用学习新的了
encoding：设置中文编码
3、创建一个根标签：必须是双标签，只能有一个 - 标签名你随意
4、里面想放什么标签，你随意
5、打开查看：apache打开，依然使用服务器端方式进行访问
6、前端依然使用ajax获取xml数据：
不同点：
1、url->"xx.xml";
2、xhr.reponseText->xhr.responseXML;
var xhr=new XMLHttpRequest();
xhr.open("GET","01我们的第一个xml文件.xml");
xhr.send(null);
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
var dom=xhr.responseXML;//返回的dom我们可以使用核心DOM进行解析数据
}
}
XML缺点：解析数据过于繁琐
1、以后根本不会见到
2、以后就算见到也不会是一个xml文件
案例：根据xml数据渲染表格
<?xml version='1.0' encoding='utf-8'?>
<datetable>
<people>
<name>小明</name>
<age>18</age>
<salary>3500</salary>
</people>
<people>
<name>小红</name>
<age>19</age>
<salary>4500</salary>
</people>
<people>
<name>小兰</name>
<age>17</age>
<salary>1500</salary>
</people>
</datetable>
<body id="bd">
<script type="text/javascript">
var xhr=new XMLHttpRequest();
xhr.open("GET","02根据我提供的xml渲染表格.xml");
xhr.send(null);
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
var dom=xhr.responseXML;
var table=document.createElement("table");
var arr=["姓名","年龄","工资"];
var tr=document.createElement("tr");
arr.forEach(str=>{
var td=document.createElement("td");
td.innerHTML=str;
tr.appendChild(td);
})
table.appendChild(tr);
var peoples=dom.getElementsByTagName("people");
for(var i=0;i<peoples.length;i++){
var tr=document.createElement("tr");
var people=peoples[i].children;
for(var j=0;j<people.length;j++){
var td=document.createElement("td");
td.innerHTML=people[j].innerHTML;
tr.appendChild(td);
}
table.appendChild(tr);
}
bd.appendChild(table);
}
}
</script>
</body>
二、JSON数据格式：Javascript Object Notation：js对象表示法
作用：数据格式 - 文本数据
比XML更简洁，更快，更容易解析\
1、认识【JSON字符串】：
1、'[1,2,3,4,5]';
2、'{"name":"王小明"}';
3、'[{},{},{},{}]';
4、'{"names":[姓名1,姓名2,...],"age":[年龄1,年龄2,...]}'
2、服务器端如何将数据变为JSON字符串：
PHP：echo JSON_encode($arr);
Node：JSON.stringify(arr);
3、前端如何将JSON字符串拿到变为JSON对象：
1、eval("("+json字符串+")");
2、JSON.parse(json字符串);
案例：根据json数据渲染表格
<?php
echo '{
"h52106": {
"people": [
{
"name": "小明",
"age": "18",
"salary": "3500"
},
{
"name": "小红",
"age": "19",
"salary": "4500"
},
{
"name": "小兰",
"age": "17",
"salary": "1500"
}
]
}
}';
?>
<body id="bd">
<script type="text/javascript">
var xhr=new XMLHttpRequest();
xhr.open("GET","05根据我提供的JSON渲染表格.php");
xhr.send(null);
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
var jsonTxt=xhr.responseText;
var arr=JSON.parse(jsonTxt).h52106.people;
var table=document.createElement("table");
var arr1=["姓名","年龄","工资"];
var tr=document.createElement("tr");
arr1.forEach(str=>{
var td=document.createElement("td");
td.innerHTML=str;
tr.appendChild(td);
})
table.appendChild(tr);
arr.forEach(obj=>{
var tr=document.createElement("tr");
for(var i in obj){
var td=document.createElement("td");
td.innerHTML=obj[i];
tr.appendChild(td);
}
table.appendChild(tr);
})
bd.appendChild(table);
}
}
</script>
</body>
三、百度地图：
步骤：
1、打开百度搜索 百度地图开放平台
2、注册/登录 百度账号
3、拉到最下面 注册成为开发者
4、来到控制台->应用管理->我的应用->创建应用
5、应用的名称随意->浏览器端应用->白名单：填入*
6、成功获取到百度提供的密钥
7、打开导航条里面的开发文档->javascript API->示例DEMO
8、挑选你喜欢的百度地图：梭代码->改文字，改经纬度
9、特殊：百度地图更新分为：普通地图 和 GL版地图 两者不能混搭使用，其余都可以
四、jquery概念：
1、jquery相关概念
1、jQuery是一个js类库，类库：其实就是一个js文件，别人提供的对象（属性和方法）：压缩版（正式上线项目）和未压缩的源代码版
2、目的：简化js - DOM、事件、ajax
3、版本：
1.11.3 - 2.xx版本以上就不再支持老IE，做了向上兼容，1.11.3版本也能使用到最新的特性
2.xx
3.xx
4、常识题：jQuery有的人称呼叫做js库，而有的人称呼叫做js框架
那些称呼jQuery是一个库的人都是不够了解：jQuery由4个方面组成
a、jquery.js - 库：简化了js，大部分人只知道这一部分
b、jQuery.ui - 提供了页面的组件（组成页面一部分的部件） - 过时（效果有点老，以后也有更棒，网上一大把）
c、jQuery.mobile - 移动端开发，不会学习，现在更流行uniapp
d、Qunit - 测试人员（不需要会代码，英语好）用于测试javascript的工具
5、 曾经jQuery是全球最火的一个js库
现在三大框架：vue、react、angluar
2、jQuery的使用步骤：
1、引入jQuery.js文件
2、使用jQuery的API去获取元素
3、使用jQuery的API去操作元素
3、jQuery如何获取元素：
1、工厂函数：因为这个工厂可以做很多操作
$(); 或者 jQuery();
作用：
1、查找元素
语法：var 元素=$("jQuery选择器") - jQuery选择器是基于css选择器，但是比css选择器更加的强大
jQuery选择器不需要任何记忆：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
返回值：使用jQuery的工厂函数找到的元素，是一个jQuery对象集合，意味着不能使用以前的DOM方法去操作
a、jq找到的元素的特点：
1、隐式迭代 - 不用循环，直接做操作
2、具有链式操作 - 可以不断的使用.一步接一步的做下去
3、jq元素 和 dom元素 两者方法不换乱用，只能自己用自己的
转换：
jq -> dom：$("选择器")[i] - 只要加上下标就会变为DOM元素
绝对不要这么用，不希望把简单的变得麻烦
提出一点：千万不要对jq加下标，更不要循环
b、将dom -> jq：$(dom元素) - 有用：e.srcElement得到的都是一个dom元素，要转为jQuery元素才能使用对应的方法
为什么一个方法可以实现多个操作
function $(){
arguments - 重载：判断传入的实参的不同执行不同的操作
}
2、通过 节点之间的 关系：
1、父：$("xx").parent()
2、子：$("xx").children()
3、前一个兄弟：$("xx").prev();
4、后一个兄弟：$("xx").next();
5、除了自己的其他兄弟：$("xx").siblings();
jQuery查找元素，返回值：jquery集合，可以直接做操作，切忌不要循环
4、操作元素
1、内容：
a、html() - 底层就是dom的innerHTML - 能够识别标签
获取：$("xx").html();
设置：$("xx").html("新内容");
b、text() - 底层就是dom的innerText - 只能书写纯文本
获取：$("xx").text();
设置：$("xx").text("新内容");
c、val() - 底层就是dom的value - 单标签input、select&option
获取：$("xx").val();
设置：$("xx").val("新内容");
2、属性：
a、attr() - 底层就是dom的getAttribute/setAttribute - 自定义属性也可以操作
获取：$("xx").attr("属性名")
设置：$("xx").attr("属性名","属性值");
删除：$("xx").removeAttr("属性名")
b、专门提供了操作class的API：
1、追加class：$("xx").addClass("追加的class值")
2、删除class：$("xx").removeClass();
没传参数，清空所有class
传递实参，删除你传递的class
3、切换class：有此class和没有此class之间进行切换
$("xx").toggleClass("active");//在有active和没有active之间进行切换
3、样式：
css() - 设置时依然是内联样式（优先级高，不会影响到其他元素），获取时不关注内联/内部/外部样式表，只管当前生效的
获取：$("xx").css("属性名");
设置：$("xx").css({
"属性名":"属性值",
...
});
获取的目的：往往都是用于判断比较
设置的目的：修改
4、创建&渲染
a、创建：var elem=$(`<开始标签 属性名='${属性值}'>${内容}</结束标签>`)
b、渲染：*父亲.append(elem);//后面，儿子
父亲.prepend(elem);//前面，儿子
兄弟.after(elem);//后面，兄弟
兄弟.before(elem);//前面，兄弟
c、一句话创建并且渲染：父亲.append($(`<开始标签 属性名='${属性值}'>${内容}</结束标签>`));
5、删除：$("xx").remove();
6、克隆：$("xx").clone();
7、获取元素下标：$("xx").index();
案例：创建元素并渲染页面
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.li1{
color: red;
}
.li2{
color: orange;
}
.li3{
color: yellow;
}
.li4{
color: green;
}
.li5{
color: lightseagreen;
}
.li6{
color: blue;
}
.li7{
color: purple;
}
</style>
</head>
<body>
<ul id="ul">
</ul>
<script src="jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var arr=["北京","南京","西京","东京","重庆","成都","贵州"];
arr.forEach((str,i)=>{
$("ul").before($(`<li class='li${i+1}'>${str}</li>`));
})
</script>
</body>
五、事件：用户触发 或 浏览器自动触发：
1、绑定：
$("xx").bind("事件名",callback);
简化：$("xx").事件名(callback);
2、面试题：原生JS中 window.onload 和 JQ中$(document).ready(callback) 有什么区别
1、window.onload：等待所有的资源（html、css、js、图片、视频、音频）加载完毕后，最后执行，而且一个页面只能使用一次
2、$(document).ready(callback)：等待DOM树加载完毕就会执行，理论上比上者效率更高，而且一个页面可以反复使用
简写：
1、$(document).ready(()=>{})
2、$().ready(()=>{})
3、$(()=>{})
3、原来学过的事件：
click、dblclick、mouseover/mouseenter（移入，不会触发冒泡）、mouseout/mouseleave（移出，不会触发冒泡）、mousemove、change、blur(失去焦点事件)、focus(获取焦点事件)、submit、input（只要用户输入就会触发，在防抖节流时遇到过）、contextmenu(鼠标右击事件)、resize(屏幕的大小)、keydown
4、未学过的事件：
1、mousedown(鼠标按下)、mouseup(鼠标松开)
2、keydown、keypress、keyup - 键盘事件：
$(window).键盘事件(callback);
keydown：按下和按住都会触发，任何按键都支持 - 最适合用于做（游戏开发）
keypress：按下和按住都会触发，支持数字+字母+回车+空格
keyup：松开时才触发，任何按键都支持 - 劲舞、炫舞、QQ音速，比手速
event事件对象：jQuery没有任何的简化操作
键盘键码：e.keyCode;
3、scroll - 滚动监听事件：
绑定事件：$(window).scroll(()=>{
1、$(window).scrollTop();//获取当前滚动条距离页面顶部有多远
2、$("xx").offset().top;//获取某个元素距离页面顶部有多远
3、越往下滚，出现数据越多
})
案例：滚动监听事件
<body>
<nav>导航条</nav>
<p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex facere mollitia assumenda necessitatibus inventore aperiam sed ducimus soluta culpa eaque delectus ad natus. Quasi laboriosam dolores vitae laborum ipsa vero.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex facere mollitia assumenda necessitatibus inventore aperiam sed ducimus soluta culpa eaque delectus ad natus. Quasi laboriosam dolores vitae laborum ipsa vero.</p>
<h1></h1>
<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(window).scroll(()=>{
if($(window).scrollTop()>50){
$("nav").css({
"position":"fixed",
"top":"0",
"left":"0"
})
}else{
$("nav").css({
"position":"static",
"top":"0",
"left":"0"
})
}
if($(window).scrollTop()>$("h1").offset().top-innerHeight/1.2){
$("h1").css({
"opacity":"1",
"top":"0",
"transform":"rotateZ(360deg)"
})
}
})
</script>
</body>
六、JQ动画：
1、预定义动画：3组：9个
1、隐藏和显示：
隐藏：$("xx").hide(执行时间,callback)
显示：$("xx").show(执行时间,callback)
特殊：1、如果没有传递任何参数，瞬间的隐藏和显示
如果传递了时间参数，会具有动画（同时修改宽高度、透明度）
2、callback是动画执行完毕才会执行的代码操作
3、组合用法：自带判断操作：
$("xx").toggle(执行时间,callback) === show+hide
2、滑动效果：
隐藏：$("xx").slideUp(执行时间,callback)
显示：$("xx").slideDown(执行时间,callback)
特殊：1、哪怕不加时间也具有动画，只不过动画比较快（修改高度）
2、callback是动画执行完毕才会执行的代码操作
3、组合用法：自带判断操作：
$("xx").slideToggle(执行时间,callback) === slideDown+slideUp
3、淡入淡出：
淡出/隐藏：$("xx").fadeOut(执行时间,callback)
淡入/显示：$("xx").fadeIn(执行时间,callback)
特殊：1、哪怕不加时间也具有动画，只不过动画比较快（修改透明度）
2、callback是动画执行完毕才会执行的代码操作
3、组合用法：自带判断操作：
$("xx").fadeToggle(执行时间,callback) === fadeIn+fadeOut
2、自定义动画：
1、并发动画：所有的动画一起执行
$("xx").animate({
"css属性名":"css属性值",
...
},执行时间,callback)
2、排队动画：一个动画做完在做下一个
$("xx").animate({
"css属性名":"css属性值",
},执行时间,callback).animate({
"css属性名":"css属性值",
},执行时间,callback).animate({
"css属性名":"css属性值",
},执行时间,callback).animate({
"css属性名":"css属性值",
},执行时间,callback).animate({
"css属性名":"css属性值",
},执行时间,callback).animate({
"css属性名":"css属性值",
3、特殊：
1、animate方法不支持颜色、transform转换的动画 - 明天就有jQuery.ui.js提供增强animate方法
2、动画会排队，如果快速的触发动画，怎么排队上很多很多的动画慢慢执行，不希望看到这个效果：
stop(); 例：$("xx").stop( ).animate({
"css属性名":"css属性值",
...
},执行时间,callback)
案例：鼠标跟随动画
<body id="bd">
<a href="#">点击一下就跳转</a>
<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 绑定鼠标移动事件
$(window).mousemove(e=>{
// 获取鼠标的坐标
var x=e.pageX;
var y=e.pageY;
// 移动一次就创建一张图片
var img=$(`<img style='left:${x+10}px;top:${y+10}px' src='2.png'>`);
// 把图片追加到页面上
$("body").append(img);
// 图片绑定动画，动画的回调函数会在动画完成后再执行
img.animate({
"opacity":"0",
"width":"0",
"height":"0"
},1000,()=>{
img.remove();//将这张图片删除
})
})
</script>
</body>
4、扩展：
1、如何判断某个元素的有没有动画
if(!$("xx").is(":animated")){没有动画的元素才执行}
2、 if(!$("xx").is(":hidden")){没有隐藏的元素才执行}
案例：无缝轮播
<body>
<div class="carousel" id="carousel">
<button><i class="iconfont icon-xiangzuojiantou"></i></button>
<div class="pics">
<img src="images/banner01.jpg" alt="">
</div>
<button><i class="iconfont icon-xiangyoujiantou"></i></button>
<img src="images/banner01.jpg" alt="" style="opacity: 0; z-index: -1;">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
<script src="jquery-1.11.3.min.js"></script>
<script>
var arr = ["images/banner01.jpg", "images/banner02.jpg", "images/banner03.jpg"], k = 0, o;
$("button").click(function () { !$("img").is(":animated") && rotation(parseInt($(this).index() - 1)); })
$("li").click(function () { !$("img").is(":animated") && rotation((k = $(this).index()) > (o = $("li.active").index()) ? 1 : k < o ? -1 : 0, k); })
timer = setInterval(() => rotation(1), 3000);
$(".carousel").mouseover(() => { clearInterval(timer) });
$(".carousel").mouseout(() => { timer = setInterval(() => rotation(1), 3000) });
// key=>{1->右键 ,-1->左键},
// i=>{点击li的下标}
function rotation(key, i) {
i !== undefined ? k = i : k += key;
k == arr.length ? k = 0 : k == -1 ? k = arr.length - 1 : k;
$(".pics").append($(`<img style='left: ${key * 100}%;' src='${arr[k]}'>`));
$(".pics>img:first").animate({ "left": `${-1 * key * 100}%` }, 1000, () => $(".pics>img:first").remove());
$(".pics>img:last").animate({ "left": "0%" }, 1000);
$($("li")[k]).addClass("active").siblings().removeClass();
}
</script>
</div>
</body>
七、插件库
1、jQueryUI：组件/插件库：提供了HTML/CSS/JS，程序员想要使用只需要引入然后梭代码
组件：组成网页一部分的部件
插件：插件就是组件，插件带有js功能
使用步骤：
1、下载
2、引入：
<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、挑选自己喜欢的效果 - 然后梭：
个人推荐：
a、选项卡/标签页/tabs
b、菜单
c、手风琴/折叠面板
d、自动完成/模糊搜索
e、特效 - 增强toggle("特效名称",duration,callback)+hide+show
f、拖放
4、根据你的设计图修改css - 如果你修改了没有成功只有一个可能，优先级不够
5、根据数据库拿回来的数据渲染页面 - 记得把模板删掉
2、日期选择器
wdatepicker
3、无敌的插件库
jQuery插件库
