jQuery插件封装

                                                                               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（自定义参数）{

                    插件的代码

                  }

            })

        例如： 

        $.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")

})

  })

      }

          })