一、理论
该部分转自：http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html
//jQuery开发插件的两种方法
jQuery.fn.extend();
jQuery.extend();那么jQuery.fn是啥？
jQuery.fn = jQuery.prototype = {
init:function(selector,context){//...
//....
}
};
jQuery相当于封装的很好的一个类，比如用$("#btn1")会生成一个jQuery类的实例。
jQuery.extend(object)
为jQuery类添加类方法，可以理解为添加静态方法。如：
jQuery.extend({
min:function(a,b){return a<b?a:b;},
max:function(a,b){return a>b?a:b;},
});
jQuery.min(2,3);//2
jQuery.max(4,5);//5ObjectjQuery.extend(target,object1,[objectN])
用一个或者多个其他对象来扩展一个对象，返回被扩展的对象
var settings = {validate:false,limit:5,name:"foo"};
var options = {validate:true,name:"bar"};
jQuery.extend(settings,options);
结果：settings == {validate:true,limit:5,name:"bar"}对jQuery.prototype进的扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert当前编辑框里的内容。
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
})
}
});
$("#input1").alertWhileClick();//页面上为：jQuery.extend()的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init(),而jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这是很重要的，在jQuery.js中到处体现这一点
jQuery.fn.extend = jQuery.prototype.extend
你可以扩展一个对象到jQuery的prototype里去，这样的话就是插件机制了。
(function($){
$.fn.tooltip = function(options){
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})(jquery);该部分转自：http://www.cnblogs.com/zikai/p/5074686.html
其实讲的也不是很清楚(⊙﹏⊙)b 下面的三、比较好理解
JQuery的extend扩展方法：
Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型。
Jquery的扩展方法原型是:
extend(dest,src1,src2,src3...);它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})result={name:"Jerry",age:21,sex:"Boy"}也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。
省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
1、$.extend(src)
该方法就是将src合并到jquery的全局对象中去，如：
$.extend({
hello:function(){alert('hello');}
});2、$.fn.extend(src)
该方法将src合并到jquery的实例对象中去，如:
$.fn.extend({
hello:function(){alert('hello');}
});下面例举几个常用的扩展实例：
$.extend({net:{}});$.extend($.net,{
hello:function(){alert('hello');}
})Jquery的extend方法还有一个重载原型：
extend(boolean,dest,src1,src2,src3...)var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);result={name:"John",last:"Resig",location:{state:"MA",county:"China"}} extend(result,item1,item2…..)
这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这样就会破坏result的结构。
extend({},item1,item2,……)
用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。
示例：
Var item={name:”olive”,age:23};
Var item1={name:”Momo”,sex:”gril”};
Var result=$.extend({},item,item1);Result={name:”Momo”,age:23,sex:”gril”};以上的结果表明extend方法将所有的项都合并到了{}中，但是，细心一点就会发现，其中item1中的name：“Momo” 将item中的name：“olive”给覆盖了，这是怎么回事？请接着往下看。
extend(bool,{},item1,item2….)
Extend方法还有带bool型参数的重载。
bool型参数为true表示深拷贝，为false时表示浅拷贝。具体可以通过一下示例来说明：
示例：
var item={name：“olive”,age:23,address{provice:”河南”,city:”郑州”}};
var item1={sex:”girl”,address{city:”北京”}};
var result=$.extend(true,item,item1);
var result1=$.extend(false,item,item1);Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};
Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};以上结果说明，当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。
当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖。
$.extend(item)
该方法是将item合并到Jquery的全局对象中去，相当于为Jquery全局对象添加了一个
静态方法（对应这里的静态方法，当然还有实例方法，在后边有介绍）。
示例：
$.extend({SayHello:function(value){alert(“hello “+value);}}); $.SayHello(“Olive”);$.fn.extend(item)
上边提到的$.extend(item)说是为Jquery类添加了静态方法，那么这里的$.fn.extend(item)就是为每一个实例添加一个实例方法了。
示例：
$.fn.extend({hello:function(value){alert(“hello “+value);}}); $(“#id”).hello(“Olive”);转自：http://www.fx114.net/qa-227-71600.aspx
1.插件的文件名推荐用jquery.[插件名].js,避免与其他插件混淆.
2.所有的对象方法都应该附加到jQuery.fn对象上,而所有的全局函数都应当附加jQuery对象本身上.
3.在插件内部,this指向的是当前通过选择器获取的jQuery对象.
4.插件应该返回一个jQuery对象,以保证插件的可链式操作.
5.避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,这样可以避免冲突.
插件的可链式
1.返回数据的可链式，以保证还可以使用其它的方法. 如下的方式，它会返回一个jquery对象. 调用时: $("#table2").alterBgColor() //应用插件 .find("th").css("color","red");//可以链式操作 >>>>在实际的写法上 : 相关的示例 常用的参数设置，默认参数的实现. ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 options=$.extend({ odd:"odd", /* 偶数行样式*/ even:"even", /* 奇数行样式*/ selected:"selected" /* 选中行样式*/ },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even); $('tbody>tr',this).click(function() { //判断当前是否选中 var hasSelected=$(this).hasClass(options.selected); //如果选中，则移出selected类，否则就加上selected类 $(this)[hasSelected?"removeClass":"addClass"](options.selected) //查找内部的checkbox,设置对应的属性。 .find(':checkbox').attr('checked',!hasSelected); }); // 如果单选框默认情况下是选择的，则高色. $('tbody>tr:has(:checked)',this).addClass(options.selected); return this; //返回this，使方法可链。 } }); })(jQuery);
说明:
1. 使用extend来对函数的参数进行默认的赋值.
2. 使用插件下的元素匹配,即选择器的设置. 如要当前表格中刚单击的一个tr表格行.>> $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even);
6.为插件来传递调用方法时. 插件的调用上 $.fn.mywin = function(position, hidefunc, initPos) { //定义关闭按钮的动作 currentwin.children(".title").children("img").click(function() { if (!hidefunc) { currentwin.hide("slow") ; } else { hidefunc(); } }); } 此函数的内容为: rightwin.mywin({left: "right", top: "bottom"}, function() { rightwin.hide(); },{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue(); } 即当进行click时，它会调用hidefunc()的方法.
1222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
