jQuery扩展方法

jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，调用形式：$.fun()；
另一种是对象级别的插件开发，即给jQuery对象添加方法。调用形式：$('选择器').fun()。

也可以理解为另外两种方式：
一种是jQuery本身的扩展方法；jQuery.extend(Object);
另一种是jQuery所选对象的扩展方法。jQuery.fn.extent(Object);

下面就对这两种开发做详细的说明：

类级别的插件开发

对类级别的插件开发，我们可以把jQuery看成一个类，给jQuery类添加静态方法，比如$.ajax()这个函数，将此函数定义在jQuery的命名空间中。

可采用如下几种形式进行开发：

添加一个新的全局函数

$.foo = function(){
	console.log('this is foo function');
};
// 调用方法
$.foo();

// 输出结果：
// this is foo function

使用jQuery.extend(object);

$.extend({
        hello: function(){
            console.log('Hello World');
        }
        , getName: function(name){
            console.log('Name:'+name);
        }
});
// 调用方法
$.hello();
$.getName('Tom');

// 输出结果：
// Hello World
// demo.html:34 Name:Tom

使用命名空间

$.myPlugin = {
        hello: function(){
            console.log('[myPlugin] Hello World');
        }
        , getName: function(name){
            console.log('[myPlugin] Name:'+name);
        }
};
// 调用方法
$.myPlugin.hello();
$.myPlugin.getName('Tom');

// 输出结果：
// [myPlugin] Hello World
// demo.html:32 [myPlugin] Name:Tom

对象级别的插件开发

html代码：

<p id="demo">Hello World</p>

形式一

$.fn.foo = function(){
	console.log('对象标签文本内容：' + $(this).text());
	return this;// 如果是链式调用,返回this
};
// 调用方法
$('#demo').foo();

// 输出结果：
// 对象标签文本内容：Hello World

形式二

(function($){
	$.fn.extend({
		foo2: function(opt, callback){
		console.log("opt:", opt);
			callback && callback({name: 'Jerry'});
		}
	})
})(jQuery);
// 调用方法
$("#demo").foo2({name: 'Tom'}, function(data){console.log('data:', data)});

// 输出结果：
// opt: {name: "Tom"}
// data: {name: "Jerry"}

形式三

(function (jq) {
	jq.fn.foo3 = function (obj) {
		console.log(obj);
	};
})(jQuery);
// 调用方法
$("#demo").foo3("hello jQuery");

// 输出结果：
// hello jQuery