jQuery事件简化、模拟触发、hover、动画

事件绑定简化

绑定:
1
已废弃: $ (...).live("事件名",fn)        $(...).die("事件名",fn)
极端:将网页中所有事件集中绑定在document上。效率极低
终极简化:
1
2
3
4
5
$(...).on(...) 绑定        $(...).off(...)解绑
$(...).on("事件名",fn) -> 代替bind
$(...).on("事件名","selector",fn) -> 代替delegate
强调: on代替delegate,要事件名在前,选择器在后
解绑: $(...).off("事件名",["selector",]fn)

模拟触发

什么是:希望通过代码代替用户操作,触发元素的事件
1
2
$(...).trigger("事件名") 触发找到的元素上绑定的事件函数
$(...).事件名() 比如:$(form).submit();提交表单
总结:jQuery简化版事件处理函数两用:
1
$(…).事件名([fn])        有fn,则绑定事件;   没有fn,则模拟触发事件

我是图片

页面加载后自动执行

1、整个页面内容加载完成才触发 window.onload=function(){…}
HTML,CSS,JS,图片全部加载完成
2、DOM内容加载完成就触发 DOMContentLoaded : 有兼容性问题
仅HTML和JS加载并执行完成
准备工作包括: 事件绑定,DOM操作
DOM内容加载完成比整个页面加载完成提前触发
何时 :凡是对DOM的初始化操作,都要放在DOM内容加载完成时提前执行,不必等待整个页面加载完成
比如 :动态生成DOM内容和内容和事件绑定
如何jQuery
1
2
3
$(document).ready(function(){....})
简写: $().ready(function(){....})
再简写:$(function(){....}) 反复$()的fn,默认DOM内容加载后就提前执行
终极简化

只要放在body结尾的script中的代码,默认DOM内容加载后提前执行。

特殊的事件
hover = mouseover+mouseout
什么是:同时绑定两个事件:mouseover和mouseout
何时: 只要同时绑定 mouseover和mouseout时:
1
2
3
4
$(...).hover(
function(){...mouseover...},
function(){...mouseout...}
);
更简化: 如果能够将两个函数统一为一个函数,可简写为: $(…).hover(fn);,无论over还是out都执行相同操作。

$(“#target”).hover(function(){$(this).toggleClass(“hover”)})

动画

1. 简单动画: 3种固定效果

1. 显示/隐藏: $(…).show/hide/toggle();

问题:如果show/hide不给任何参数: display:none, 瞬间显示隐藏

解决:在参数中加入时间 直接添加毫秒数或者指定参数: speed: 1. 三档(“slow”,”normal”,”fast”)

问题:所有效果属性变化,都写死在jQuery源代码内部,无法按需求更改。

解决:1、少用简单动画 2、class+transition

2. 上滑/下滑:$(…).slideUp/slideDown/slideToggle();

3. 淡入/淡出:$(…).fadeIn/fadeOut/fadeToggle();

缺点: 效果写死在库函数中,无法维护!

解决: class+transition

所有动画API的最后一个参数,都可指定回调函数

1
2
$(...).show(speed,callback)
callback:在动画结束后自动执行,this->当前元素

2. 自定义动画——万能动画

什么是:可对任意数值类型的CSS属性执行动画效果

何时:只要希望对任意数值类型执行动画效果

1
2
3
$(...).animate({//目标样式
css属性:值, css属性:值, ...
},speed[easing,callback]);

其中:speed 是动画持续的总毫秒数

easing 是动画变化的效果 :linear swing

callback是动画结束后的回调函数,动画执行完再执行回调函数

不足: 只能对单个纯数字的属性值执行动画变化,不支持颜色动画

并发和排队

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

1. 放在同一个animate中的多个css属性都是并发变化

2. 同时给多个元素添加animate效果,不同元素调用的动画也是并发。

我是图片

排队: 每个css属性,先后逐个变化

先后调用的不同animate内的多个css属性时排队变化——动画队列

停止动画:$(…).stop();

问题: 默认仅停止队列中正在执行的当前动画,后续动画继续执行

解决: $(…).stop(true);//停止当前动画,清空队列

推迟执行:$(…).delay(ms).animate(…)

问题:如果停止动画时,会直接停止delay,后续动画继续执行。如果stop(true)则所有动画都停止

查找一个正在播放动画的元素 :animated

连续链式调用的多个animate的css属性是排队执行

练习: 为多个元素,有规律的指定属性值(属性值中可以写函数)

1
2
3
4
5
6
$(...).css("属性",function(i,val){//自动在每个元素上执行
i//自动获得当前元素的下标
val//当前元素的指定属性值
this//当前DOM元素...
return要修改给当前元素的属性的值
})

类数组对象的操作

类数组对象不是数组类型,无法使用数组的API

.size()->代替.length获得类数组对象中的元素个数

.get(i)->获得数组对象中i位置的元素

.each(fn)->相当于数组的forEach,对类数组对象中每个元素执行相同操作

1
2
3
其中:fn:function(i){ //i 当前元素的下标
this->当前DOM元素->$(this)->jQuery对象
}

.index()->在类数组对象中查找指定元素的下标位置。类似于indexOf函数

1
$("selector").index(DOM/$(...))

在满足selector的所有元素中找右侧DOM/JQ对象的位置——在左边的集合中找右边的对象

1
2
3
4
5
    $("selector1").index("selector2")
~~~
#### **在满足selector2的所有元素中找左侧selector1元素的位置——在右边的集合中找左边的对象**
~~~javascript
$("selector").index()

返回selector元素在其父元素下平辈子元素中的下标位置

我是图片
我是图片

文章作者: Coio
文章链接: http://yoursite.com/2018/07/03/jQuery事件简化、模拟触发、hover、动画/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶