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:	Copy code
JQuery. sayHello = function (name) { Alert (name + "Hello "); };

 

Call method:

The code is as follows:	Copy code
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:	Copy code
// 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:	Copy code
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:	Copy code
// 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:	Copy code
// 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 ();