Jquery插件开发方法

jQuery是一个封装的很好的类，比如我们用语句$("#btn1") 会生成一个 jQuery类的实例。

一、jQuery插件开发注意要点

1、使用闭包，避免全局依赖，避免第三方破坏。

2、避免在插件内部使用$作为JQuery对象的别名，而应使用完整的JQuery来表示，这样可以避免冲突。

3、插件应该返回一个JQuery对象，以便保证插件的可链式操作。

4、所有方法或函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题。为了更加保险，可以在插件头部添加一个分号（；），以免他们的不规范代码给插件带来影响。

二、jQuery插件开发方法

1、jQuery.extend(object);

属于类级别，给jQuery类添加新方法，可以理解为添加静态方法，是基于类的扩展，最明显的例子是.ajax(...)。

//插件代码
$.extend({ 
    add:function(a,b){return a+b;} , 
    minus:function(a,b){return a-b;} 
}); 
//页面调用
var i = $.add(3,2); 
var j = $.minus(3,2);

如果要扩展已有的对象，比如： 
var newSrc=$.extend(dest,src1,src2,src3...) 
它的含义是将src1,src2,src3...合并到dest中，返回值为合并后的dest，由此可以看出该方法合并。 
//插件代码
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 
//结果 
result={name:"Jerry",age:21,sex:"Boy"} 

2、jQuery.fn.extend(object);

属于对象级别，给jQuery对象添加方法，是基于对象的拓展。

jQuery.fn = jQuery.prototype

//插件代码
$.fn.extend({ 
    check:function(){ 
        return this.each({ 
        this.checked=true; 
        }); 
    }, 
    uncheck:function(){ 
        return this.each({ 
        this.checked=false; 
        }); 
    } 
}); 
//页面调用
$('input[type=checkbox]').check(); 
$('input[type=checkbox]').uncheck(); 
//扩展
$.xy = { 
    add:function(a,b){ return a+b; } , 
    minus:function(a,b){ return a-b; }, 
    voidMethod:function(){ alert("void"); } 
}; 
var i = $.xy.add(3,2); 
var m = $.xy.minus(3,2); 
$.xy.voidMethod(); 

3、封装全局函数的插件（类级别）

jQuery.foo = function() { 
    alert('This is a test. This is only a test.'); 
}; 
jQuery.bar = function(param) { 
    alert('This function takes a parameter, which is "' + param + '".'); 
}; 

//页面调用

  $.foo()

三、jQuery插件开发案例

案例A

1、运用在多个元素控件中， 如果要遍历，可以用this.each方法。

//插件代码
(function ($) { 
    $.fn.hoverElement = function () { 
        this.each(function () { 
            $(this).hover( 
                function () { 
                    $(this).addClass("Add"); 
                }, 
                function () { 
                    $(this).removeClass("Remove"); 
                } 
            ); 
        }) 
    } 
})(jQuery);
//html代码
<div class="hoverText"> 
    First Button.. 
</div> 
<div class="hoverText"> 
    Second Button.. 
</div> 
<div class="hoverText"> 
    Third Button.. 
</div>  
//js代码
<script type="text/javascript"> 
    $(document).ready(function () { 
        $(".hoverText").hoverElement(); 
    }); 
</script> 

2、链式操作

//插件代码
(function ($) { 
    $.fn.hoverElement = function () { 
        return this.each(function () { 
            $(this).hover( 
                function () { 
                    $(this).addClass("Add"); 
                }, 
                function () { 
                    $(this).removeClass("Remove"); 
                } 
            ); 
        }) 
    } 
})(jQuery); 
//html代码
<div class="hoverText"> 
    First Button.. 
</div> 
<div class="hoverText"> 
    Second Button.. 
</div> 
<div class="hoverText"> 
    Third Button.. 
</div> 
//js代码
<script type="text/javascript"> 
    $(document).ready(function () { 
        $(".hoverText").hoverElement(); 
    }); 
</script> 

3、自定义插件

我们需要设置一些默认值，当它没有设置的时候，我们就用这些默认值。默认值和用户传进来的值是怎么联合在一起的呢？通过var obj = $.extend(defaultVal, options); 可以实现用户自定义的值覆盖默认值。

//插件代码
(function ($) { 
    $.fn.textHover = function (options) {//options 经常用这个表示有许多个参数。 
        var defaultVal = { 
            Text: 'Your mouse is over', 
            ForeColor: 'red', 
            BackColor: 'gray' 
        }; 
        var obj = $.extend(defaultVal, options); 
        return this.each(function () { 
            var selObject = $(this);//获取当前对象 
            var oldText = selObject.text();//获取当前对象的text值 
            var oldBgColor = selObject.css("background-color");//获取当前对象的背景色 
            var oldColor = selObject.css("color");//获取当前对象的字体的颜色 
            
            selObject.hover(function () {//定义一个hover方法。 
                    selObject.text(obj.Text);//进行赋值 
                    selObject.css("background-color", obj.BackColor);//进行赋值 
                    selObject.css("color", obj.ForeColor);//进行赋值 
                }, 
                function () { 
                    selObject.text(oldText); 
                    selObject.css("background-color", oldBgColor); 
                    selObject.css("color", oldColor); 
                } 
            ); 
        }); 
    } 
})(jQuery); 
//html代码
<div id="div1" class="textBar"> 
    Mouse over here..... 
</div> 
<div id="div2" class="textBar"> 
    Mouse over here..... 
</div> 
//js代码
$(document).ready(function () { 
    $('#div1').textHover({ 
        Text: 'I am going to over..', 
        ForeColor: 'yellow', 
        BackColor: 'Red' 
    }); 
    $('#div2').textHover({ Text: 'I am second div...' }); 
}); 

案例B

1、插件代码
/* 
* tableUI 0.1 
* Copyright (c) 2013 camillea http://www.cnblogs.com/camille666/
* Date: 2013-03-30 
* 美化表格，让表格的奇偶行颜色不同，鼠标移到某行上，某行可以高亮显示。
*/ 
(function($){ 
    $.fn.tableUI = function(options){ 
        var defaults = { 
            evenRowClass:"evenRow", 
            oddRowClass:"oddRow", 
            activeRowClass:"activeRow" 
        } 
//合并多个对象为一个，如果你在调用的时候写了新的参数，就用新的参数，如果没有写，就用默认的参数。
        var options = $.extend(defaults, options); 
        this.each(function(){ 
            var thisTable=$(this); 
            //添加奇偶行颜色 
            $(thisTable).find("tr:even").addClass(options.evenRowClass); 
            $(thisTable).find("tr:odd").addClass(options.oddRowClass); 
            //添加活动行颜色 
            $(thisTable).find("tr").bind("mouseover",function(){ 
                $(this).addClass(options.activeRowClass); 
            }); 
            $(thisTable).find("tr").bind("mouseout",function(){ 
                $(this).removeClass(options.activeRowClass); 
            }); 
        }); 
    }; 
})(jQuery); 
2、html代码
把该插件保存为table.js，新建html。
<script src="js/jquery-1.11.1.js" type="text/javascript"></script> 
<script src="js/table.js" type="text/javascript"></script> 
3、js代码
<script type="text/javascript"> 
    $(document).ready(function () { 
        $("#btn1").click(function () { 
            $("#div1").tableUI (); 
        }); 
    }); 
</script>