[jQuery] 事件和动画详解


Posted in jQuery onMarch 05, 2019

1. 事件

 1.1 加载DOM

在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。在JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法。$(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的。window.onload方法是在网页中所有的元素完全加载到浏览器后才执行,而$(document).ready()方法注册的事件处理程序,在DOM完成就绪时就可以被调用。

由于在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。要解决这个问题,可以使用jQuery中另一个关于页面加载的方法load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有内容加载完毕后触发,例如:

$(window).load(function(){
});

每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行。它也可以简写为:

$(function(){
});

另外,$(document)也可以简写为$(),例如:

$().ready(function(){
}); 

1.2 事件绑定

在文档装载完成后,如果要为元素绑定事件来完成某些操作,可以使用bind()方法来对匹配元素进行特定事件的绑定,例如:

bind(type[,data],fn);

第一个参数是事件类型,包括:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。

第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。

第三个参数则是用来绑定的处理函数。

例如:

$("#mydiv").bind("click",function(){
 $(this).next("div.content").show();
});

与ready()方法一样,bind()方法也可以多次调用。像click、mouseover和mouseout这类事件,在程序中经常用到,jQuery为此也提供了一套简写方法,例如:

$("#mydiv").mouseover(function(){
 $(this).next("div.content").show();
});

1.3 合成事件

jQuery有两个合成事件:hover()方法和toggle()方法。hover()方法的语法结构为:

hover(enter,leave);

hover()方法用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,会触发指定的第二个函数。

toggle(fn1,fn2,...fnN);

toggle()方法用于模拟鼠标连续单击事件,第一次单击元素,触发指定的第一个函数,当再次单击同一个元素时,则触发指定的第2个函数,以此类推,直到最后一个。

 1.4 事件冒泡

在页面上可以有多个事件,也可以多个元素响应同一个事件。由于IE-DOM和标准DOM实现事件对象的方式不同,在不同浏览器中获取事件对象比较困难。jQuery进行了相应的扩展和封装,从而使在任何浏览器中都能轻松获取事件对象,例如:

$("element").bind("click",function(event){
});

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行,在jQuery中提供了stopPropagation()方法来停止事件冒泡,例如: 

$("span").bind("click",function(event){
 var txt = $("#msg").html() + "<p>click!</p>";
 $("#msg").html(txt);
 event.stopPropagation();
});

网页中的元素有自己默认的行为,例如单击超链接后会跳转等。在jQuery中,提供了preventDefault()方法来阻止元素的默认行为,例如:

$("#button").bind("click",function(event){
 var txt = $("#msg").html() + "<p>click!</p>";
 $("#msg").html(txt);
 event.preventDefault();
});

如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。

 1.5 事件对象的属性

jQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使事件处理在各浏览器下都可以正常运行而不需要进行浏览器类型判断。常用的方法如下:

1) event.type(): 获取到事件的类型。

2) event.preventDefault(): 阻止默认的事件行为。

3) event.stopPropagation(): 阻止事件的冒泡。

4) event.target(): 获取到触发事件的元素。

5) event.relatedTarget(): 获取事件发生的相关元素。

6) event.pageX()/event.pageY(): 获取到光标相对于页面的x坐标和y坐标。

7) event.which(): 在鼠标单击事件中获取到鼠标的左、中、右键。

8) event.metaKey(): 键盘事件中获取<ctrl>键。

9) event.originalEvent(): 指向原始的事件对象。

 1.6 移除事件

unbind()方法可以用于删除元素的事件,语法结构如下:

unbind([type][,data]);

如果没有参数,则删除所有绑定的事件。如果提供了事件类型,则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参娄和,则只有这个特定事件处理函数才会被删除,例如:

$("#delAll").click()(
 $("#btn").unbind("click");
);

one()方法的结构与bind()方法类似,使用方法也与bind()方法相,语法结构如下:

one(type[,data],fn);

使用one()方法为元素帮定事件后,只在第一次触发时执行,之后毫无作用。

 1.7 模拟操作

有时需要通过模拟用户操作,来达到单击效果,可以使用trigger()方法完成,例如:

$("#btn").trigger("click");

也可以直接用简化写法click()来达到同样的效果。

trigger(type[,data])方法有两个参数,第二个参数是要传递给事件处理函数的附加数据,以数组形式传递。

trigger()方法触发事件后,会执行浏览器默认操作,例如:

$("input").trigger("focus");

以上代码不仅会触发focus事件,也会使input元素本身得到焦点,如果不想执行浏览器默认操作,可以使用另一个类似的方法triggerHandler()方法。

 2. 动画

 2.1 show()方法和hide()方法

show()方法和hide()方法是jQuery中最基本的动画方法。为一个元素调用hide()方法,会将该元素的display样式改为"none",例如:

$("#mydiv").hide();

当把元素隐藏后,可以使用show()方法将元素的display样式设置为先前的显示状态,例如:

$("#mydiv").show();

show()方法可以指定一个速度参数,例如,指定一个速度关键字"slow",例如:

$("#mydiv").show("slow");

运行该代码后,元素将在600毫秒内慢慢显示,其他的速度关键字还有"normal"和"fast",不仅如此,还可以为显示速度指定一个数字,单位是毫秒。

 2.2 fadeIn()方法和fadeOut()方法

与show()方法不同的时,fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定时间内降低元素的不透明度,直到元素完全消失。fadeIn()方法则相反,例如:

$("#mydiv").fadeOut();

2.3 slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为"none",当调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由下到上缩短隐藏,例如:

$("#mydiv").slideDown();

2.4 自定义动画方法animate()

如果需要采取一些高级的自定义动画来解决更多控制的问题,可以使用animate()方法来自定义动画,语法结构为:

animate(params,speed,callback);

params包含样式属性及值的映射,比如{property1:"value1",property2:"value2",...},speed是可选的速度参数,callback是在动画完成时执行的函数,例如:

$("#mydiv").animate({left:"+=500px"},300);

"+="符号或"-="符号即表示在当前位置累加或者累减。如果需要同时执行多个动画,可以写如下代码:

$("#mydiv").animate({left:"500px",height:"200px"},3000);

如果只想按顺序执行动画,只需把代码拆开即可,例如:

$("#mydiv").animate({left:"500px"},3000);
$("#mydiv").animate({height:"200px"},3000);

或者:

$("#mydiv").animate({left:"500px"},3000).animate({height:"200px"},3000);

2.5 停止动画和判断是否处于动画状态

很多时候需要停止匹配元素正在进行的动画,需要使用stop()方法,语法结构为:

stop([clearQueue][,gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数,为Boolean值,clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画跳转到末状态。

在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致,解决方法是判断元素是否正处于动画状态,例如:

if(!$("#mydiv").is("animated")){
}

2.6 其他动画方法

jQuery中还有3个专门用于交互的动画方法:toggle(speed,[callback]),slideToggle(speed,[callback]),fadeTo(speed,opacity,[callback])。

toggle()方法可以切换元素的可见状态,例如:

$("#mydiv").click(function(){
 $(this).next("div.content").toggle();
});

slideToggle()方法通过高度变化来切换匹配元素的可见性,例如:

$("#mydiv").click(function(){
 $(this).next("div.content").slideToggle();
});

fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值,例如:

$("#mydiv").click(function(){
 $(this).next("div.content").fadeTo(600,0.2);
});

总结

以上所述是小编给大家介绍的[jQuery] 事件和动画详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
jQuery.parseJSON()函数详解
Feb 28 #jQuery
jQuery each和js forEach用法比较
Feb 27 #jQuery
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 #jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 #jQuery
You might like
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python使用matplotlib绘制热图
2018/11/07 Python
在Python中表示一个对象的方法
2019/06/25 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
护士自我鉴定怎么写
2014/02/07 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
员工离职感谢信
2015/01/22 职场文书
优秀大学生申请书
2019/06/24 职场文书
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server