Customizing jquery plug-ins in two ways

Custom jquery plug-ins can be defined at the function level as well as at the object level, and each level of plug-ins can be passed and not joined. 1. Add a JQuery object-level plugin to add a method to the jquery objectWriting:
;( function($) {$.fn.extend ({"Function name": function(Custom parameters)   {//Here Write plug-in Code}});   }) (JQuery); Or;( function($) {$.fn. function name = function(Custom parameters) {//Here Write plug-in code}})   (JQuery); Call Method: $ ("#id"). Function name (parameter);
2.jQuery class-level plug-ins, equivalent to adding static methods
;( function($) {$.extend ({"Function name": function(Custom parameters)   {//Here Write plug-in Code}});   }) (JQuery); Or;( function($) {$. Name of function = function(Custom parameters) {//Here Write plug-in code}})   (JQuery); Call method: $. Function name (parameter);

Types of jquery plug-ins:1. Object-level plug-in development, which is to add methods to the JQuery object, encapsulation of the object method Plug-ins, such as: parent (), Appendto () 2. A class-level plug-in development that adds a new global function to jquery, which is equivalent to adding a method to the jquery class itself, The global function of jquery is a function that belongs to the jquery namespace, and encapsulates the global function 3. Selector Plugin jquery plug-in mechanismJQuery has two methods for developing Plug-ins, respectively: JQuery.fn.extend (object);      Add a method to the jquery object. Jquery.extend (object);      To extend the jquery class itself. Adding a new method to a class can be understood as adding a static method. Both methods accept a parameter, with the type object,object corresponding to "name/value pairs" representing the function or method body/function body respectively. what is FN? Looking at the jquery code, it's not hard to find:
<span style= "FONT-SIZE:12PX;" >jquery.fn = Jquery.prototype = {init: function(Selector, context) {//....　 //...... }; </span>
The original Jquery.fn = Jquery.prototype. It's certainly not strange to prototype. Although JavaScript does not have a well-defined class concept, it is more convenient to use classes to understand it.  jquery is a very nicely encapsulated class, for example, we use statement $ ("#btn1") to generate an instance of a jquery class. JQuery.fn.extend (object), to extend the Jquery.prototype, is to add a "member function" for the jquery class. Examples of jquery classes can use this "member function". That is: $ ("#id"). Object ();
In addition to extending the JQuery object, the Jquery.extend () method can also extend an existing object object, often used to set a series of default parameters for the plug-in method, and it is convenient to overwrite the default value with the arguments passed in Jquery.extend (Object1, OBJECT2) Object1 The default parameter value, object2 the passed-in parameter value;
<span style= "FONT-SIZE:12PX;" > varSettions ={validate: false, Limit:5,name= "foo"}; varOptions ={validate: true, name= "Bar"}; varNewoptions=jquery.extend (settings,options); The result was:</span> <span style= "FONT-SIZE:12PX;" >newoptions = {validate: true, limit:5,name= "Bar"}; functionFoo (options) {options = Jquery.extend ({name= "bar", Length:5, DataType   = "XML"/* default parameter */},options/*options for the passed parameter * *); }</span>
If the user invokes the Foo () method, the corresponding value is set in the passed parameter options object, then the set value is used, otherwise the default value is used to invoke the method:
<span style= "FONT-SIZE:12PX;"   >foo ({name: "A", Length:4,datatype: "JSON"});   Foo ({name: "a"}); Foo ();</span>
writing jquery Plug-ins
Encapsulating jquery's plug-ins for your approach, you first need to frame the JavaScript file with the following code:
<span style= "FONT-SIZE:12PX;" >;( function($) {//Here Write plug-in code}) (jQuery);</span>

1. Object-level plug-in development, which is to add methods to jquery objects, encapsulation of the object method Plug-ins, such as: parent (), Appendto ()
Because it is a method extension to the JQuery object, the method JQuery.fn.extend () is used to extend the 1th class (Encapsulating object method) plug-in to write
<span style= "FONT-SIZE:12PX;" >;( function($) {$.fn.extend ({"Color": function(value)   {//Here Write plug-in Code}}); }) (JQuery);</span> or
<span style= "FONT-SIZE:12PX;" >;( function($) {$.fn.color= function(value) {//Here Write plug-in code}}) (jQuery);</span>
The method here provides a parameter value, and if you call the method with value, you use this value to set the font color, otherwise you get a value that matches the font color without this.
<span style= "FONT-SIZE:12PX;" >;( function($) {$.fn.extend ({"Color": function(value) { return This. CSS ("color", value);   }       }); }) (JQuery);</span>
This inside of the plug-in points to the jquery object rather than the normal DOM object.   The next note is that Plug-ins should be linked if they do not need to return a specific value such as a string. To do this, return the object directly, because the CSS () method also returns the object that calls it, that is, the addition of this, so you can write the code in the form above;
can be written directly when called: $ ("div"). Color ("red");
In addition, if you want to define a set of Plug-ins, you can use the following notation:
<span style= "FONT-SIZE:12PX;" >;( function($) {$.fn.extend ({"Color": function(value) {//Here Write plug-in code}, "border": function(value) {//Here Write plug-in code}, "Background": function(value) {