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")
       })
     })
   }
 })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 《四柱特训班讲义》一书,是笔者根据2003年春举办的四柱特训班讲课记录的基础上整理出来的。它是以《四柱详真》...
    小狐狸娃娃阅读 12,396评论 1 29
  • 这几天描了两张眼睛 真是角度和距离不同 就变了不同味道 有些竟然画成了毛毛虫 也是醉了
    Miao喵了个咪阅读 180评论 0 0
  • 相恋的小情侣几乎都一样,大多数通常都是要经历新鲜期、热恋期、降温期和冷淡期这四个恋爱阶段。前两个阶段可谓是充满了甜...
    Ketno花间阅读 1,539评论 5 2
  • 我有一个闺蜜叫小言,长得很干净很清纯的那种,那时候在高中即便不是校花,也是数一数二的美人。 今年过年回家的时候...
    仰望xito阅读 143评论 0 0
  • 想要收获不一样的风景,就必须在恰当的时候选择一条别人没有走过的荆棘之路。 谈起刘备山,对于居住在附近村...
    下辈子我愿做小草阅读 1,511评论 2 6