美文网首页我爱编程
jQuery插件封装

jQuery插件封装

作者: 小小_128 | 来源:发表于2018-03-26 19:42 被阅读0次

    作用:

             扩展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")
                                  })
                             })
                         }
                   })
    

    相关文章

      网友评论

        本文标题:jQuery插件封装

        本文链接:https://www.haomeiwen.com/subject/xptdcftx.html