jQuery封装插件

jQuery封装有两种方法:

• $.extend()
  是在$本身上添加的方法

• $.fn.extend()

是在$()上添加的方法

1. $.extend()

举一个简单的例子

$.extend({
        sum:function(){
            var res=0;
            for(var item of arguments){
                res+=item;
            }
            return res;
        },
        random:function(min,max){
            return parseInt(Math.random()*(max-min+1)+min);
        },
        randomColor:function(){
            var r=random(0,255);
            var g=random(0,255);
            var b=random(0,255);
            var a=Math.random()+0.3;
            return "rgba("+r+","+g+","+b+","+a+")"
        }
})

//如果想调用这个方法
var res=$.sum(1,2,3);
console.log(res);

2.$.fn.extend();

$.fn.extend({
        slip:function(){
            // 使用$.fn.extend()扩展插件时，里面的this是jQuery对象
            this.on('mouseover',function(){
                var $this=$(this);
                $this.css({
                    transition:"all 0.3s",
                    transform:"scale(1.2)",
                    "box-shadow":"0 0 10px black"
                })
            }).on('mouseout',function(){
                var $this=$(this);
                $this.css({
                    transition:"all 0.3s",
                    transform:"scale(1)",
                    "box-shadow":"0 0 0px black"
                }).animate({
                    transition:"all 0"
                },1000)
            })
        }
    })
//调用
    $('.div1').slip();
    $('h1').slip();

3.简单的案例，封装slideLeft，slideRight，slideCenter

$.fn.extend({
        slideLeft:function(time,done){
            console.log(this);
            this.animate({width:0},time,done())
        },
        slideRight:function(time,done){
            this.animate({
                width:0,
                left:$(this).width()
            },time,done())
        },
        slideCenter:function(time,done){
            this.animate({
                width:0,
                left:$(this).width()/2
            },time,done());
        }
    })

$('.div1').click(function(){
        $(this).slideLeft(1000,function(){
            console.log('done');
        })
    });