开发jQuery的扩展，通常有两种方式，第一种是通过jQuery函数prototype属性的别名jQuery.fn进行扩展；第二种就是通过采用jQuery.extend()方法进行扩展。这两种方式又有什么区别呢？

一、基于jQuery.extend()

关于jQuery函数详细信息如下：

jQuery.extend( target [, object1 ] [, objectN ] ) 将两个或更多对象的内容合并到第一个对象，若仅仅传递一个参数，则把传递的对象合并到JQuery对象上。

target

类型: Object

一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。

object1

类型: Object

一个对象，它包含额外的属性合并到第一个参数

objectN

类型: Object

包含额外的属性合并到第一个参数

使用jQuery.extend()进行jQuery扩展开发是相当简单的，直接如下：

$.extend({
	'trace' : function(params){
		 console.log(params);
	}
});

由于trace方法是直接合并到JQuery对象上，所以可以直接通过$.trace('web : www.findme.wang')，而不能通过$().trace()方式调用。

二、基于jQuery.fn

在jQuery源码中，有这样一行代码 jQuery.fn = jQuery.prototype ，这说明jQuery.fn是jQuery原型prototype的一个别名。那么我们对其进行扩展的时候，就可以直接如下：

jQuery.fn.fucName = function(){
	//函数体
}

为了简便，可以把jQuery换成$符号。如果写在全局作用域中，是不是觉得有点暴露，当然这不是根本原因，主要是因为若$字符被占用，使用了 jQuery.noConflict()，那么我们插件里面就不能使用$了。于是我们很容易想到使用立即执行函数进行适当的封装，如下：

(function ($) {
  $.fn.myPlugin = function () {
    //插件代码
  };
})(jQuery);

需要注意几个事项

（1）JQuery的链式操作

在jQuery是支持链式操作的，比如$(".title").css("color", "#012").css({"background-color": "#FFF"})，那么我们当然更希望我们开发出来的插件，也能够支持链式操作，之所以能够链式操作，关键是在函数中返回了jQuery对象，由于在插件对应的函数里面this代表了当前的jQuery对象，所以返回this即可。

(function ($) {
  $.fn.trace = function (params) {
   	console.log(params);
    return this;
  };
})(jQuery);

（2）使用each函数

我们更多的时候是需要对集合中的元素进行处理，而不是jQuery对应的集合，这时候就需要使用each函数，因为each函数里面的this代表的是对应的每一个元素。且each函数返回了jQuery对象，于是我们的插件，可以这样写：

(function ($) {
  $.fn.trace = function () {
	return $.each(function(){
		console.log($(this).html());
	});  	
  };
})(jQuery);

（3）参数与默认值options

定一个插件，来修改元素的颜色，若没有指定颜色，颜色为#123。代码如下：

(function ($) {
  $.fn.firstPlugin = function () {
  	var defaults ={color:'#123'}
	var opts = $.extend({}, defaults, options);
	return $.each(function(){
		$(this).css('color', opts.color);
	});  	
  };
})(jQuery);

三、两种扩展开发的区别

这两种扩展的开发，还是有一定的区别。使用jQuery.extend()进行扩展开发，相当于在当前的jQuery对象上添加方法，类似

$.myPlugin = function(){
	//some code
}

使用jQuery.fn进行扩展开发，相当于在jQuery的原型prototype上添加方法。除了使用jQuery.fn.pluginName，jQuery提供了jQuery.fn.extend( object )方法，其效果是一样一样的。

参考

http://learn.jquery.com/plugins