jquery Plugin Development

What is a jquery plugin and how does the jquery plugin work?

The jquery plugin is a way to extend the jquery prototype object, using the method called the JQuery object method.

Here's an example: $ ("a"). CSS ("Color", "red"). Each jquery object will contain the DOM action method defined in jquery, where you use $ to select the A element and return a jquery object of the A element, so this object can use the DOM action method defined in jquery. How do jquery objects get these methods?

Jquery.fn=jquery.prototype, which means that the Jquery.fn object is a prototype object of JQuery, The DOM manipulation methods of jquery are defined on the Jquery.fn object, and the jquery object can inherit these methods through the prototype .

Basic version of jquery plugin

Write a basic plugin that changes the color of the label content to do this:

$.fn.changestyle=function (COLORSTR) {

THIS.CSS ("Color", colorstr);

}

Use: $ ("P"). Changestyle ("Red");

The plug-in satisfies the chain call (the key point of implementing the chained call is a line of code return this, which returns the current jquery object after the plug-in executes, and then continues to invoke other jquery methods after the plug-in method.) ）：

$.fn.changestyle = function (colorstr) {
THIS.CSS ("Color", colorstr);
return this;
}

This allows you to invoke other methods in a chained way: $ ("P"). Changestyle ("Red"). AddClass ("Red-color");

jquery plugin to prevent $ sign pollution

Many JS libraries use the $ symbol, although jquery can use the Jquery.noconflict () method to hand over the $ symbol, but if the plugin is defined using the $.fn object, then those plugins will be affected by other JS libraries using the $ variable. In this case, the plug-in can be encapsulated by means of an immediate execution function using the pass parameter . The form is as follows: (function ($) {
$.fn.changestyle = function (colorstr) {
THIS.CSS ("Color", colorstr);
return this;
}
}) (JQuery);

jquery plug-ins that can accept parameters

Continuing with the above example, I would like to add a feature for this plugin to set the content text size of the tag element:
(function ($) {
$.fn.changestyle = function (colorstr,fontsize) {
THIS.CSS ("Color", colorstr). CSS ("fontSize", fontsize+ "px");
return this;
}
}) (JQuery);

If you pass in more parameters, you can define a parameter object, and then put the parameters that need to be passed to the plug-in in the Parameter object . The plug-in definition is as follows:

(function ($) {
$.fn.changestyle = function (option) {
THIS.CSS ("Color", option.colorstr). CSS ("fontSize", option.fontsize+ "px");
return this;
}

}) (JQuery);

How to use: $ ("P"). Changestyle ({colorstr: "Red", fontsize:14});

It's also a good thing that we can define some default values for some parameters inside the plug-in by putting parameters into one object:

(function ($) {
$.fn.changestyle = function (option) {
var defaultsetting = {colorstr: "green", fontsize:12};
var setting = $.extend (defaultsetting,option);
THIS.CSS ("Color", setting.colorstr). CSS ("fontSize", setting.fontsize+ "px");
return this;
}
}) (JQuery);

The above code uses the $.extend method, which functions:

1, merging two objects, that is, the property value of the existence of the following object is assigned to the first object.

2, is used to extend the jquery object itself.

How to use: $ ("P"). Changestyle ({colorstr: "Red"});
this definition of plug-ins, when we use if not fontsize, then use the plug-in jquery Object tag content will be set to the default 12px.
Note: When defining default parameters for a plug-in, be sure to write the default parameters inside the plug-in method so that the scope of the default parameters is inside the plug-in.

The way to define plug-ins is defined by $.FN in addition to the above, and there is another way to define plugins, which is to use the $.fn.extend method. Similar to the following wording:
(function ($) {
$.fn.extend ({
Changestyle:function (option) {
var defaultsetting = {colorstr: "green", fontsize:12};
var setting = $.extend (defaultsetting,option);
THIS.CSS ("Color", setting.colorstr). CSS ("fontSize", setting.fontsize+ "px");
return this;
}
});
}) (JQuery);
Both the Ps:$.extend method and the $.fn.extend method can be used to extend the jquery function, and by reading the jquery source we can find the essential difference between the two methods, that isThe $.extend method is to extend the method on the jquery global object, and the $.fn.extend method is to extend the method on the jquery object selected by the selector. So the common method of extending jquery generally uses the $.extend method, which defines plug-ins generally using the $.fn.extend method。

jquery Plugin Development