0 |  收藏 jQuery，扩展，函数，回调，基础，callback   [摘要]： 今天我们来聊聊如何基于jQuery扩展一个方法且支持回调效果。 我们要扩展的方法主要是想实现html内容的插入，且执行完毕过后执行回调函数进行提示。 一、jQuery方法的扩展 jQuery方法的扩展一般都是对象级别的扩展了的，扩展方法如下所示： $.fn.extend({ InsertHtml: function () { $(this).each(function () { $(this).html("我是通过jQuery的扩展成员函数实现的功能!"); }); } }); 我们通过$.fn对...

今天我们来聊聊如何基于jQuery扩展一个方法且支持回调效果。

我们要扩展的方法主要是想实现html内容的插入，且执行完毕过后执行回调函数进行提示。

一、jQuery方法的扩展

jQuery方法的扩展一般都是对象级别的扩展了的，扩展方法如下所示：

 

$.fn.extend({ InsertHtml: function () { $(this).each(function () { $(this).html("我是通过jQuery的扩展成员函数实现的功能!"); }); } });

 

我们通过$.fn对象进行扩展方法，也可以通过如下的方式进行扩展：

 

(function($){ $.fn = InsertHtml: function () { $(this).each(function () { $(this).html("我是通过jQuery的扩展成员函数实现的功能!"); }); }; }(jQuery);

 

之所以用到了$(this).each()是为了防止调用此方法的对象是一个列表，比如通过class或者targetName得到的对象列表。

 

方法调用方式：

 

$(".txt").InsertHtml();

 

倘若页面上有多个html标签的class为txt，那么调用上述方法过后将会在每一个标签内写入函数内的那段文本信息。

 

二、回调方法

如果我们要让上述方法支持回调，我们需要在函数内追加一个参数callback（当前这个可以自行定义）

代码如下所示：

 

$.fn.extend({ InsertHtml: function (callback) { $(this).each(function () { $(this).html("我是通过jQuery的扩展成员函数实现的功能!"); }); //回调函数不为空 则执行回调 if (callback) { return callback(); } } });

 

不难看出函数做了一个参数，且内部多有一个if的判断机制

 

那么如何调用和执行回调呢？示例代码如下所示：

 

$(function () { $(".txt").InsertHtml(function () { alert("文本信息插入完毕!"); }); });

 

也不难看出回调与不回调在调用上会在方法内声明好回调函数，这个函数你也可以当做一个参数来用，也就是将函数分离出去，形如：

 

function ShowMsg() { alert("数据设置完毕!"); } $(function () { $(".txt").InsertHtml(ShowMsg); });

 

jQuery函数的扩展和支持回调，你学会了吗？

jQuery，扩展，函数，回调，基础，callback    本文为原创型文章转载请尊重他人劳动成果并注明出处：?978  可以扫描本站该博客文章的QR二维码进行访问