事件，动画，jQueryUI-03

正课:

1. 事件

2. 动画

3. jQuery UI

4. 事件:
   模式触发事件:
   DOM: elem.onxxx();
   问题: 只能触发直接用onxxx绑定的事件处理函数
   用addEventListener添加的事件监听，无法模拟触发
   jq: (...).事件名

   页面加载后执行:
   特殊: (document).ready(function(){...})
   简: (function(){...});
   其实: 只要将script放在body的结尾，就可实现DOM加载后立刻执行。

   一个事件: hover: 其实就是mouseover和mouseout的合体
   所以,hover要绑定两个事件处理函数
   何时使用: 只要同时响应mouseover和mouseout时，就可简写为hover

5. 动画: 高级函数: 基于底层函数又进行了封装
   两大块: 简化版动画函数 和 万能动画函数
   简化版动画函数:
   显示/隐藏: (...).hide(); (...).animate(params,speed,easing,fn)
   其中: params: 所有变化的css属性的目标值:
   比如: {css属性1: 值1, css属性2:值2,...}
   强调: css属性名要去横线变驼峰
   值要加单位
   speed: 动画持续时间/速度
   easing: 速度变化效果
   fn: 动画结束后，自动调用的回调函数

动画中的排队和并发:
排队: 多个动画顺序，先后执行
(...).animate({属性1:值1,属性2:值2},ms)
同时修改属性1和属性2
下课了。。。。。。。。。。
正课:

1. 类数组操作:

2. jQuery UI:

3. 类数组操作:
   .each(function(i){ i->当前元素的下标; this->当前元素})
   .each vs forEach
   原理是一样的
   forEach是原生js中Array类型的方法
   each是jquery中第三方定义的类数组对象的方法

   $("要查找的元素").index("所有元素")
   返回，要查找的元素在所有元素中的下标位置

4. jQuery UI: 一组可复用的更简化版API或插件库
   何时: 如果觉得jQuery还不够简化，或需要复用一些插件时
   比如: 日历选择框 验证
   插件: 官方插件 第三方插件: 自定义插件
   什么是jQuery UI: 基于jquery编写的一套UI组件库，专用于PC端浏览器。
   jQuery Mobile: 基于jquery编写的一套UI组件库, 专门用于移动端浏览器的网页
   官网: jqueryui.com

   问题: 公司要使用一项新的技术或库，如何快速上手:
   官网->什么是->DEMO->API 手册

   下载: jQuery UI: 默认的色调是蓝色
   希望获得自定义主题的UI库: 官网->Themes->Gallary
   需要更细致的定制主题: Gallary->edit
   正式学习jquery UI: 三部分: Effects interactions Widgets
   Effects: 动画效果
   addClass/removeClass/toggleClass() 默认没动画，现在有
   show/hide/toggle 扩展了动画效果
   color animation: 实现颜色动画
   练习:
   强调: 因为jquery ui依赖于jquery，所以必须先引入jquery.js，再引入jquery ui.js。

jquery ui中的(...).toggle(Effects,speed)
toggle的effects参数:
blind(遮蔽) bounce(弹跳) clip(缩短) drop(丢弃)
explode(爆炸) fold(折叠) highlight(高亮) puff(膨胀)
pulsate(心跳) shake(震动) size slide

Interactions:交互

1. 拖拽: $(...).draggable()
   问题: API会悄悄的为元素添加class->侵入性
   对于有侵入性API，不但要引入js，还要引入css
2. 可选中: $(...).selectable();
   问题: 可自动向选中的li添加ui-selected类，但jquery ui并未定义该类的样式
   解决: 必须手动定义同名样式类ui-selected，定义选中项的样式
3. 可排序: $(...).sortable();

总结: jquery ui中的很多API具有侵入性:
通常都要引入jquery ui附带的css文件
有的还需要自己补充同名的样式类
要求: 对jquery ui不但要知道表面现象，更要知道Element中的变化原理。

Widget: 小部件: (小重点)

1. Accordion(手风琴部件)
   何时: 节约页面空间
   如何使用:
   引入: jquery-ui.css
   HTML: 父元素>标题+内容div
   js:$(父元素).accordion();

2. AutoComplete(自动完成)
   何时: 避免重复输入,减少键入次数
   如何:
   html: input文本框
   js: 一个保存所有备选向的数组
   $(文本框).autocomplete({source:数组})

3. datepicker:（日期选择框）
   如何使用:
   html: input文本框
   js中: $(文本框).datepicker({dateFormat:'yyyy年mm月dd日'})
   vs h5中 h5有兼容性问题，且不能修改样式

4. dialog:对话框:
   为什么: BOM中的alert,confirm,prompt样式死板，无法定制
   何时: 今后，只要弹窗，都用dialog部件
   如何:
   html中:定义外层元素，包含提示信息
   其中外层元素要定义title属性
   title属性会出现在对话框的左上角
   js: (...).dialog({
   autoOpen:false,//默认隐藏
   buttons:[
   {text:"文本",click:function(){this->dialog}},//按钮
   ...
   ]
   });
   打开: (...).dialog("close");

5. 按钮部件: $(button/input/a).button();

6. tabs: 标签页:
   如何:
   html: 父级div>标签页ul>li>a href="#id"
   内容页div#id
   说明: li>a的href中的#id是为了匹配div的#id
   js: $(父元素).tabs();

7. tooltip: 工具提示
   为什么: 普通的title属性，浏览器之前有不一致
   何时: 只要希望所有浏览器统一title提示的样式时
   如何: tooltip，必须应用到document上