jQuery回调函数的定义及用法实例


Posted in Javascript onDecember 23, 2014

本文实例讲述了jQuery回调函数的定义及用法。分享给大家供大家参考。具体分析如下:

jQuery代码中对回调函数有着广泛的应用,对其有精准的理解是非常有必要的,下面就通过实例对此方法进行简单的介绍。

代码实例如下:

利用回调函数,当div全部隐藏之后弹出一个提示框。

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").slideUp(2000,function(){alert("隐藏完毕")}); 

  }) 

}) 

</script>

</head>

<body>

<div></div>

<button>点击查看效果</button>

</body>

</html>

上面的代码运行非常良好,很有次序。在很多实际应用中往往希望让代码完成某个动作以后再去做另一个动作。
代码貌似应执行的效果应该和上面代码是一样的,但是运行结果且并非我们所预料,而是先弹出提示框,然后再隐藏div元素。这并不是说slideUp()没有开始执行。

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").slideUp(2000); 

    alert("隐藏完毕"); 

  }) 

}) 

</script>

</head>

<body>

<div></div>

<button>点击查看效果</button>

</body>

</html>

下面简单通俗的总结一下什么是回调函数。看下面这段代码:

function a(){alert("我是一个函数")}

a();

以上是最常用的调用函数的方式,用函数的实现直接调用,而回调函数却不是这样的,它是将自己的地址作为参数传递给另一个函数,当发生特定的事件的时候就会使用作为参数传递过来的回调函数地址来调用回调函数。就拿上面使用回调函数的那个代码来说,它是把function函数的地址作为参数传递给slideUp()方法,当slideUp()动作完成之后,就会通过传过来的地址参数调用function函数。

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
使用js简单实现了tree树菜单
Nov 20 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
jQuery中odd选择器的定义和用法
Dec 23 #Javascript
浅析javascript 定时器
Dec 23 #Javascript
JavaScript中自定义事件用法分析
Dec 23 #Javascript
jQuery中even选择器的定义和用法
Dec 23 #Javascript
javascript实现依次输入input自动定焦
Dec 23 #Javascript
使用原生JS实现弹出层特效
Dec 22 #Javascript
jQuery基础知识小结
Dec 22 #Javascript
You might like
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
电焊工工作岗位职责
2014/02/06 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
Jsonp劫持学习
2021/04/01 PHP
在redisCluster中模糊获取key方式
2021/07/09 Redis