jQuery封装插件

一、给jQuery对象本身拓展方法

<script src="js/jQuery1.12.4.js"></script>
<script>
    $.extend({
        lg:function(){
            console.log(123456);
        }
    });
    $.lg();
</script>

二、给jquery DOM对象扩展方法

<h3>h3标签</h3>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $.fn.extend({
        changeColor: function(){
            $(this).css('color','green');
            return $(this);//方便链式操作
        },
        changeBorder: function(){
            $(this).css('border','2px solid pink');
        }
    });
    $('h3').changeColor().changeBorder();
</script>

封装一个物体拖拽插件，limit决定是否越界

<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $.fn.draggable = function(options){
        var This = $(this);
        options = options || {};
        options.limit = options.limit || false;
        $('div').css({
            position: 'absolute',
            top: 0,
            left: 0,
            cursor : 'move'
        });
        $(this).mousedown(function(e){
            var disX = e.pageX - $(this).offset().left;
            var disY = e.pageY - $(this).offset().top;
            $(document).mousemove(function(e){
                var l = e.pageX - disX;
                var t = e.pageY - disY;
                if(options.limit){
                    if(l<0){
                        l = 0;
                    }else if(l>$(document).innerWidth()-This.outerWidth()){
                        l = $(document).innerWidth()-This.outerWidth();
                    };
                    if(t<0){
                        t = 0;
                    }else if(t>$(document).innerHeight()-This.outerHeight()){
                        t = $(document).innerHeight()-This.outerHeight()-1;
                    }
                };
                This.css({
                    left: l,
                    top: t
                });
            });
            $(document).mouseup(function(){
                $(this).off();
            });
            return false;
        });
    };
    $('div').draggable({
        limit: true//限制范围
    });
</script>