jQuery_03之事件、动画、类数组操作

一、事件：
1、模式触发事件：
①DOM：elem.onXXX();只能触发直接用onXXX绑定的事件处理函数；用addEventistener添加的事件监听无法模拟出发触发；
②jQuery：$(...).trigger("事件名");可简写：$(...).事件名；
2、页面加载后执行：
①jQuery:$(document).ready(function(){...});底层事件——DOM中的ondocumentcontentloaded，只要DOM树加载完成，js执行完毕就触发；
②DOM:window.onload=function(){...}；底层——必须等到html，css，jsimg全部加载完成才会触发；
③优化：将原本在load之后执行的任务（事件绑定，修改DOM树），提前到ready之后执行，可缩短页面加载事件；将script放在body的结尾可实现DOM加载后立刻执行；
3、hover事件：其实是mouseover和mouseout的合体，须绑定两个事件处理函数； 当须同时相应mouseover和mouseout时，可简写为hover；
二、动画：
1、简化版动画函数：显示/隐藏：$(...).show(); $(...).hide(); $(...).toggle();
* 无参数的show（）/hide（）使用的是display属性；瞬间显示和隐藏；
动画参数：speed：fast/normal/slow；或者使用毫秒数自定义动画时长；
动画速度变化参数：easing：linear/swing；
伸缩：slideUp()、slideDown()、slideToggle()；
淡入淡出：fadeIn()、fadeOut()、fadeToggle()；
2、万能动画函数：animate():可对数值类型的CSS样式执行定时器动画；
使用：$(...).animate(params,speed,easing,fn);
其中：params：所有变化的css属性目标值；speed：动画持续时间/速度；easing：速度变化效果；fn：动画结束后自动调用的回掉函数；
排队：多个动画顺序执行；
$(...).animate({属性1:值1,...},ms).animate({属性2：值2，...}，ms)；
并发：多个动画同时执行；
$(...).animate({属性1:值1，属性2：值2}，ms)；
三、类数组操作：
1、.each(function(i){i->当前元素的下标；this->当前元素})；
each为jQuery第三方定义类数组对象的方法；
forEach是原生js中Array类型的方法；
使用：$("要查找的元素").index("所有元素")；返回要查找的元素在所有元素中的下标位置；
2、jQuery UI：
①Effects：动画效果；
addClass()/removeClass()/toggleClass():默认没动画；
show/hide/toggle：扩展了动画效果；
color animation：实现颜色动画；
$(...).animate():支持颜色动画；
$(...).toggle(Effecta,speed)中：effects参数：
blind（遮蔽）、bounce（弹跳）、clip（缩短）、puff（膨胀）、explode（爆炸）、fold（折叠）、highlight（高亮）、drop（丢弃）、pulsate（心跳）、shake（震动）、size、slide
②Interactions：交互
拖曳：$(...).dragglable();API会悄悄为元素添加class；
可选中：$(...).selectable();须手动定义同名样式类ui-selected的样式；
可排序：$(...).sortable();
③Widget：小部件；
a、Accordion：手风琴部件，引入jquery-ui.css，html：父元素>标题+内容div,js:$(父元素).accordion();
b、AutoComplete:自动完成；html：input文本框，js：保存所有备选项的数组——$(文本框).autocomplete({source:数组})；
c、datepicker：日期选择框；html：input文本框，js：$(文本框).datepicker({dateFormat:"yyyy年mm月dd日"})；*H5中不能修改样式且兼容性；
d、dialog：对话框；html：定义外层元素，包含提示信息（须定义title属性，title属性会出现在对话框左上角），js：$(“外层元素”).dialog();*不带参数的dialog只负责将容器变成对话框，不控制显示与否；
配置：$(...).dialog({
autoOpen:false,//默认隐藏
button:[
{text:'文本'，click：function（）{this->dialog}}//按钮
....]
})；
打开：$(...).dialog("open");
关闭：$(...).dialog("close");
e、按钮部件：$(button/input/a).button();
f、tabs：标签页：html:父级div>标签页ul>li>a href="#id";*(内容页div的#id匹配)；js：$(父元素).tabs();
g、tooltip：工具提示;必须应用到document上；