jq的插件_jq的插件是什么-CSDN博客

1>基本概念

jq的插件分为类级别开发和对象级别开发，类级别开发在真实项目中几乎不用

2>jQuery插件开发方式

1)通过$.extend()来扩展jQuery

相对简单，一般很少能够独立开发复杂插件，仅仅是在jQuery身上添加一个静态方法而已，我们通过$.extend()添加函数时直接通过$符号调用（$.myfunction()），而不需要选中DOM元素（$(“#element）.myfunction())

2)通过$.fn向jQuery添加新的方法

一般插件开发用到的方式，可以利用jQuery强大的选择器带来便利，以及将插件更好的运用于所选的元素身上，使用的插件大多是通过这个方式开发

3)通过$.widget()应用jQuery UI的部件工厂方式创建

一种高级的开发模式，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方式等

3>对象级别开发的步骤：

1)首先准备好一个架子

在JQuery环境下封装自己的插件，首先要避免与其他库的冲突，需要在插件后面传一个Jquery参数进去，对应的函数里面的参数写入$，使用自调用匿名函数包裹插件代码，这就是你编写插件代码要写入的空间

未避免出现问题，需在插件的前后加入分号

;(function($){

})(jQuery);

2)再上一个架子（jQuery官方提供的一个标准的开发模式）

$.fn.tab,这个tab是你这个功能插件的名字。

在这个插件名字定义的这个函数内部，this指代的是我们在调用插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的级别。

var options=$.extend(defaults,options);利用extend方法把defaults对象的方法属性全部整合到options里

;(function($){

    $.fn.tab=function(options){

        var defaults={

            //各种参数，各种属性

        }

        var options=$.extend(defaults,options);

        this.each(function(){

            //各种功能

        })

        return this;

    }

})(jQuery);

3)开始写功能

通过调用jQuery的each()方法处理集合中的每个元素时要注意，在each方法内部，this指带的是普通的DOM元素，如果需要调用JQuery的方法那就需要用$来重新包装一下

;(function($){

    $.fn.tab=function(options){

        var defaults={

            //各种参数，各种属性

        }

        var options=$.extend(defaults,options);

        this.each(function(){

            var _this=$(this);

            _this.find('.tab_nav>li').click(function(){

             $(this).addClass('current').siblings().removeClass('current');

             var index=$(this).index();

             _this.find('.tab_content>div').eq(index).show().siblins().hide();

            });

        });

        return this;

    }

})(jQuery);

4)调用插件和配置参数

调用：找到外部容器，并调用你所写的tab方法

$(function(){

$('.tab').tab();

})

配置：这时我们不希望class元素和事件被写死，我们需要配置参数

;(function($){

    $.fn.tab=function(options){

        var defaults={

            //各种参数，各种属性

            currentClass:'current',

            tabNav:'.tab_nav>li',

            tabContent:'.tab_content>div',

            eventType:'click'

        }

        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);

$(function(){

$('.tab').tab({

eventType:'mouseover'

});

})

4>完整的代码

<div class="tab">

<ul class="tab_nav clearfix">

<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 src="jquery.min.js"></script>

<script>

;(function($){

    $.fn.tab=function(options){

        var defaults={

            //各种参数，各种属性

            currentClass:'current',

            tabNav:'.tab_nav>li',

            tabContent:'.tab_content>div',

            eventType:'click'

        }

        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);

$(function(){

$('.tab').tab({

eventType:'mouseover'

});

})

</script>