正课:
1. 事件
2. 动画
3. 类数组对象操作
4. 添加自定义API
1. 事件:
1.页面加载后执行:
1.仅DOM内容加载后自动触发:
仅需要等待: html和js
DOMContentLoaded
何时: 页面初始化时，所有不依赖css和图片的功能(事件绑定)，都应在DOMContentLoaded中提前执行
问题: 兼容性:
$(document).ready(function(){ ... })
简化: $().ready(function(){ ... })
更简化: $(function(){ ... })
2.等待全部页面内容加载完才执行
包括: html,
css, js, 图片
window.onload=function(){...}
何时: 所有依赖css和图片的功能，必须在onload中执行
问题: 以赋值方式添加处理函数
解决: $(window).load(function(){... })
鄙视: jQuery中$的原理: 4件事:
1.直接封装DOM元素为jQuery对象
2.查找DOM元素，并封装为jQuery对象
当选择器简单时，首选按HTML查找，效率高
当选择器复杂时，首选按选择器查找，易用性好
3.用HTML片段创建新元素
4. DOM内容加载后提前执行一项任务
2.鼠标事件:
mouseover mouseout
问题: 进入子元素，也会反复触发父元素上的事件，效率低
解决:mouseenter mouseleave代替
如果同时绑定mouseenter和mouseleave
还可简写: .hover(fun1,fun2)
更简化: 如果hover中两个函数可统一为一个函数:
.hover(fun) fun即给enter，又给leave
3.模拟触发:
$elem.trigger("事件名")
更简化: $elem.事件名()
2. 动画:
简单动画: 固定的三种效果:
显示隐藏: .show(ms) .hide(ms) .toggle()
上滑下滑: .slideUp() .slideDown() .slideToggle()
淡入淡出: .fadeIn() .fadeOut() .fadeToggle()
问题:
1.用定时器实现的！效率不如css的
2.效果是在js中写死的，不便于维护
尽量少用!
特例: .show() .hide()其实是display
所以，可用于代替display
万能动画: 对任意css属性引用动画效果
$elem.animate({
css属性:目标值,
... : ...
},ms)
强调: 只支持单个数值的属性
排队和并发:
1.并发: 多个css属性同时变化
放在一个animate中的多个css属性，默认并发执行
2.排队: 多个css属性先后依次变化
对一个元素先后调用多个动画API，则排队执行
调用动画API其实不是立刻执行动画，只是将动画临时加入队列而已。
动画播放后自动执行:
每个动画API，都有第二个函数参数，函数会在动画播放后，自动执行!
停止动画: .stop()
问题: 只能停止当前一个动画，队列中后续动画依然继续执行
解决: .stop(true)清空队列
:animated选择器: 可判断或选择正在播放动画的元素
3. 类数组对象操作:
$(...).each(function(i,elem){... })
$.each(数组/类数组对象,function(i,elem){ ... })
$(...).index(elem)
如果在同一父元素下查找子元素:
$(elem).index();
4. 添加自定义API:
网友评论