Jquery custom plug-in development tutorial
1. Global Function Extension
A global function adds an independent function to the namespace of JQuery. You can use $. fucnName (param) or jQuery. funcName (param) to call the API.
1. Add a global function sayHello on JQuery directly.
The Code is as follows: |
|
JQuery. sayHello = function (name) { Alert (name + "hello "); }; |
Call method:
The Code is as follows: |
|
JQuery. sayHello ("Zhang zihan "); // Or use $. sayHello ("Zhang zihan "); |
2. jQuery. extend (): it extends an object by using one or more objects and returns the extended objects.
2.1 jQuery. extend (dsc, src1, src2 ...) : Extend src1 and src2 to the dsc object and return the extended dsc object (merged object)
2.2 jQuery. extend (object): Extension of the jQuery namespace itself. The result is to add a function to the jQuery namespace.
The Code is as follows: |
|
// Add two functions to the jQuery namespace. JQuery. extend ({ Min: function (a, B) {return a <B? A: B ;}, Max: function (a, B) {return a> B? A: B ;} }); |
Call Method
The Code is as follows: |
|
JQuery. min (2, 3); // => 2 JQuery. max (4, 5); // => 5 |
Ii. Extension of object Methods
The extension of object methods allows all methods called by jQuery objects.
1. jQuery. fn
The Code is as follows: |
|
// Add the sayHello method to the jQuery object JQuery. fn. sayHello = function (name) { Alert (name + "hello "); }
Call $ ("Div"). sayHello ("dwqs "); |
2. jQuery. fn. extend
Extends the jQuery element set to provide new methods (usually used to create plug-ins ).
The Code is as follows: |
|
// Add two plug-in methods. JQuery. fn. extend ({ Check: function (){ Return this. each (function () {this. checked = true ;}); }, Uncheck: function (){ Return this. each (function () {this. checked = false ;}); } });
Call: $ ("Input [type = checkbox]"). check (); $ ("Input [type = radio]"). uncheck (); |