JQ 3
1. 事件:
模拟触发
页面加载后执行
hover
2. 动画:
1. 事件:
模拟触发: 用代码模拟触发另一个元素的事件
如何: $(...).trigger("事件名")
页面加载后执行: 鄙视题: onload vs $(document).ready()
页面加载过程:
.html -> .css
-> .js↓
DOMContentLoaded
DOM内容(.html和js)加载完成
-> .图片 ↓
loaded: 所有页面内容加载完成
通常: DOMContentLoaded先于loaded
何时: 如果一些操作(事件绑定)不需要等待所有内容加载完成，就可提前执行时，都要在DOMContentLoaded中执行。
为什么: 让用户无需等待css和图片加载，就可提前使用功能
如何:
DOMContentLoaded: $(document).ready(function(){...})
$().ready(function(){...})
$(function(){...})
实际开发中，只要将script放在body结尾，默认就在DOM内容加载后执行。
Loaded: window.onload=function(){...}
特殊事件: hover: 其实是一对儿mouseover和mouseout的组合
何时: 只要对一个元素同时绑定鼠标进入和鼠标移出事件时
就可用hover简化绑定
如何:
$(...).mouseover(function(){...})
$(...).mouseout(function(){...})
可简写为:
$(...).hover(
function(){...}, //处理over
function(){...} //处理out
)
如果进出的操作可统一为一个函数:
$(...).hover(function(){...}); 进出都执行同一函数
2. 动画: (了解)
简单动画:
3种效果:
1. 显示和隐藏
$(...).show/hide/toggle() 立刻显示隐藏: display:none/block
$(...).show/hide/toggle(speed,easing,callback)
speed: "slow","normal", or "fast"
ms
callback:一个函数对象，在动画播放完，自动执行
2. 上下滑动 $(...).slideDown/slideUp/slideToggle(s,e,fn)
3. 淡入淡出 $(...).fadeIn/fadeOut/fadeToggle(s,e,fn)
万能动画: 控制任意css属性的在规定时间内均匀变化
何时: 只要控制多个css属性均匀变化时
如何: $(...).animate({//目标样式
css属性:值,
... : ... ,
}, speed, easing, callback)
//所有属性，从当前状态，同时均匀变化到指定的目标样式
问题: 只能对数值类型的css属性提供动画
比如: css3: transition: 可以提供背景颜色渐变的
jq: .animate()不支持颜色动画
动画的并发和排队:
并发: 多个属性同时修改:
1种: 在一次animate调用中同时修改多个css属性
排队: 多个动画，先后执行:
2种: 对同一个元素
1. 分两次调用animate，第二个animate必须在第一个animate执行后，才开始执行
2. 通过链式操作，先后调用animate，也是排队
停止动画: $(...).stop();
问题: 默认只能停止正在执行的一个动画
如果后续有排队的动画，依然会继续触发
解决: $(...).stop(true); //1. 停止当前动画，2. 清除队列
1. 类数组操作
2. jQueryUI
1. 类数组操作
类数组对象本来不能使用数组的任何API: 比如: forEach, indexOf
arr.forEach(function(val,i))
jQuery为类数组对象提供了专门的遍历/查找API
$(...).each(function(i[,elem])){
//对结果集合中每个元素执行相同操作
//this->elem->DOM->$(this)
}
var i=$(...).index(elem/$(elem)); //查找elem在结果集中的下标
鄙视题: 页面上多个按钮，点每个按钮提示点的是第几个（下标）
2. jqueryUI:
UI: User Interface
UI库: 完整的js,css组成的独立功能/效果的集合
jqueryUI: 是jquery官方出的UI库
基于jquery, 但是极简化
为什么: 实际开发中，很多功能(样式和行为)会反复使用
解决: 使用现成的UI库中的插件——复用
新技术: 上官网 -> DEMO/Start/Guide -> API Document
分三部分: Effects 动画效果
Interactions 交互组件
Widgets: 小部件
Effects动画效果:
基于jquery提供了更丰富的动画效果:
1. 为add/remove/toggleClass，添加动画效果:
jquery: add/remove/toggleClass默认没有动画，不能加时间
jquery-ui: 可以为add/remove/toggleClass添加时间
2. 为show/hide/toggle，添加了更多动效
3. 让.animate支持颜色动画
Interactions: 交互组件
1. $(...).draggable() 将找到的元素变为可拖拽
<ANY>
<title class="ui-dialog-titlebar"> 让标题变拖拽图标
2. $(...).selectable() 让目标元素可选中
<ul>
<li class="ui-selectee ui-selected"></li>
侵入性: API根据自身的需要，向元素默默添加class
有的class已经定义好，可直接使用
有的class需要使用者自行定义
3. $(...).sortable() 让目标元素可调整位置
<ul >
<li class="ui-sortable-handle ui-sortable-helper"
Widget: 小部件:
Accordion:
html:
<div>
<hn>
<div>
css:
js: $(...).accordion();
问题: 主题颜色是固定的
解决: 官网->主题画廊/颜色筒->先选择主题风格/定制风格->下载
