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;
Page call:
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.
Page call:
3, extension,
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();