如何利用jQuery扩展自己的插件

随着jQuery越来越流行，那么我们应该怎样在jquery上面来扩展自己的插件呢？那么我们要用到的就是

jQuery.fn;

那么 jQuery.fn 到底是什么呢？我们可以来看下面这段代码的结果。

console.log(jQuery.fn === jQuery.prototype );  // true

你会看到最后输出的结果是 `true` ; 基本上我们就可以猜测 `jQuery.fn` 其实就是 `jQuery` 的原型，只要在 `jQuery` 的原型上面扩展的方法都能被 `jQuery` 元素 `$( '...' ) ` 比如 `$("#element")` 访问。废话不多说，我们可以先来看看一个小例子。尽管这个例子几乎没什么用，但是可以帮助我们理解怎么使用 `jQuery.fn`.

<script>
    //在jQuery原型上扩展autoShow方法
    jQuery.fn.autoShow= function(){
        //this指向调用autoShow方法的元素
        var element = $(this);
        element.css({
            "background"    : "red", 
            "width"         : "100px",
            "height"        : "100px",
            "margin"        : "auto"
        });
    };

    //
    $(function (){
        //因为在前面我们已经扩展了autoShow方法，所以这里我们可以直接调用
        $('#auto-show').autoShow();
    });
</script>

<div id="auto-show"></div>

在上面的方法中，我们在jQuery的原型当中扩展了autoShow方法，$('autoShow') 就能够去访问autoShow方法了。但是上面的方法还有一个问题，就是如果扩展的方法和jQueryd的核心方法有冲突的话，那么方法就会把原来核心库的方法给覆盖掉，比如：

//这么写是不可以的，会覆盖掉原有的val方法
jQuery.fn.val=function(){
    doSomthing();
};

所以我们在扩展插件的时候判断一下方法是否存在，在这里我就不判断了。

---

下面让我们看看怎样在jQuery的原型上扩展一个简单的 tab 切换插件

<ul id="tabs">
    <li data-tab="users">Users</li>
    <li data-tab="groups">Groups</li>
</ul>
    <div id="tabsContent">
    <div data-tab="users"> ... </div>
    <div data-tab="groups"> ... </div>
</div>


jQuery.fn.tabs = function(control){
    var element = $(this);
    control = $(control);

    element.find("li").bind("click", function(){
        // 从列表项中添加或删除 active 类
        element.find("li").removeClass("active");
        $(this).addClass("active");
        // 给tabContent 添加或删除active 类
        var tabName = $(this).attr("data-tab");
        control.find(">[data-tab]").removeClass("active");
        control.find(">[data-tab='" + tabName + "']").addClass("active");
    });

    // 激活第1 个选项卡
    element.find("li:first").addClass("active");


    // 返回this 以启用链式调用
    return this;
};

//这里是调用的方法
$("ul#tabs").tabs("#tabContent");