1.引言

今天在学习《jQuery基础教程》在学习编写插件的时候,书中说利用回调函数来当参数,会极大的提高程序的灵活性。对回调函数很陌生。研究了一下给的示例程序。感觉对回调函数有了基本的了解。记录下来,以备后用。

2.定义

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法。

3.代码

JS代码

 (function($){
$.fn.shadow = function(opts){
//定义的默认的参数
var defaults = {
copies: 5,
opacity:0.1,
//回调函数
copyOffset:function(index){
return{x:index,y:index};
}
};
//将opts的内容合并到default中。
var options = $.extend(defaults,opts);
return this.each(function(){
var $originalElement = $(this);
//设置参数对象
for(var i=0;i<options.copies;i++)
{
19 var offset = options.copyOffset(i);
$originalElement
.clone()
.css({
position:'absolute',
left:$originalElement.offset().left + offset.x,
top:$originalElement.offset().top + offset.y,
margin:0,
zIndex:-1,
//设置参数对象
opacity:options.opacity
})
.appendTo('body');
}
});
};
})(jQuery);
$(document).ready(function(){
$('h1').shadow({
copies:5,
copyOffset:function(index){
return {x:-index,y:-2 * index};
}
});
});

4.分析

通过这段代码调试的时候进入的顺序,便可理解回调函数的机制。通过对黄背景的四段代码加入断点。程序将会以以下的顺序运行

39:先跑第39行,当DOM加载完毕后运行了shadow(),跑完39行并不会直接跑40行。而是直接调到了shadow()函数定义的地方。在这里只是声明了copyOffset的函数指针。

2:这时候查看opts里面的内容Object { copies=5, copyOffset=function()}从这里可以看出来copyOffset只是一个function(),

8:开始走默认参数的copyOffset,与39行一样,不会直接进入回调函数里面的内容。

19:走到这里时,需要将对CopyOffset发出请求并传入了i作为参数。这时候i就是回调函数的参数index。

40:由于13行的”var options = $.Extend(defauflts,opts)”。opts的属性会覆盖掉default的属性,所以不会走9行默认的参数中的回调函数的执行方法,而是走了第40行的回调函数的方法。

5.总结

从上面的分析可以看出,回调函数在参数中声明时,相当于只是声明了一个委托。等到用到这个参数的时候才会真正的执行回调函数里面的内容。

6.附html代码

 <!DOCTYPE html>

 <html lang="en">
<head>
<meta charset="utf-8">
<title>Developing Plugins</title> <link rel="stylesheet" href="08.css" type="text/css" />
<link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" /> <script src="jquery.js"></script>
<script src="jquery-ui-1.10.0.custom.min.js"></script>
<script src="08.js"></script>
</head>
<body>
<div id="container">
<h1>Inventory</h1>
<table id="inventory">
<thead>
<tr class="two">
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr class="two" id="sum">
<td>Total</td>
<td></td>
<td></td>
</tr>
<tr id="average">
<td>Average</td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
<td>4</td>
<td>2.50</td>
</tr>
<tr>
<td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
<td>12</td>
<td>4.32</td>
</tr>
<tr>
<td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>
<td>14</td>
<td>7.89</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Html代码

jQuery回调函数的更多相关文章

  1. jQuery 回调函数

    jQuery(回调函数) 此函数的作用将callback参数以函数的定义形式,在页面onload的时候进行调用.相当于$(document).ready(callback). <script t ...

  2. 一个简单的jQuery回调函数例子

    jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先 ...

  3. js/jquery 回调函数的定义方法

    基本写法: 带参数的回调函数 以上回调函数,直接传入function作为参数,同样,还可以传入json对象作为参数...如下. 该方法的优势是可以定义多个回调函数....类似$.ajax回调函数中的s ...

  4. jquery回调函数的一个案例

    1.引言 今天在学习<jQuery基础教程>在学习编写插件的时候,书中说利用回调函数来当参数,会极大的提高程序的灵活性.对回调函数很陌生.研究了一下给的示例程序.感觉对回调函数有了基本的了 ...

  5. jQuery的deferred对象详解 jquery回调函数

    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery的 ...

  6. jquery回调函数callback的使用

    回调函数必须是全局函数或者静态函数,不可定义为某个特定的类的成员函数 callback函数在当前动画100%完成之后执行 $("p").hide(1000); alert(&quo ...

  7. 通过回调函数的理解来进一步理解ajax及其注意的用法

    一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...

  8. jquery提交表单,回调函数

    1.使用jquery 绑定事件,执行以下代码,提交单并使用回调函数 $form.serialize():serialize()序列号表单参数 var $form = $("#form&quo ...

  9. JQUERY操作html--获取和设置内容、属性、回调函数

    一:jQuery - 获取内容和属性 1.获得内容 - text().html() 以及 val() text() - 返回所选元素的文本内容 html() - 返回所选元素的内容(包括 HTML 标 ...

随机推荐

  1. webdriver实用指南迁移至gitbbok并改名为selenium webdriver从入门到提高

    背景 几年前我写了一本关于selenium webdriver的小册子,主要讲了一些selenium在进行测试过程中会遇到的场景以及解决方案,陆陆续续在github上收到了100+的star,在这里我 ...

  2. LCLFramework框架之数据门户

    LCLFramework框架之数据门户职责 形成统一的数据访问方式. LCLFramework框架之数据门户设计 数据门户分为客户端/服务端.    LCLFramework框架之数据门户设计代码 数 ...

  3. Hibernate缓存原理与策略 Hibernate缓存原理:

    Hibernate缓存原理: 对于Hibernate这类ORM而言,缓存显的尤为重要,它是持久层性能提升的关键.简单来讲Hibernate就是对JDBC进行封装,以实现内部状态的管理,OR关系的映射等 ...

  4. sql优化之(DMV)

    原文地址:http://technet.microsoft.com/zh-cn/library/bb838723.aspx Microsoft SQL Server 2005 提供了一些工具来监控数据 ...

  5. 如何通过XShell传输文件

    转载孟光孟叔的博客:  https://learndevops.cn/index.php/2016/06/14/how-to-transfer-file-using-xshell xshell目前最好 ...

  6. 构建基于WinRT的WP8.1 App 02:数据绑定新特性

    基于WinRT的Windows Phone 8.1以及Windows 8.1中Xaml数据绑定增加了一些新特性. FallBackValue属性:FallBackValue在绑定的值属性值不存在时,可 ...

  7. javascript中apply()方法解析-简单易懂!

    今天看到了js的call与apply的异同,想着整理一下知识点,发现了一篇好文章,分享过来给大家,写的非常好! 参考: http://www.cnblogs.com/delin/archive/201 ...

  8. ops中set_sysclk set_clkdiv set_pll详解

    在看Alsa soc驱动的是时候,在snd_soc_dai_driver.ops中有3个字段 .set_sysclk .set_pll .set_clkdiv 开始的时候,总是晕头转向,感觉这3个回调 ...

  9. 64bit ubuntu 安装32bit的软件

    在64bit的系统上安装32bit的软件时,会提示: file not found or no such file. 此时只需要安装 sudo apt-get install libc6-dev-i3 ...

  10. Android View的加载过程

    大家都知道Android中加载view是从Activity的onCreate方法调用setContentView开始的,那么View的具体加载过程又是怎么的呢?这一节我们做一下分析. 首先追踪一下代码 ...