jquery Custom Plugins

Two ways to write a plugin in jquery

1. Add a JQuery object-level plugin that adds a method to the jquery class

Writing:

;(function ($) {$.fn.extend ({"Function name": Functions (custom parameter) {//write plug-in code here}});}) (jquery); (function ($) {$.fn. function name =function (custom parameter) {//write plugin Code}}) (jquery);

　　

Calling Method: $ ("#id"). Function name (parameter);

Types of jquery plugins:

1. Object-level plug-in development, that is, to add methods to the JQuery object, encapsulating the object method plug-ins, such as: parent (), AppendTo () 2. One is 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 the function of the jquery        namespace, the plug-in that encapsulates the global function 3. Selector plug-in

　　

jquery plugin mechanism

jquery has two methods for developing plug-ins, namely:

JQuery.fn.extend (object); Adds a method to a 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 of these methods accept a parameter, the type Object,object corresponding to the "name/value pair" represents "function or method body/function Body", respectively.

What is FN?

If you look at the jquery code, it's not hard to see:

The original Jquery.fn = Jquery.prototype. It's certainly not strange to prototype. Although JavaScript does not have a clear class concept, it is more convenient to use a class to understand it. jquery is a well-encapsulated class, such as we use the statement $ ("#btn1") to generate an instance of the jquery class.

JQuery.fn.extend (object), which expands on Jquery.prototype, is to add "member functions" to the jquery class. An instance of the jquery class can use this "member function". That is: $ ("#id"). Object ();

The Jquery.extend () method, in addition to extending the jquery object, extends the existing object object and is often used to set the default parameters of the plug-in method, and it is convenient to override the default values with the passed-in parameters.

Jquery.extend (OBJECT1,OBJECT2) object1 default parameter value, object2 incoming parameter value; Please click here for detailed instructions.

var settions ={validate:false,limit:5,name= "foo"};var options ={validate:true,name= "Bar"};var newoptions= Jquery.extend (settings,options);

The result is:

Newoptions = {validate:true,limit:5,name= "bar"};function foo (options) {options = Jquery.extend ({name= "bar", Length:5,        datatype= "xml"/* default parameter */},options/*options is the passed parameter */);}

If the user calls the Foo () method, the corresponding value is set in the passed parameter options object.
Then use the set value, otherwise use the default value to invoke the method:

Foo ({name: "A", Length:4,datatype: "JSON"}); foo ({name: "a"}); foo ();

　　Writing jquery Plugins

To encapsulate jquery's plugin for your method, you first need to frame the JavaScript file with the following code:

;(function ($) {    //write plug-in code here}) (JQuery);

　　1. Object-level plug-in development, that is, to add methods to the JQuery object, encapsulating the object method plug-in, such as: parent (), AppendTo ()

;(function ($) {$.fn.extend ({  "color": function (value) {  //write plug-in code here}  });}) (JQuery);

Or

;(function ($) {$.fn.color=function (value) {   //write plug-in code here}}) (JQuery);

The method here provides a parameter value, if the method is called when the value is passed in, then the value is used to set the font color, or to get a match without this font color value

;(function ($) {$.fn.extend ({"Color": function (value) {return this.css ("Color", value);});}) (JQuery);

　　
Inside the plug-in, this refers to a jquery object, not a normal DOM object. The next thing to note is that if a plug-in does not need to return a specific value such as a string, it should be made to be linked.

To do this, return this object directly, because the CSS () method also returns the object that called it, which is also the this, so the code can be written in the form above;

The call can be directly written as : $ ("div"). Color ("red");

In addition, if you want to define a set of plugins, you can use the following notation:

;(function ($) {$.fn.extend ({"Color": function (value) {//write plug-in code here}, "Border": function (value) {//write plug-in code here}, "Background" : function (value) {//write plug-in code here}});}) (JQuery);

　　2. Plug-ins that encapsulate global functions

Such plugins add a function inside the jquery namespace. This kind of plug-in is very simple, just a normal function, there is no particular need to pay attention to the place.

For example, two new functions are added to remove the left and right spaces.

First, construct an object that puts the function names and functions in, where the name/value pairs are the function names and the body of the functions, respectively.
The jquery object is then extended directly using the Jquery.extend () method

The jquery code is as follows:

;(function ($) {$.extend ({ltrim:function (text) {return (text| | "). Replace (/^\s+g, "");},rtrim:function (text) {return (text| | "). Replace (/\s+$/g, "");});}) (jQuery), or; (function ($) {$.ltrim=function (text) {return (text| | "). Replace (/^\s+g, "");},$.rtrim=function (text) {return (text| | "). Replace (/\s+$/g, "");}}) (JQuery);

* (text| | "") section is used to prevent passing in the text this string variable is in a special state that is undefined, if text is undeined, the string "" is returned, otherwise the string text is returned.

This processing is to ensure that the next string substitution method replace () method does not error

* Use regular expressions to replace the first end of the space

Call Function:

$ ("Trimtest"). Val (Jquery.trim ("test") + "\ n" +jquery.ltrim ("test") + "\ n" +jquery.rtrim ("Test"));

After the code is run, the spaces on the left and right sides of the first string in the text box are deleted.
The second line of the string is deleted only on the left side of the space.
The third row of strings is deleted only on the right side of the space.

jquery Custom Plugins