实践jQuery插件开发

Posted on | In | Visitors

介绍

三种类型

  1. 封装对象方法的插件

    jQuery.fn.extend()

  2. 封装全局函数的插件

    jQuery.extend()

  3. 选择器插件

    jQuery.extend()

jQuery.extend()除了用于扩展jQuery对象（插件），还用于扩展已有的Object对象，即objN覆盖和合并target，一般用于设置默认参数，同时允许自定义参数覆盖。

1
jQuery.extend(target,obj1,......[objN])

插件的基本代码框架

1
2
3
4
5
;(function($){
	//这里写插件代码
})(jQuery);
// 插件内部的this指的jQuery对象
// 事件方法中的this值的是DOM对象

获取颜色或设置颜色插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
;(function($){
	// 多个插件
	$.fn.extend({
      	// 如果没有设置value则获取颜色，否则设置颜色
		"color":function(value){
			return this.css("color",value);
		}
      	// 另一个插件
      	"border":function(value){
			return this.css("border",value);
		}
	});
})(jQuery);

;(function($){
	// 单个插件也可以参考如下编写
    // 如果没有设置value则获取颜色，否则设置颜色
  	$.fn.color = function(value){
		return this.css("color",value);
	};
})(jQuery);

调用样例

1
2
$("#div1").color();
$("#div1").color("red");

如果jQuery选择器包含多个元素

1
2
3
4
5
6
7
8
9
10
;(function($){
	$.fn.extend({
      	// 如果没有设置value则获取颜色，否则设置颜色
		"color":function(value){
			return this.each(function(){
             	return this.css("color",value);
			});
		}
	});
})(jQuery);

去除左侧或右侧空格

1
2
3
4
5
6
7
8
9
10
11
12
;(function($){
	$.extend({
      	// 去除左侧空格
		"ltrim":function(text){
			return (text||"").replace(/^\s+/g," ");
		}
      	// 去除左侧空格
      	"rtrim":function(text){
			return (text||"").replace(/\s+$/g," ");
		}
	});
})(jQuery);

参考

jQuery插件开发的模式和结构