jQuery动画、类数组对象、插件

一、动画

1.简单动画

显示/隐藏 ：$(...).show|hide|toggle(ms,callback)
默认：不带动画，单纯为了简化display:block|none
如果想要添加动画效果，可以加参数：
    ms：动画持续时间（毫秒）
    callback：动画结束后自动执行的回执函数
缺点：
    1.效果是写死的，不便于维护和定制
    2.用js的定时器实现动画，效果比transition低
解决：以后的过渡效果都用：起始class+结束class+transition

2.万能动画

语法：
    $(...).animate({
        要修改的css属性：目标值;
                    ... : ...
    },ms,callback)
注意：只支持单个数值的css属性，不支持颜色动画
优点：灵活性好，可随意停止

3.排队和并发

1.并发：多个css属性同时改变
    实现：同时改变同一个animate内的多个属性
2.排队：同一个元素上，反复调用多个animate，每个animate必须等待前一个动画执行完，才执行
    实现：对同一个元素反复调用多个animate

4.停止动画

语法：$(...).stop
注意：默认只停止队列中当前正在播放的动画，队列中后续动画依然执行
    解决：停止当前动画，并清空队列：stop(true)
:animate选择器：选择或判断一个元素是否正在播放动画
延迟执行：$(...).delay(ms).animate(...)
    优先用setTimeout代替

二、类数组对象操作

1.get([index])

等效于: [index]
返回值：index位置的dom元素
注意：get()将jQuery结果集合转化为标准的数组对象

2.size()

等效于： .length

3.  .each(callback)

等效于数组中的forEach
$(...).each(callback) 与 $.each(obj,callback)的区别
1.存储位置：
    $(...).each()保存在原型对象中
    $.each() 保存在构造函数上
2.调用方式：
    $(...).each()只允许jQuery类型的子对象调用
    $.each() 所有对象都可调用！
3.$.each()即可遍历索引数组，又可遍历关联数组和对象

4.  .index()

等效于数组中的indexOf
语法：
1. let i=$("selector").index(jq对象|DOM对象)
    查找右边的对象在左边的结果集合中的下标位置
    何时：跨多个父元素查找元素在结果集合中的位置时
2.let  i= $(当前元素).index()
    查找当前元素在其父元素下的下标位置
    何时: 如果在同一个父元素下查找元素的位置

三、插件

1.jQuery官方插件 ：jQuery Ui

1.效果：重写了jQuery中的部分函数
    1.让addClass也可添加动画持续时间和回调函数
    2.让animate支持颜色动画
    3.为show/hide/toggle添加了更多的动画效果
2.小部件：拥有完整样式和行为的页面小功能
    1.部件的样式：.css文件
    2.部件的行为：.js文件
    3.部件的内容和格式：自定义
3.使用步骤：
    1.下载并在页面中引入部件的.css文件和.js文件
        注意：1.jquery ui是基于jquery开发的，所以必须先引入jquery.js，再引入jquery-ui.js
        注意：2.jquery-ui.css必须和jquery ui的images文件夹放在一个目录下
    2.按照部件的要求定义HTML内容和格式
    3.在自定义脚本中找到要应用部件的HTML元素，调用部件的函数