jQuery定义插件的方法

有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法。

方法是以下两种:

$.extend(object) 可以理解为jquery添加一个静态方法

$.fn.extend(object) 可以理解为jquery实例添加一个方法

$.extend(object)

例子:

rush:js;"> /* $.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. 定义作用域:

插件定义一个私有作用域。外界代码不能直接访问插件内部。插件内部代码不受外界干扰,也不会污染到全局变量

rush:js;"> //step 定义JQuery的作用域 (function ($) { })(jQuery);

2. 为插件添加扩展方法

rush:js;"> //step01 定义JQuery的作用域 (function ($) { //step02 插件的扩展方法名称 $.fn.easySlider = function (options) {

}
})(jQuery);

3. 设置认值:

rush:js;"> //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选择器:

rush:js;"> //step 定义JQuery的作用域 (function ($) { //step-a 插件认值属性 var defaults = { prevId: ‘prevBtn‘,options); //step 支持JQuery选择器 this.each(function () { }); } })(jQuery);

5 .支持JQuery的链接调用

为了能达到链接调用效果必须要把循环的每个元素return

rush:js;"> //step 定义JQuery的作用域 (function ($) { //step-a 插件认值属性 var defaults = { prevId: ‘prevBtn‘,options); //step 支持JQuery选择器 //step 支持链式调用 return this.each(function () { }); } })(jQuery);

6. 插件里的方法

插件里定义的方法,外界不能直接调用,我在插件里定义的方法也没有污染外界环境。

rush:js;"> //step01 定义JQuery的作用域 (function ($) { //step03-a 插件认值属性 var defaults = { prevId: ‘prevBtn‘,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定义插件方法,希望大家喜欢。

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...