Two methods of jQuery plug-in development and detailed explanation of $.fn.extend_jquery

There are two types of jQuery plug-in development:

1 Class level

Class level can be understood as extending the jquery class. The most obvious example is $.ajax(...), which is equivalent to static method.

Use the $.extend method when developing and extending its methods, that is, jQuery.extend(object);

Copy code The code is as follows:

$.extend({

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

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

Called in the page:

Copy code The code is as follows:

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

2 Object level

The object level can be understood as object-based expansion, such as $("#table").changeColor(...); The changeColor here is an object-based expansion.

Use the $.fn.extend method when developing and extending its methods, that is, jQuery.fn.extend(object);

Copy code The code is as follows:

$.fn.extend({

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

Call in the page:

Copy code The code is as follows:

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

3. Extension

Copy code The code is as follows:

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