Two methods of jQuery plug in development and a detailed explanation of $.fn.extend

  • 2020-03-30 01:24:50
  • OfStack

There are two types of jQuery plug-in development:

1 class level

Class level you can think of as extending jquery classes, the most obvious example being $.ajax(...) , equivalent to a static method.

Use the $.extend method, i.e. JQuery.extend(object), when developing methods to extend it;
 
$.extend({ 

add:function(a,b){return a+b;} , 

minus:function(a,b){return a-b;} 
}); 

Page call:
 
var i = $.add(3,2); 
var j = $.minus(3,2); 

2 object level

The object level can be understood as an object-based extension, such as $("#table").changecolor (...) ; So here's changeColor, which is an object based extension.

The $.fn.extend method, i.e. JQuery.fn.extend(object), is used when developing methods to extend it.
 
$.fn.extend({ 

check:function(){ 
return this.each({ 
this.checked=true; 
}); 
}, 
uncheck:function(){ 
return this.each({ 
this.checked=false; 
}); 
} 
}); 

Page call:
 
$('input[type=checkbox]').check(); 
$('input[type=checkbox]').uncheck(); 

3, extension,
 
$.xy = { 
add:function(a,b){return a+b;} , 
minus:function(a,b){return a-b;}, 
voidMethod:function(){ alert("void"); } 
}; 
var i = $.xy.add(3,2); 
var m = $.xy.minus(3,2); 
$.xy.voidMethod(); 

Related articles: