jQuery定义插件的方法
更新时间：2015年12月18日 10:01:12 投稿：mrr
有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。其实你只是了解一点皮毛，并不知道其中的道理，下面通过本篇文章给大家介绍jquery定义插件的相关知识，感兴趣的朋友一起学习吧
有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人，直到有一次公司里的技术交流，我才改变了自己对自己的看法。
扩展jquery的时候。最核心的方法是以下两种：
$.extend(object) 可以理解为jquery添加一个静态方法
$.fn.extend(object) 可以理解为jquery实例添加一个方法
$.extend(object)
例子：
/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun: function () { alert("执行方法一"); } });//定义
$.fun();//调用
$.fn.extentd(object)
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun: function () { alert("执行方法"); } });
$(this).fun();
//等同于
$.fn.fun = function () { alert("执行方法三"); }
$(this).fun();
定义jquery插件的基本结构
1． 定义作用域：
为插件定义一个私有作用域。外界代码不能直接访问插件内部。插件内部代码不受外界干扰，也不会污染到全局变量。
//step 定义JQuery的作用域
(function ($) {
})(jQuery);
2. 为插件添加扩展方法：
//step01 定义JQuery的作用域
(function ($) {
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
}
})(jQuery);
3. 设置默认值：
//step 定义JQuery的作用域
(function ($) {
//step-a 插件的默认值属性
var defaults = {
prevId: ‘prevBtn‘,
prevText: ‘Previous‘,
nextId: ‘nextBtn‘,
nextText: ‘Next‘
//……
};
//step 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
}
})(jQuery);
其中：var options = $.extend(defaults, options)的含义了。表示 options 去覆盖了defaults的值，并把值赋给了options。
在插件环境中，就表示用户设置的值，覆盖了插件的默认值；如果用户没有设置默认值的属性，还是保留插件的默认值。
4. 支持jquery选择器：
//step 定义JQuery的作用域
(function ($) {
//step-a 插件的默认值属性
var defaults = {
prevId: ‘prevBtn‘,
prevText: ‘Previous‘,
nextId: ‘nextBtn‘,
nextText: ‘Next‘
//……
};
//step 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step 支持JQuery选择器
this.each(function () {
});
}
})(jQuery);
5 ．支持JQuery的链接调用：
为了能达到链接调用的效果必须要把循环的每个元素return
//step 定义JQuery的作用域
(function ($) {
//step-a 插件的默认值属性
var defaults = {
prevId: ‘prevBtn‘,
prevText: ‘Previous‘,
nextId: ‘nextBtn‘,
nextText: ‘Next‘
//……
};
//step 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step 支持JQuery选择器
//step 支持链式调用
return this.each(function () {
});
}
})(jQuery);
6. 插件里的方法：
在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。
//step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: ‘prevBtn‘,
prevText: ‘Previous‘,
nextId: ‘nextBtn‘,
nextText: ‘Next‘
//……
};
//step06-a 在插件里定义方法
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
}
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return this.each(function () {
//step06-b 在插件里定义方法
showLink(this);
});
}
})(jQuery);
通过以上内容给大家介绍了jQuery定义插件的方法，希望大家喜欢。
您可能感兴趣的文章:
相关文章
Checbox的操作包括已选、未选、判断等等，下面有个不错的示例，使用jquery完成，感兴趣的朋友可以参考下2013-11-11
这里是本人学习jQuery Mobile的过程，现在将学习过程中的实例一一展现出来，希望能帮到更多的新手。本系列中实例都经过了本人的亲自测试。2016-01-01
以下为myeclipse安装jQuery插件的安装步骤，需要的朋友可以参考下。2011-03-03
最近，有需要做一个动态的给table，添加行，用了点时间，算是做成了。已测试过，但如果发现有什么bug，可以留言，欢迎拍砖。大家一起进步。2011-03-03
这篇文章与大家分享的是10款非常棒的 jQuery 幻灯片插件，使用这些插件可以帮助你在网站中加入非常吸引人的幻灯片效果，另外这些插件还有制作教程。2011-06-06
这篇文章主要介绍了使用jquery插件qrcode生成二维码的方法，需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了jquery easyUI中ajax异步校验用户名，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了jQuery内容过滤选择器用法,结合实例形式分析了jQuery中使用contains、empty、has、parent等进行内容过滤的操作技巧,需要的朋友可以参考下2016-09-09
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
json作为一种轻量级的数据交换格式，在前后台数据交换中占据着非常重要的地位。Json的语法非常简单，采用的是键值对表示形式,本文给大家介绍SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的，对spring mvc ajax json相关知识感兴趣的朋友一起学习吧2015-12-12
如果文档中某一个元素多余，那么应将其删除。jQuery提供了两种删除节点的方法，remove()方法和empty()方法下面为大家详细介绍下2014-01-01
最新评论