给jQuery对象添加新方法

-------------------------------html----------------------------------

<div class="cont">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="list">
        <div>第一个</div>
        <div style="display: none">第二个</div>
        <div style="display: none;">第叁个</div>
        <div style="display: none">第四个</div>
        <div style="display: none;">第五个</div>
    </div>
</div>
<div class="adf">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="list">
            <div>第一个</div>
            <div style="display: none">第二个</div>
            <div style="display: none;">第叁个</div>
            <div style="display: none">第四个</div>
            <div style="display: none;">第五个</div>
        </div>
    </div>
<div class="aa"></div>
<span class="csa">改变颜色</span>

-------------------------------css-----------------------------------

<style>
    *{margin: 0;padding: 0}
  .cont{width: 500px} 
  .cont ul{overflow: hidden;}
  .cont ul li{width: 100px;float: left;height: 30px;list-style: none;text-align:center}
  .cont .list{width: 500px;height: 400px}
  .adf{width: 500px} 
  .adf ul{overflow: hidden;}
  .adf ul li{width: 100px;float: left;height: 30px;list-style: none;text-align:center}
  .adf .list{width: 500px;height: 400px}
</style>

-------------------------------新方法调用-------------------------------

$(document).ready(function(){
        $('.aa').userCp({
            cpBy: "czh", 
            url: "http://www.baidu.com",
            size: "12px", 
            align: "center" 
        });
        
        $('.cont ul li').qiehuan({
            titbgColor:'#eee',
            titColor:'#555'
        });
        //调用封装好的方法
        $('.adf ul li').qiehuan({
            titbgColor:'green',//修改默认参数
            titColor:'#666'
        });

        $('.csa').bianse({
            Color:'blue',
        });
    })

-------------------------------封装好的方法-----------------------------------

<script type="text/javascript">
;(function ($) {
        //$.extend(obj);是为了扩展jquery本身，为类添加新的方法(调用方法：$.+方法名----->$.fun())
        //$.fn.extend(obj);给JQUERY对象添加方法(调用方法：实例化对象.+方法名----->$('').fun())
        $.fn.extend({
            userCp:function(options){
                var dft = { ///默认参数设置
                    cpBy: "dafi",
                    url: "http://www.dafi.com", 
                    size: "12px", 
                    align: "left" 
                };
                //测试
                // var dftt={
                //     aa:'1',
                //     align:'left',
                // };
                var ops = $.extend({},dft,options);//jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。这里其实是让实例化中的对象合并到目标对象里(覆盖插件默认参数)
                //console.log(ops);
                var style = 'style="font-size:' + ops.size + ';text-align:' + ops.align + ';"'; 
                var cpTxt = '<p' + ' ' + style + '>此文章版权归<a target="_blank" href="' + ops.url + '">' + ops.cpBy + '</a>所有</p>'; 
                $(this).append(cpTxt); 
            },
            qiehuan:function(options){
                var self=this;//ul li  这里的this 就是 jQuery对象
                var defs={
                    titbgColor:self.titbgColor||'red',//默认参数设置
                    titColor:self.titColor||'yellow',
                }
                self.click(function(){
                    sel=$(this); //获取当前dom 的 jQuery对象，这里的this是指当前li
                    //alert('测试');
                    //console.log(sel.index());
                    sel.css({'background-color':defs.titbgColor,'color':defs.titColor}).siblings().css({'background-color':'','color':''});
                    self.parent().parent().find('.list div').eq(sel.index()).show().siblings().hide();
                })
                //self.userCp('你好');
                var app = $.extend(defs,options); 
            },
            // console:function(name){
            //     console.log(name);
            // },
            bianse:function(options){
                var self=this,
                    defaults={
                        Color:'red',
                    };
                self.on('mouseover',function(){
                    self.css({'color':defaults.Color});
                })
                self.on('mouseout',function(){
                    self.css({'color':''});
                })    
                var apps = $.extend(defaults,options);  
                //console.log(apps);
                
            }
            
        })
    })(jQuery);
</script>