正课:
事件
动画
jQuery UI
-
事件:
模式触发事件:
DOM: elem.onxxx();
问题: 只能触发直接用onxxx绑定的事件处理函数
用addEventListener添加的事件监听，无法模拟触发
jq:(...).事件名
页面加载后执行:
特殊:(document).ready(function(){...})
简:(function(){...});
其实: 只要将script放在body的结尾，就可实现DOM加载后立刻执行。一个事件: hover: 其实就是mouseover和mouseout的合体
所以,hover要绑定两个事件处理函数
何时使用: 只要同时响应mouseover和mouseout时，就可简写为hover 动画: 高级函数: 基于底层函数又进行了封装
两大块: 简化版动画函数 和 万能动画函数
简化版动画函数:
显示/隐藏:(...).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
下课了。。。。。。。。。。
正课:
类数组操作:
jQuery UI:
-
类数组操作:
.each(function(i){ i->当前元素的下标; this->当前元素})
.each vs forEach
原理是一样的
forEach是原生js中Array类型的方法
each是jquery中第三方定义的类数组对象的方法$("要查找的元素").index("所有元素")
返回，要查找的元素在所有元素中的下标位置 -
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:交互
- 拖拽: $(...).draggable()
问题: API会悄悄的为元素添加class->侵入性
对于有侵入性API，不但要引入js，还要引入css - 可选中: $(...).selectable();
问题: 可自动向选中的li添加ui-selected类，但jquery ui并未定义该类的样式
解决: 必须手动定义同名样式类ui-selected，定义选中项的样式 - 可排序: $(...).sortable();
总结: jquery ui中的很多API具有侵入性:
通常都要引入jquery ui附带的css文件
有的还需要自己补充同名的样式类
要求: 对jquery ui不但要知道表面现象，更要知道Element中的变化原理。
Widget: 小部件: (小重点)
Accordion(手风琴部件)
何时: 节约页面空间
如何使用:
引入: jquery-ui.css
HTML: 父元素>标题+内容div
js:$(父元素).accordion();AutoComplete(自动完成)
何时: 避免重复输入,减少键入次数
如何:
html: input文本框
js: 一个保存所有备选向的数组
$(文本框).autocomplete({source:数组})datepicker:（日期选择框）
如何使用:
html: input文本框
js中: $(文本框).datepicker({dateFormat:'yyyy年mm月dd日'})
vs h5中<input type="date"...
h5有兼容性问题，且不能修改样式dialog:对话框:
为什么: BOM中的alert,confirm,prompt样式死板，无法定制
何时: 今后，只要弹窗，都用dialog部件
如何:
html中:定义外层元素，包含提示信息
其中外层元素要定义title属性
title属性会出现在对话框的左上角
js:(...).dialog({
autoOpen:false,//默认隐藏
buttons:[
{text:"文本",click:function(){this->dialog}},//按钮
...
]
});
打开:(...).dialog("close");
按钮部件: $(button/input/a).button();
tabs: 标签页:
如何:
html: 父级div>标签页ul>li>a href="#id"
内容页div#id
说明: li>a的href中的#id是为了匹配div的#id
js: $(父元素).tabs();tooltip: 工具提示
为什么: 普通的title属性，浏览器之前有不一致
何时: 只要希望所有浏览器统一title提示的样式时
如何: tooltip，必须应用到document上
