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);
、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>
、js代码
<script type="text/javascript">
    $(document).ready(function () {
        $("#btn1").click(function () {
            $("#div1").tableUI ();
        });
    });
</script>