ajax

XML数据格式：

HTML、XHTML、DHTML、XML分别是什么？

HTML - 网页（预定义标签）
XHTML - 更严格的网页
DHTML - 动态效果的网页：并不是新技术，只是统称：HTML+CSS+JS(dom)
XML - 配置文件|数据格式 - 现在几乎没人使用，因为最流行的是JSON - 未知的标签语言（没有任何一个预定义的标签，所有标签都需要你自定义）

使用

创建后缀名.xml的文件
声明头部<?xml version='1.0' encoding='utf-8'?>

version：版本1.0
encoding：设置中文编码

创建一个根标签：必须是双标签，只能有一个 - 标签名随意
里面的标签随意，可自定义
打开查看：apache打开，依然使用服务器端方式进行访问
前端依然使用ajax获取xml数据：

不同：
- url->"xx.xml";
- 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缺点：解析数据过于繁琐

JSON数据格式：Javascript Object Notation：js对象表示法

作用：数据格式 - 文本数据,比XML更简洁，更快，更容易解析

认识【JSON字符串】：

'[1,2,3,4,5]';
'{"name":"daisy"}';
'[{},{},{},{}]';
'{"names":[姓名1,姓名2,...],"age":[年龄1,年龄2,...]}'

服务器端如何将数据变为JSON字符串：

PHP：echo JSON_encode($arr);
Node：JSON.stringify(arr);

前端如何将JSON字符串拿到变为JSON对象：

1、eval("("+json字符串+")");
2、JSON.parse(json字符串);

jquery

概念：jQuery是一个js类库，类库：其实就是一个js文件，别人提供的对象（属性和方法）-压缩版（正式上线项目）和未压缩的源代码版

目的：简化js - DOM、事件、ajax
版本：11.3 - 2.xx版本以上就不再支持老IE，做了向上兼容，1.11.3版本也能使用到最新的特性
jQuery由4个方面组成：
- jquery.js - 库：简化了js，大部分人只知道这一部分
- jQuery.ui - 提供了页面的组件（组成页面一部分的部件） - 过时（效果有点老，以后也有更棒，网上一大把）
- jQuery.mobile - 移动端开发，不会学习，现在更流行uniapp
- Qunit - 测试人员（不需要会代码，英语好）用于测试javascript的工具

使用

jQuery的使用步骤：
- 引入jQuery.js文件
- 使用jQuery的API去获取元素
- 使用jQuery的API去操作元素

jQuery获取元素：

工厂函数 $(); 或者 jQuery();

作用：
1. 查找元素 var 元素=$("jQuery选择器") 常用查找
- 返回值：使用jQuery的工厂函数找到的元素，是一个jQuery对象集合，意味着不能使用以前的DOM方法去操作
- jq找到的元素的特点：
  - 隐式迭代 - 不用循环，直接做操作
  - 具有链式操作 - 可以不断的使用.一步接一步的做下去
  - jq元素和 dom元素两者方法不换乱用，只能自己用自己的
  - 转换：jq -> dom：$("选择器")[i] - 只要加上下标就会变为DOM元素【千万不要对jq加下标，更不要循环】
1. 将dom -> jq：$(dom元素)
  - e.srcElement得到的都是一个dom元素，要转为jQuery元素才能使用对应的方法

通过节点之间的关系：

父：$("xx").parent()
子：$("xx").children()
前一个兄弟：$("xx").prev();
后一个兄弟：$("xx").next();
除了自己的其他兄弟：$("xx").siblings();

jQuery查找元素，返回值：jquery集合，可以直接做操作，切忌不要循环

jQuery操作元素

内容：

html() - 底层就是dom的innerHTML - 能够识别标签
- 获取：$("xx").html();
- 设置：$("xx").html("新内容");
text() - 底层就是dom的innerText - 只能书写纯文本
- 获取：$("xx").text();
- 设置：$("xx").text("新内容");
val() - 底层就是dom的value - 单标签input、select&option
- 获取：$("xx").val();
- 设置：$("xx").val("新内容");

属性：

attr() - 底层就是dom的getAttribute/setAttribute - 自定义属性也可以操作
- 获取：$("xx").attr("属性名")
- 设置：$("xx").attr("属性名","属性值");
- 删除：$("xx").removeAttr("属性名")
专门提供了操作class的API：
- 追加class：$("xx").addClass("追加的class值")
- 删除class：$("xx").removeClass();
  - 没传参数，清空所有class
  - 传递实参，删除你传递的class
- 切换class：有此class和没有此class之间进行切换
  - $("xx").toggleClass("active");//在有active和没有active之间进行切换

样式：

css() - 设置时依然是内联样式（优先级高，不会影响到其他元素），获取时不关注内联/内部/外部样式表，只管当前生效的
- 获取：$("xx").css("属性名");
- 设置：$("xx").css({ "属性名":"属性值", ... });
  - 获取的目的：往往都是用于判断比较
  - 设置的目的：修改

创建&渲染

创建：var elem= $(`<开始标签属性名='$ {属性值}'>${内容}</结束标签>`)//工厂函数作用3
渲染：
- 父亲.append(elem);//后面，儿子
- 父亲.prepend(elem);//前面，儿子
- 兄弟.after(elem);//后面，兄弟
- 兄弟.before(elem);//前面，兄弟
一句话创建并且渲染：

父亲.append($(`<开始标签 属性名='${属性值}'>${内容}</结束标签>\`));

删除：$("xx").remove();
克隆：$("xx").clone();
获取元素下标：$("xx").index();

工厂函数的作用：

直接找元素：$("选择器"); -- $(".d1");
DOM->JQ：$(DOM元素); -- $(e.srcElement);
创建元素：$(<></>);

事件：用户触发或浏览器自动触发：

绑定：$("xx").bind("事件名",callback);
简化：$("xx").事件名(callback);
原生JS中 window.onload 和 JQ中$(document).ready(callback) 有什么区别
- window.onload：等待所有的资源（html、css、js、图片、视频、音频）加载完毕后，最后执行，而且一个页面只能使用一次
- $(document).ready(callback)：等待DOM树加载完毕就会执行，理论上比上者效率更高，而且一个页面可以反复使用，简写：
  - $(document).ready(()=>{})
  - $().ready(()=>{})
  - $(()=>{})

之前了解的事件：

click、dblclick（双击）
mouseover/mouseenter（移入，不会触发冒泡）、ouseout/mouseleave（移出，不会触发冒泡）、mousemove
change、blur（失去焦点）、focus（获取焦点）、submit（提交）、input（只要用户输入就会触发）
contextmenu
resize
keydown

新事件

mousedown(鼠标按下)、mouseup(鼠标松开)
keydown、keypress、keyup - 键盘事件：$(window).键盘事件(callback);
- keydown：按下和按住都会触发，任何按键都支持 - 最适合用于做（游戏开发）
- keypress：按下和按住都会触发，支持数字+字母+回车+空格
- keyup：松开时才触发，任何按键都支持 - 劲舞、炫舞、QQ音速，比手速
- event事件对象：jQuery没有任何的简化操作键盘键码：e.keyCode;

scroll - 滚动监听事件：

绑定事件：

$(window).scroll(()=>{
    $(window).scrollTop();//获取当前滚动条距离页面顶部有多远
    $("xx").offset().top;//获取某个元素距离页面顶部有多远 越往下滚，出现数据越多
})

jQuery动画：

预定义动画：3组：9个

隐藏和显示：
- 隐藏：$("xx").hide(执行时间,callback)
- 显示：$("xx").show(执行时间,callback)
- 特殊
  - 如果没有传递任何参数，瞬间的隐藏和显示；如果传递了时间参数，会具有动画（同时修改宽高度、透明度）
  - callback是动画执行完毕才会执行的代码操作
  - 组合用法：自带判断操作：$("xx").toggle(执行时间,callback) === show+hide
滑动效果：
- 隐藏：$("xx").slideUp(执行时间,callback)
- 显示：$("xx").slideDown(执行时间,callback)
- 特殊：
  - 哪怕不加时间也具有动画，只不过动画比较快（修改高度）
  - callback是动画执行完毕才会执行的代码操作
  - 组合用法：自带判断操作$("xx").slideToggle(执行时间,callback) === slideDown+slideUp
淡入淡出：
- 淡出/隐藏：$("xx").fadeOut(执行时间,callback)
- 淡入/显示：$("xx").fadeIn(执行时间,callback)
- 特殊：
  - 哪怕不加时间也具有动画，只不过动画比较快（修改透明度）
  - callback是动画执行完毕才会执行的代码操作
  - 组合用法：自带判断操作 $("xx").fadeToggle(执行时间,callback) === fadeIn+fadeOut

自定义动画：

并发动画：所有的动画一起执行 $("xx").animate({ "css属性名":"css属性值", ... },执行时间,callback)
排队动画：一个动画做完在做下一个

$("xx").animate({
    "css属性名":"css属性值",
},执行时间,callback).animate({
    "css属性名":"css属性值",
},执行时间,callback).animate({
    "css属性名":"css属性值",
},执行时间,callback).animate({
    "css属性名":"css属性值",
},执行时间,callback).animate({
    "css属性名":"css属性值",
},执行时间,callback).animate({
    "css属性名":"css属性值",
},执行时间,callback)

animate方法不支持颜色、transform转换的动画 - 明天就有jQuery.ui.js提供增强animate方法
动画会排队，如果快速的触发动画，怎么排队上很多很多的动画慢慢执行，不希望看到这个效果：stop();

1.如何判断某个元素的有没有动画if(!$("xx").is(":animated")){没有动画的元素才执行} 2. if(!$("xx").is(":hidden")){没有隐藏的元素才执行}

jQueryUI

组件/插件库：提供了HTML/CSS/JS，程序员想要使用只需要引入然后梭代码

组件：组成网页一部分的部件
插件：插件就是组件，插件带有js功能
一切插件的使用步骤：

下载
引入

<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>

挑选自己喜欢的效果

选项卡/标签页/tabs
菜单
手风琴/折叠面板
自动完成/模糊搜索
特效 - 增强toggle("特效名称",duration,callback)+hide+show
拖放

根据你的设计图修改css - 如果你修改了没有成功只有一个可能，优先级不够
根据数据库拿回来的数据渲染页面 - 记得把模板删掉

日期选择器

底层date对象

wdatepick.js

优点：非常简单
缺点：样式比较老化

$("input").focus(function(){
    WdatePicker({//配置信息
        el:this,
        isShowToday: false,
        isShowClear: false,
        isShowOK: false,//以上三个都是开关，如果三个都关起来了，则会隐藏掉快速选择按钮
        lang: "eng",
        skin: "twoer"dateFmt: "yyyy年MM月dd日 HH:mm:ss",//年月日时分秒的字母大小写是固定的
        minDate: "%y-%M-%d",
        maxDate: "%y-%M-{%d+7}",//只能购买从今天开始往后7天的车票
        readOnly: true,
    })
})

laydate.js：

优点：非常简单，还很漂亮
缺点：已经下架了

无敌的插件库：jQuery插件库

ajax+jQuery6