Two Methods for jQuery plug-in development and $. fn. extend _ jquery

There are two types of jQuery plug-in development: Class 1 and Class 2. The following describes jQuery plug-in development in detail:

Class 1

You can understand the class level as an extension of the jquery class. The most obvious example is $. ajax (...), which is equivalent to a static method.

Use the $. extend method when developing the extension method, that is, jQuery. extend (object );

The Code is as follows:

$. Extend ({

Add: function (a, B) {return a + B ;},

Minus: function (a, B) {return a-B ;}
});

Page call:

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 extension, for example, $ ("# table"). changeColor (...); here, the changeColor is the object-based extension.

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

The Code is as follows:

$. Fn. extend ({

Check: function (){
Return this. each ({
This. checked = true;
});
},
Uncheck: function (){
Return this. each ({
This. checked = false;
});
}
});

Page call:

The Code is as follows:

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

3. Expansion

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