jQuery封装有两种方法:
- $.extend()
是在$本身上添加的方法
- $.fn.extend()
是在$()上添加的方法
- $.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');
})
});