简单的JQ插件原理

JQ插件里面的代码

;(function ($) {
    $.fn.tab = function (options) {

        var defaults = {
            //各种参数，各种属性
            currentClass: 'current',
            tabNav: '.tab_nav>li',
            tabContent: '.tab_content>div',
            eventType: 'click',
        };

　　　　

　　　　//这个是利用extend方法把 defaults对象的方法属性全部整合到 options里，也就是options继承了defaults对象的方法以及属性。这个defaults和options名字是可以随意更改的，只要是满足js的命名规范

　　　　　　下面操作功能的时候不用把变量写死
        var options = $.extend(defaults, options);

        this.each(function () {

 　　　　//各种功能代码

      　　　　 var _this = $(this);
            _this.find(options.tabNav).on(options.eventType, function () {
                $(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);

                var index = $(this).index();
                _this.find(options.tabContent).eq(index).show().siblings().hide();
            });
        });

        return this;
    }


})(jQuery);

html代码使用

<div class="tab">
    　　<ul class="tab_nav">
        　　　　<li class="current">html</li>
        　　　　<li>css</li>
        　　　　<li>js</li>
        　　</ul>

    　　<div class="tab_content">
        　　　　<div style="display:block;">html</div>
        　　　　<div>css</div>
        　　　　<div>js</div>
        　　</div>
</div>
<script>
    $(function(){
        $('.tab').tab();
    });
</script>