jquery插件的写法

jquery插件的写法一共有三种，插件经常用到，记录一下。

第一种：

对jquery自身的扩展插件，类似与$.ajax的写法，如：

$.extend({
    handleTableUI: function(table){
        varthisTable = $("#" +table);
        
        $(thisTable).find("tr").bind("mouseover",function () {
            $(this).css({color: "#ff0011", background:"blue" });
        });
        $(thisTable).find("tr").bind("mouseout",function () {
            $(this).css({color: "#000000", background:"white" });
        });
    }
});

这样来扩展插件，调用方法如下：

<scripttype="text/javascript">
    $(document).ready(function() {
        $.handleTableUI("newTable");
    });
</script>

第二种：

对HTML标记或页面元素进行扩展，如：

(function ($) {
    $.fn.setTableUI= function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        varoptions = $.extend(defaults, options);
        this.each(function(){
            varthisTable=$(this);
            $(thisTable).find("tr").bind("mouseover",function () {
                $(this).css({color: "#ff0011", background:"blue" });
            });
            $(thisTable).find("tr").bind("mouseout",function () {
                $(this).css({color: "#000000", background:"white" });
            });
        });
    };
})(jQuery);

这种方式，调用的办法如下：

<script type="text/javascript">
    $(document).ready(function() {
        $("#newTable").setTableUI();
    });
</script>

第三种：

不要用在页面显式调用JQuery的方法，而是通过直接添加JQuery插件脚本引用，即可实现对该插件的调用。

这种是常见的引入插件的方式：

(function ($) {
    $.tableUI= { set: function (){
        varthisTable = $("table");
        $(thisTable).find("tr").bind("mouseover",function () {
            $(this).css({color: "#ff0011", background:"blue" });
        });
        $(thisTable).find("tr").bind("mouseout",function () {
            $(this).css({color: "#000000", background:"white" });
        });
    }
    };
    //此处需要进行自调用
    $(function() {
        $.tableUI.set();
    });
})(jQuery);

这样定义以后，需要调用就用script scr=‘‘这种引入。