jQuery插件封装

作用：

         扩展jQuery插件和方法的作用是非常强大的，他可以节省大量的开发时间

方法一：

       类级别的封装方法：就是扩展jQuery类本身的方法，为它增加新的方法。（不常用，不方便绑定元素）
                 
         1.定义方法：
               第一种：
                     $.函数名=function(自定义参数){
                            插件的代码
                     }

               第二种：
                      $.extend({
                              函数名：function（自定义参数）{
                                     插件的代码
                              }
                      })
         2.例如：
                    //第一种在$类中添加方法
                        $.ran = function(min,max){
                              return parseInt(Math.random()*(max-min+1)+min);
                            }
                     //调用：alert($.ran(1,100))

                    //第二种    可以定义多个函数
                        $.extend =({
                             ran:function(min,max){
                             return parseInt(Math.random()*(max-min+1)+min);
                            },
                            fun:function(){alert(1)},
                            fun2:function(){...}
                        })
          调用：document.write($.ran(1,100))
                $.fun()

方法二：

        对象级别的插件扩展（重点）
         1、定义的方法：
               $.fn.extend({
                       函数名:function（自定义参数）{
                                   插件的代码
                        }
                })

         2、例如：  
                   $.fn.extend({
                        randomColor:function(){
                            var r=parseInt(Math.random()*256)
                            var g=parseInt(Math.random()*256)
                            var b=parseInt(Math.random()*256)
                            $(this).css("background","rgb("+r+","+g+","+b+")")
                        }
                   })
                   //调用：$("div").randomColor()

方法三：

        封装拖拽

              $.fn.extend({
                     drop:function(){
                          $(this).css("position","absolute")//设定绝对定位
                          $(this).on("mousedown",function(e){
                              var l=e.offsetX; //鼠标距离事件源左边的距离
                              var t=e.offsetY;
                              var that=$(this)
                              $(window).on("mousemove",function(e){             
                                    $(that).css({left:e.pageX-l+"px",top:e.pageY-t+"px"});
                              })
                              $(window).on("mouseup",function(){
                                   $(window).off("mousemove")
                              })
                         })
                     }
               })