美文网首页我爱编程
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插件封装

    jQuery插件简易封装方法。 jQuery插件机制 jQuery.extend( [deep ], target...

  • jQuery插件封装

    jQuery插件封装 自定义插件:...

  • jQuery插件

    1.jQuery插件分类 封装对象方法的插件 应用最广 封装全局函数的插件 作为jQuery全局函数插件 选择器插...

  • jQuery面试题(一)

    一、手写一个jQuery插件。 例1:封装jQuery对象方法的一个插件(使用jQuery.fn.extend()...

  • JQ 插件

    jquey的插件主要分为3中类型1.封装对象方法的插件2.封装全局函数的插件3.选择器插件 jquery插件的文件...

  • jQuery插件封装

    作用: 方法一: 方法二: 方法三:

  • jQuery封装插件

    jQuery封装有两种方法:$.extend()是在$本身上添加的方法 $.fn.extend() 是在$()上添...

  • 05_jQuery_无缝滚动轮播效果插件封装

    使用 jQuery 封装一个无缝滚动轮播效果插件。 效果图: 在线预览:jQuery_LKMarqueeSlide...

  • 简单构建一个 jQuery 插件---extend

    当我们写了一段有价值的 jQuery 代码的时候,是很希望能够封装成一个 jQuery 插件的。 可是该怎么封装呢...

  • 学会自己封装JQuery插件

    今天简单说说JQuery插件的封装。 首先上一份简单的模板 插件封装中,需要注意的是this的使用。不多说。通过上...

网友评论

    本文标题:jQuery插件封装

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