手写jQuery插件

模板

$.fn=jQuery.fn=jQuery.prototype 原型

(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>