第24天

同步交互与异步交互

全称Asynchronous JavaScript And XML，即异步JavaScript和XML
是什么：服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
目的：在不刷新页面的情况下与服务器端进行交互沟通，可将服务器端的数据传到前端
定时器也是异步，定时器内的代码再耗时也不会卡住后续代码
使用步骤：
1. 创建ajax对象（即XMLHttpRequest，简称XHR对象）var xhr=new XMLHttpRequest();
2. 建立和服务器端的连接 xhr.open("GET/POST","php文件的路径");
3. 向服务器端发送请求 xhr.send("key1=value1&key2=value2&......");若是GET请求，则写为xhr.send(null); 请求消息改放入open方法的url?后。若是POST请求，需要在此之前设置请求头部，即xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4. 设置状态事件监听

xhr.onreadystatechange=()=>{
	if(xhr.readyState==4&&xhr.status==200){
		xhr.responseText; //服务器返回的文本
	}
}

配置文件|数据格式；X代表未知，即XML没有提供任何预定义标签，全需自行定义
使用步骤：
1. 建xml文件（文件名.xml）
2. 写入文档声明，且必须写在第一行第一列，即<?xml version="1.0" encoding="utf-8"?>
3. 必须要有且只有一个根标签（双）
4. 所有的XML元素必须都有关闭标签
由后端拿出数据库的数据并整理为XML格式，前端使用ajax获取
注意：url写为xml文件的路径；改使用xhr.responseXML;（服务器返回的xml，可以使用核心DOM处理）

全称JavaScript Object Notation，即JS对象表示法；前端依然使用ajax获取
从JS中独立出来的、几乎被所有主流语言所支持的、一种轻量级的文本数据交换格式/字符串数据表示法，比XML更简洁、更快、更容易解析
JSON数据/JSON字符串的格式：
1. '[值1,值2,值3,......]'可以是数字、字符串、布尔值、null
2. '[{ },{ },{ },......]'数组中放入对象
3. '{"key":"value","key":"value",......}'键名和字符串必须添加双引号；value是否添加由数据类型决定
4. '{"key":[ ],"key":[ ],......}'
php中将数据转为JSON字符串/穿衣服：echo JSON_encode($arr);
前端去引号/脱衣服：eval("("+jsonTxt+")");或JSON.parse(jsonTxt);
将js对象转为JSON字符串：JSON.stringify(arr);

查询字符串：只适合双页面传输且解析复杂
cookie：每个的大小限制为4kb，解析复杂，用户可以阻止所有cookie
webStorage：存放数据大小可达8mb，只有老IE不支持
1. 由两部分组成：localStorage（永久级本地存储，数据永久存在，除非手动删除）和sessionStorage（会话级本地存储，数据会在浏览器关闭之后销毁）；本质是一个对象
2. 如何使用：保存xxStorage.属性名=属性值; 读取xxStorage.属性名 删除xxStorage.removeItem("属性名"); 清空xxStorage.clear();
3. 使用场景：记住密码、皮肤

jQuery类库其实就是一个js文件，诞生于2006年，发行了1.x（支持老IE且向上兼容）、2.x、3.x三个大版本
在三大框架（Vue、React、Angular）出现之前、继prototype.js之后爆火（简单、免费、开源）
目的：原生js封装的常用方法，用来简化js开发（包括核心DOM、事件、ajax）
jQuery框架其实由4部分组成：
1. jQuery.js：专门针对js开发；大部分人只知道有这一部分，因此jQuery常被称作一个类库（面试题）
2. jQuery-ui.js：专门针对ui开发，相当于一个插件库
3. jQuery.mobile.js：专门针对移动端开发，改学习uniapp混合开发框架
4. Qunit-专门针对测试

工厂函数
1. 语法：$()或者 jQuery()
2. 底层原理：重载overload，根据传入的实参（由函数中自带的arguments类数组对象接收住）执行不同的分支操作
jQuery的特性
1. 链式操作：找到一个元素后可以连续不断的进行.操作
2. 隐式迭代：自动遍历jQuery对象，不需手动循环获取每个元素，也不能加下标（会转换为dom对象）

$("jQuery选择器")支持所有的CSS选择器，还有一些自定义的选择器
注意：
1. 无需记忆，直接搜索（www.w3school.com.cn/jquery/jque…
2. 底层：document.querySelectorAll("css选择器")
3. 返回：一个jQuery对象而非一个DOM集合，只能使用各自的方法
通过关系查找元素（前提：至少先找到一个元素）
1. 父元素 $("xx").parent()
2. 子元素 $("xx").children()
3. 前一个兄弟 $("xx").prev()
4. 后一个兄弟 $("xx").next()
5. 除了自己的其余所有兄弟 $("xx").siblings()

jQuery对象=>DOM对象：$("jQuery选择器")[下标]（一般不用，DOM操作更复杂）
DOM对象=>jQuery对象：$(dom对象) 使用场景：this和e.target默认是一个DOM对象，只需使用$()把其包装起来即可使用jQuery的方法

内容：等效于原生js的innerHTML/innerText/value
1. 获取：$("xx").html/text/val()
2. 设置：$("xx").html/text/val("新内容");
html属性：可以操作自定义属性
1. 获取属性值：$("xx").attr("属性名")
2. 设置属性值：$("xx").attr("属性名","新属性值");
3. 删除属性：$("xx").removeAttr("属性名");
新增：操作class属性来控制样式
1. 添加class：$("xx").addClass("class名");
2. 删除class：$("xx").removeClass("class名"); 若不传参则清空所有的class
3. 切换class：$("xx").toggleClass("class名"); 在有此class和无此class之间切换
css样式：设置的是内联样式；只管当前生效的样式（内联/内部/外部都可能获取到）
1. 获取：$("xx").css("css属性名")
2. 设置：$("xx").css({"css属性名":"css属性值",...})

var 新元素=$(`<开始标记 属性名="${变量}">${变量}</结束标记>`);

渲染页面：
1. $("父元素").append(新元素); 最后一个儿子
2. $("父元素").prepend(新元素); 第一个儿子
3. $("兄弟元素").before(新元素); 前一个兄弟
4. $("兄弟元素").after(新元素); 后一个兄弟
删除元素：$("xx").remove();
克隆元素：$("xx").clone(true); 写true才会拷贝js中绑定的事件