手写jQuery插件

插件原理：

jQuery插件就是用来扩展jQuery原型对象的一个方法，jQuery插件的使用方式就是jQuery对象方法的调用。

 $.fn=jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象，jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法了。

 

(function($){
    //插件名 navStyle
    $.fn.navStyle=function(options){//扩展方法
        //各种属性、参数
        var defaults={
        }
        //如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。
        var options=$.extend(defaults,options);
        return this.each(function(){
                    //操作
                  })        
    }
})(jQuery);
                    

例：设置li的背景颜色、划动时显示的背景颜色以及点击时显示的背景颜色

(function($){
    //插件名 navStyle
    $.fn.navStyle=function(options){
        //各种属性、参数
        var defaults={
            bgClass:'#ee2c2c',
            activeBgClass:"green",
            clickBgClass:"#cd22fe"
        }
        //如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。
        var options=$.extend(defaults,options);
        return this.each(function(){
            var thisNav=$(this);
            //添加背景颜色
            $(thisNav).find('li').css('background',options.bgClass);
            
            var li=$(thisNav).find('li');
            //添加滑过时颜色
            for(var i=0;i<li.length;i++){
                li.eq(i).bind('mouserover',function(){
                    $(this).css('background',options.activeBgClass);
                    $(this).siblings().css('background',options.bgClass);
                })
            }
            //添加点击时的颜色
            for(var i=0;i<li.length;i++){
                li.eq(i).bind('click',function(){
                    $(this).css('background',options.clickBgClass);
                    $(this).siblings().css('background',options.bgClass);
                })
            }
            
        })
    }
})(jQuery);

 html代码

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/NavUI.js"></script>
<script>    
    $(function(){
           $('ul').navStyle({bgClass:'#0000FF',activeBgClass:"yellow"});
    })
</script>

 

插件调用时，插件内部的this就是当前调用插件的jQuery对象。

$.extend()函数用于将一个或多个对象的内容合并到目标对象上

如果在使用插件时仍然想链式调用其他方法，则在插件中添加代码 return this;  把当前的jQuery对象返回，然后就可以在插件后面继续调用其他jQuery方法了。

转载于:https://www.cnblogs.com/xiaoan0705/p/10419644.html