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


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();