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