JQUERY-事件-动画-类数组对象-添加自定义API

正课:

1. 事件:

2. 动画:

3. 类数组对象操作:

4. 添加自定义API:

1. 事件:

1. 页面加载后执行: 2个时机

1. DOM内容加载完成: 仅包括html, js

DOMContentLoaded

何时: 如果不依赖css和图片的初始化操作(比如,事件绑定)，都应该放在DOMContentLoaded中提前执行，让用户可以不必等待图片和css，就可提前使用

如何: $(document).ready(function(){

... ...

})

简化: $().ready(function(){

更简化: $(function(){ ... });

鄙视: $的原理:

1. 查找并封装DOM元素

如果选择器简单，使用的是按HTML查找

如果选择器复杂，才使用querySelectorAll

2. 直接封装现有DOM元素

3. 创建新元素

4. 绑定DOM内容加载提前执行的处理函数

2. 整个页面加载完成: 包括: html, js, css, 图片 ....

window.onload=function(){ ... }

何时: 必须依赖css或图片的行为，必须放在onload中

问题: 赋值方式绑定事件，只能绑定一个处理函数，后绑定会把先绑定的覆盖掉

解决: $(window).load(function(){ ... })

2. 鼠标事件:

mouseover  mouseout

问题: 进出子元素，也会频繁触发父元素上的处理函数

解决: mouseenter   mouseleave

优点: 即使频繁进出子元素，也不会反复触发父元素的处理事件

更简化: 如果同时绑定enter和leave，就可以只绑定hover

.hover( //相当于同时绑enter和leave

function(){ ... }, //给enter

function(){ ... } //给leave

)

更简化: 如果两个处理函数可统一为一个函数

.hover(

function(){ ... } //即给enter，又给leave

)

3. 模拟触发:

$elem.trigger("事件名")

可简写为: $elem.事件名();

2. 动画:

1. 简单动画: 3组效果:

显示隐藏: .show([ms])   .hide([ms])    .toggle([ms])

强调: .show()/.hide() 如果不加参数，默认是display:block/none，不带动画效果——推荐

上滑下滑: .slideUp(ms)   .slideDown(ms)    .slideToggle(ms)

淡入淡出: .fadeIn()      .fadeOut()     .fadeToggle()

原理: 用js的定时器修改的内联样式:

问题: 1. 效率不如css的transition

2. 写死的效果，不可维护

2. 万能动画: 可对多数css属性选择应用动画效果

$elem.animate({

css属性名: 目标值,

... : ...

},ms)

强调: 只支持单个数值的css属性

排队和并发:

1. 并发: 多个css属性，同时变化

如何: 在一个animate内的多个css属性，默认并发

2. 排队: 多个css属性，排队先后变化

如何: 对一个元素，先后调用多个animate，则排队执行

其它动画API，也有排队效果。

本质: 调用动画API，不是立刻启动动画的意思。只是将动画加入队列而已。

动画播放后执行:

每个动画API的最后一个参数，都是一个回调函数，会在动画播放后自动执行!

停止动画: .stop()

问题: 默认只能停止队列中当前正在播放的一个动画，后续动画依然执行

解决: .stop(true) 清空队列

选择器: :animated  选择或判断一个正在播放动画的元素

延迟执行: .delay(ms)

3. 类数组对象操作:

each: 对类数组对象中每个元素执行相同操作

2种用法:

1. 仅遍历jQuery对象中的每个DOM元素

$(...).each(function(i,elem){

//i 当前位置

//elem 当前元素对象

})

2. 可对所有索引数组和类数组对象，提供遍历操作

$.each(arr/类数组对象, function(i,elem){

... ...

})

鄙视: $(...).each()   vs  $.each()

其实就是实例方法和静态方法的比较

index: 在数组中查找一个指定元素的位置

var i=$(所有元素).index(要找的元素);

简写: 如果在同一个父元素下找直接子元素的位置

$(子元素).index()

4. 添加自定义方法:

3步:

1. 验证是否先引入了jQuery

2. 验证jQuery的原型对象中是否包含该方法

3. 向jQuery的原型对象中添加新方法

this->$( ... )  不用$(this)封装!