jQuery插件，实现表格选中状态及鼠标滑过高亮

一、理论

该部分转自：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.fn = jQuery.prototype

jQuery相当于封装的很好的一个类，比如用$("#btn1")会生成一个jQuery类的实例。

jQuery.extend(object)
为jQuery类添加类方法，可以理解为添加静态方法。如：
 

jQuery.extend({
min:function(a,b){return ab?a:b;},
});
jQuery.min(2,3);//2
jQuery.max(4,5);//5

ObjectjQuery.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.fn.extend(object);
对jQuery.prototype进的扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert当前编辑框里的内容。

$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
})
}
});
$("#input1").alertWhileClick();//页面上为：

$("#input1")为一个jQuery实例，当它调用成员方法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);

二、jQuery.extend使用详解

该部分转自：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');}
});

 　　就是将hello方法合并到jquery的全局对象中。
 　　2、$.fn.extend(src)
 　　该方法将src合并到jquery的实例对象中去，如:

$.fn.extend({
hello:function(){alert('hello');}
});

　　 就是将hello方法合并到jquery的实例对象中。

 　　下面例举几个常用的扩展实例：

$.extend({net:{}});

　　 这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{
hello:function(){alert('hello');}
})

  　　这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。
Jquery的extend方法还有一个重载原型：  

extend(boolean,dest,src1,src2,src3...)

      第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：

var result=$.extend( true, {}, 
{ name: "John", location: {city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } );

      我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是： 

result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}

       也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：

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方法：

  $.SayHello(“Olive”);

     说明：该方法相当于为Jquery类添加了新的方法。
$.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()的方法.