Types of jquery Plug-ins
1. Encapsulation Object method
This plug-in is the most common type of plug-in that encapsulates the object method and is used to manipulate jquery objects obtained by selectors. Such plug-ins can play a powerful role in the jquery selector, and a significant portion of the jquery approach is "plugged" into the kernel within the jquery script library, such as the parent () method, the Appendto () method, and so on.
2. Encapsulate Global functions
You can add a separate function to the jquery namespace. such as the commonly used Jquery.ajax () method, to the Jquery.trim () method, is the internal jquery as a global function plug-ins attached to the kernel.
3. Selector Plugin
Although the selection of jquery is very powerful, in a few cases, still need to use the selector plug-ins to expand some of their favorite selectors.
The mechanism of the jquery plugin
The simple mechanism of the jquery plug-in is to use the JQuery.fn.extend () and Jquery.extend () methods provided by jquery to extend the functionality of jquery.
JQuery.fn.extend () is used to extend the first of the 3 types mentioned above, and Jquery.extend () is used to extend the latter two plug-ins. Both of these methods accept a parameter, which is type object. The "name/value pairs" of object objects represent the function or method name/function body respectively.
Some tips for writing jquery plug-ins
1, jquery plug-in file name recommended named jquery. [plugin name].js to avoid confusion with other JS library plug-ins.
2. All object methods should be attached to the Jquery.fn object, and all global functions should be attached to the jquery object itself.
3, in the plug-in head plus a semicolon to avoid other people's irregular code to the plug-in impact.
4, all methods or function plug-ins, should end with a semicolon to avoid problems when compression
5, unless the plug-in needs to return a number of variables to be obtained, Plug-ins should return a jquery object to ensure that the plug-in can be chained operation.
6, to facilitate the Jquery.extend () method to set the default parameters of the plug-in method to increase the availability of plug-ins.
jquery Plug-in Structure
The jquery plug-in structure is as follows:
Copy Code code as follows:
;(function ($) {
/* Here is the plugin code, you can use $ as the alias of jquery * *
}) (JQuery);
Encapsulation jquery Object Method plug-in Combat
Function: Sets the color of the selected element, gets the color of the first element selected
Name: Jquery.color.js
Structure:
Copy Code code as follows:
;(function ($) {
$.fn.extend ({
Here to write the plug-in code
});
}) (JQuery);
Idea: Set a parameter value, if the call passed the value of this parameter, that is, set the color, otherwise to get color. Get and set colors can be provided in jquery with CSS methods
Complete code:
Copy Code code as follows:
;(function ($) {
$.fn.extend ({
' Color ': function (value) {
if (value==undefined) {
return this.css ("color");
}
else{
return this.css ("Color", value);
}
}
});
}) (JQuery);
Because the CSS () method has the first element to be judged when getting the color, the THIS.CSS ("color") can be used directly here.
If you are a group of plug-ins, you can use the following notation:
Copy Code code as follows:
;(function ($) {
$.fn.extend ({
' Color ': function (value) {
Plug-in code
}，
' Border ': function (value) {
Plug-in code
}，
' Background ': function (value) {
Plug-in code
}
});
}) (JQuery);
Plug-in testing: http://demo.jb51.net/js/2012/jquery_demo/Encapsulation jquery object Method plug-in demo.html
Encapsulating global Function Plug-in combat
Function: Remove the left or remove the right space alone
Name: Jquery.lrtrim.js
Structure:
Copy Code code as follows:
;(function ($) {
$.extend ({
Ltrim:function (text) {
Plug-in code
}，
Rtrim:function (text) {
Plug-in code
}
});
}) (JQuery);
Idea: This type of plug-in is to add a function inside the jquery namespace, directly using regular expressions.
Complete code:
Copy Code code as follows:
;(function ($) {
$.extend ({
Ltrim:function (text) {
Return (text| | ""). Replace (/^\s+/g, "");
},
Rtrim:function (text) {
Return (text| | ""). Replace (/\s+$/g, "");
}
});
}) (JQuery);
Plug-in testing: http://demo.jb51.net/js/2012/jquery_demo/package global function jquery Plugin demo.html
Custom Selector Plug-in Combat
jquery is known for its powerful selectors, so what is the working principle of the jquery selector?
The choice parser for jquery first uses a set of regular expressions to parse the selector and then executes a function for each parsed selector called the Select function. Finally, depending on whether the return value of this selection function is True or false, this element is preserved so that a matching element node can be found.
such as $ ("DIV:GL (1)"), the selector first takes all the <div> elements and then implicitly iterates through the <div> elements and takes these <div> elements as arguments, along with the "1" in parentheses. And some parameters are passed to the GT corresponding selector function to judge. If true, it is retained, otherwise it is not preserved, so that the resulting result is a collection of <div> elements that meet the requirements.
The function of the selector accepts 3 parameters altogether, in the form as follows:
Copy Code code as follows:
function (a,i,m) {
//...
}
The first argument is a, which refers to the DOM element that is currently traversed.
The second parameter, I, refers to the index value of the DOM element that is currently traversed, starting at 0.
The third parameter is M, which is further parsed by the jquery regular parsing engine, is an array: one of the most important is m[3], and in $ ("DIV:GL (1)") is the number "1" in parentheses.
There are already lt,gt and EQ selectors in jquery, so write a selector somewhere between the two (between).
Function: Select an element with an index value of between A and B (A<b,a, B is a positive integer)
Name: Jquery.between.js
Structure:
Copy Code code as follows:
;(function ($) {
$.extend ($.expr[":"],{
Between:function (a,i,m) {
Plug-in code
}
});
}) (JQuery);
Idea: In the above three parameters, M[3] is the form of "a,b", so the m[3] is separated by "," and then compared to index value I, if I return true between the ranges represented by M[3, false
Complete code:
Copy Code code as follows:
;(function ($) {
$.extend ($.expr[":"],{
Between:function (a,i,m) {
var temp=m[3].split (",");
Return +temp[0]<i&&i<+temp[1];
}
});
}) (JQuery);
Note: Here use +temp[0], +temp[1] to convert numbers in string form into numbers
Plug-in test: Http://demo.jb51.net/js/2012/jquery_demo/jQuery Custom Selector plugin demo.html
Summary
This article mainly introduces the types of jquery plug-ins, mechanisms, and for each type of combat, hope to be helpful to everyone. I am also a beginner of jquery, welcome everyone to Pat Bricks.
Reference books: "Sharp jquery" (People's post and Telecommunications press)
