JQuery package, plug-in analysis

Today, small-size brother suddenly interested in learning jquery. When studying a good plug -in, and suddenly have a question, that is why many Danale predecessors in the encapsulation of their own writing plugin always follow this format: (function ($) {}) (jQuery);. Or is this how the method object is defined? such as:$.fn.add=function () {} What!! Especially what is the fn in the latter $.fn ? (Do not laugh at me,,, small-size elder brother is also a beginner, there are many did not reach a deep understanding of the realm. Therefore, I have to use the Internet to draw a summary of others, and then add my own understanding, the achievement of a piece of blog post!

As we all know, jquery is a powerful library of utility and powerful open source with a variety of selectors. As a result, many seniors like to use it as a framework to develop their own plugins. So I envy you,,,,,

Here's a look at the types of plugins:

1. Package Object Method

2. Encapsulating global Functions

3, selector plug-in and so on

Encapsulating Object Methods:

This plug-in is the most common plug-in that encapsulates object methods and is used to manipulate jquery objects obtained through selectors . Such plug-ins can take advantage of the jquery selector, and a significant portion of jquery's approach is "plugged" into the kernel through this form within the jquery scripting library, such as theParent () method, the AppendTo () method , and so on. These methods are now the way that jquery itself comes into being. Normally, we can use it directly, just introduce the jquery library.

Encapsulate Global functions:

Separate functions can be added to the jquery namespace, such as the commonly used Jquery.ajax (), Jquery.trim () methods, and so on, all within jquery as a global function Plug-in attached to the kernel.

Selector plugin:

Although the jquery selector is very powerful, in a few cases, you will need to use a selector plug- in to augment some of your favorite selectors.

jquery Selector plug-in mechanism:

The jQuery.fn.extend () and jquery.extend () methods provided by jquery are not very difficult to understand, and they are used to extend the functionality of jquery.

The jQuery.fn.extend () method is used to extend the first of the 3 types mentioned above, andjquery.extend () is used to extend the latter two plugins. Both methods accept a parameter, which is of type Object. the " name/value pairs " of the object objects represent " function or method name/function Body ", respectively.

Some tips for writing jquery plugins

1,jquery plug-in file name is recommended named jquery.[ Plug-in 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, add a semicolon on the head of the plug-in to avoid other people's non-standard code to affect the plug-in.

4. All methods or function plug-ins should end with a semicolon to avoid problems when compressing.

5. Plug-ins should return a jquery object to ensure that the plug-in can be chained, unless the plugin needs to return some variables that need to be retrieved.

6, facilitate the Jquery.extend () method to set the default parameters of the plug-in method, increase the usability of the plug-in.

jquery Plugin structure:

Code:

;(function ($) {

/* Put the plug-in code here, you can use it as a jquery alias */

}) (JQuery);

Encapsulating jquery Object Method plug-in combat

Function: Sets the color of the selected element, gets the color of the first selected element

Name: Jquery.color.js

Structure:

Code:

;(function ($) {

$.fn.extend ({

Write the plugin code here

});

}) (JQuery);

Idea: Set a parameter value, if the call passed the value of the parameter, is to set the color, otherwise not get color. Getting and setting colors can be done using the CSS method provided by jquery.

The completion code is as follows:

;(function ($) {

$.fn.extend ({

"Color": function (value) {

if (value==undefined) {

return this.css ("color");

}else{

return this.css ("Color", value);

}

}

});

}) (JQuery);

Since the CSS () method takes the first element in the color, it is directly used This.css ("color").

If it is a set of plugins, the code can be as follows:

;(function ($) {

$.fn.extend ({

"Color": function (value) {

Plug-in code

},

"Border": function (value) {

Plug-in code

}，

"Background": function (value) {

Plug-in code

}

});

}) (JQuery);

Combat two: Individually remove the left side or separate the right side of the space

Name: Jquery.lrtrim.js

The structure code is as follows:

;(function ($) {

$.extend ({

Ltrim:function (text) {

Plug-in code

}，

Rtrim:function (text) {

Plug-in code

}

});

}) (JQuery);

The code for the complete removal of the left and right spaces using the regular is as follows:

;(function ($) {

$.extend ({

Ltrim:function (text) {

Return (text| | ""). Replace (/^\s+/g, ""/);

},

Rtrim:function (text) {

Return (text| | ""). Replace (/\s+$/g, ""/);

}

});

}) (JQuery);

The jquery selector works:

jquery Selector parsing first uses a set of regular expressions to resolve the selector and then executes a function, called a selection function, for each of the resolved selectors. Finally, depending on whether the return value of this selection function is true or FALSE to determine if this element is preserved, the matching element node can be found.

such as: $ ("DIV:GT (1)"), the selector will first get all the <div> elements, and then implicitly traverse the <div> elements, and each of these <div> elements as parameters, together with the "1" in parentheses And some parameters are passed along to the GT corresponding selector function to judge. If True is left, otherwise it is not preserved. The resulting result is a set of <div> elements that meet the requirements.

The selector function accepts a total of 3 parameters, in the following form:

The code is as follows:

function (a,i,m) {

//...

}

The first argument is a, which refers to the current traversal to the DOM element.

The second parameter is I, which refers to the index value of the traversed DOM element, from 0

Begin.

The third parameter is M, which is the product of the further parsing of the jquery regular parsing engine, which is an array, the most important of which is a m[3], which is the number "1" in parentheses in $ ("DIV:GT (1)").

There are already lt,gt and EQ selectors in jquery, so write a selector between the two (between).

Function: Select an element with an index value between A and B (A<b,a, B is a positive integer)

Name: Jquery.between.js

Agency Code:

;(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 with the index value I, if I in m[3] the range represented by the return true, otherwise false.

The complete code is 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 the string form of numbers into numbers;

This article is from the "focus on Technology focus Front" blog, be sure to keep this source http://oxoxo.blog.51cto.com/9301862/1575030

JQuery encapsulation, plug-in analysis