扩展jquery的时候。最核心的方法是以下两种:
$.extend(object) 可以理解为jquery添加一个静态方法
$.fn.extend(object) 可以理解为jquery实例添加一个方法
$.extend(object)
例子:
1 2 3 4 5 6 7 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
定义jquery插件的基本结构
1. 定义作用域:
为插件定义一个私有作用域。外界代码不能直接访问插件内部。插件内部代码不受外界干扰,也不会污染到全局变量。
1 2 3 4 5 |
|
2. 为插件添加扩展方法:
//step01 定义JQuery的作用域 (function ($) { //step02 插件的扩展方法名称 $.fn.easySlider = function (options) { } })(jQuery);
3. 设置默认值:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
其中:var options = $.extend(defaults, options)的含义了。表示 options 去覆盖了defaults的值,并把值赋给了options。
在插件环境中,就表示用户设置的值,覆盖了插件的默认值;如果用户没有设置默认值的属性,还是保留插件的默认值。
4. 支持jquery选择器:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
5 .支持JQuery的链接调用:
为了能达到链接调用的效果必须要把循环的每个元素return
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
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);