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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
jQuery实现的form转json经典示例
2017/10/10 jQuery
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
玩转python爬虫之URLError异常处理
2016/02/17 Python
python线程池threadpool实现篇
2018/04/27 Python
python2.7实现爬虫网页数据
2018/05/25 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
2019年Java 最常见的 面试题
2016/10/19 面试题
2019年分享net面试的经历和题目
2016/08/07 面试题
Windows和Linux动态库应用异同
2016/04/17 面试题
Python里面search()和match()的区别
2016/09/21 面试题
cf战队收人广告词
2014/03/14 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
开学典礼校长致辞
2015/07/29 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
python四种出行路线规划的实现
2021/06/23 Python
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android