jQuery事件机制，动画效果，工具和其他操作

Posted 2020-12-31 wanglecn

jQuery事件机制

1 事件操作

1.1 页面载入事件

$(document).ready(function(){
  // 在这里写你的代码...
});
或者
$(function($) {
  // 你可以在这里继续使用$作为别名...
});

1.2 事件绑定

on(eve,[sel],[data],fn)      1.7+ 在选择元素上绑定一个或多个事件的事件处理函数
bind(type,[data],fn)         3.0- 请使用on()
one(type,[data],fn)            为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

1.3 解除事件绑定

off(eve,[sel],[fn])         1.7+ 在选择元素上移除一个或多个事件的事件处理函数
unbind(t,[d|f])                3.0- 请使用off()

1.4 触发事件

trigger(type,[data])         在每一个匹配的元素上触发某类事件

triggerHandler(type, [data]) 
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡
这个方法的行为表现与trigger类似，但有以下三个主要区别：
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。

1.5 事件委派

live(type,[data],fn)    1.7-
die(type,[fn])            1.7-
delegate(s,[t],[d],fn)    3.0-
undelegate([s,[t],fn])    3.0-
全部移除了，请使用 on()

$(document).on(‘click‘, ‘button‘, fn)

1.6 事件切换

hover([over,]out)           一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
toggle([spe],[eas],[fn])   1.9-用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件

2 事件列表

blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)         
    当元素获得焦点时，触发 focusin 事件。 focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况

focusout([data],fn)
    当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
    当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave([[data],fn])
    当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])

3 事件对象

属性

eve.currentTarget        在事件冒泡阶段中的当前DOM元素
eve.data                当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind
eve.delegateTarget        1.7+ 当currently-called的jQuery事件处理程序附加元素
eve.namespace            当事件被触发时此属性包含指定的命名空间
eve.pageX                鼠标相对于文档的左边缘的位置
eve.pageY                鼠标相对于文档的顶部边缘的位置
eve.relatedTarget        在事件中涉及的其它任何DOM元素
eve.result                这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined
eve.target                最初触发事件的DOM元素
eve.timeStamp            返回事件触发时距离1970年1月1日的毫秒数
eve.type                事件类型
eve.which                针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮

方法

eve.preventDefault()            阻止默认事件行为的触发
eve.isDefaultPrevented()        根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值
eve.stopPropagation()            防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
eve.isPropagationStopped()        检测 event.stopPropagation() 是否被调用过
eve.stopImmediatePropagation()     阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上
eve.isImmediatePropagation()     检测 ev

ent.stopImmediatePropagation() 是否被调用过

动画效果

1. 基本效果

show([s,[e],[fn]])        显示隐藏的匹配元素
hide([s,[e],[fn]])        隐藏显示的元素
toggle([s],[e],[fn])    如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

参数详解

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn        : 在动画完成时执行的函数，每个元素执行一次。

2. 滑动效果

slideDown([s],[e],[fn])        通过高度变化（向下增大）来动态地显示所有匹配的元素
slideUp([s,[e],[fn]])        通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideToggle([s],[e],[fn])    通过高度变化来切换所有匹配元素的可见性

参数详解

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn        : 在动画完成时执行的函数，每个元素执行一次。

3 淡入淡出效果

fadeIn([s],[e],[fn])        通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([s],[e],[fn])        通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([s,[e],[fn]])    通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo([[s],o,[e],[fn]])    把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

参数详解

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn        : 在动画完成时执行的函数，每个元素执行一次。

opacity    : (用户fadeTo)一个0至1之间表示透明度的数字。

4 自定义动画

animate(p,[s],[e],[fn])

参数详解

params    : 一组包含作为动画属性和终值的样式属性和及其值的集合
speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing    : 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn        : 在动画完成时执行的函数，每个元素执行一次。

5 动画控制

stop([c],[j])        停止所有在指定元素上正在运行的动画
delay(d,[q])        设置一个延时来推迟执行队列中之后的项目
finish([queue])        停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

6 设置

//关闭页面上所有的动画
jQuery.fx.off = true;

工具和其他操作

1 jQuery 对象访问

each(callback)                遍历jquery dom
size()                        1.8- 返回dom集合中的个数 同length
length                        返回dom集合中的个数
selector                    返回选择器
context                        返回原生js dom
get([index])                获取dom集合中一个
index([selector|element])    索引值
toArray()                    转为纯数组

2 数组和对象操作

$.each(object,[callback])        遍历数组 对象
$.extend([d],tgt,obj1,[objN])    合并对象 合并到第一个参数
$.grep(array,fn,[invert])        过滤数组
$.makeArray(obj)                把类数组对象变为数组
$.map(arr|obj,callback)            操作数组的每一单元
$.inArray(val,arr,[from])        判断值是否在数组中
$.merge(first,second)            合并数组
$.unique(array)                    去重
$.parseJSON(json)                解析json
$.parseXML(data)                解析xml

3 类型检测

$.contains(c,c)            判断一个元素是否是另一个元素的后代吗元素
$.type(obj)                判断类型
$.isarray(obj)            是否为数组
$.isFunction(obj)        是否是function
$.isEmptyObject(obj)    是否为空对象
$.isPlainObject(obj)    是否为纯粹的对象
$.isWindow(obj)            是否是window对象
$.isNumeric(value)        1.7+是否是number

4 其他操作

$.trim(str)                    去除左右两边的空格
$.param(obj,[traditional])    把对象或数组 转为 特殊格式的字符串 序列化