Basic knowledge of writing jquery Plug-ins _jquery

Universal jquery Knowledge

Knowledge 1: When using jquery to write Plug-ins, the core of the method is as follows two:

Copy Code code as follows:

$.extend (object) can be understood to add a static method to jquery.

$.fn.extend (object) can be understood to add a method to the jquery instance.

Basic definition and invocation:

Copy Code code as follows:

/* $.extend definition and invocation
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend ({fun1:function () {Alert ("execution method One");});
$.fun1 ();
/* $.fn.extend definition and invocation
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend ({fun2:function () {alert ("Execute Method 2");});
$ (this). FUN2 ();
Equal to
$.fn.fun3 = function () {alert ("Execute method Three");}
$ (this). FUN3 ();

Knowledge 2:jquery (function () {}); differs from (function ($) {}) (JQuery):

Copy Code code as follows:

JQuery (function () {});
Equivalent
$ (document). Ready (function () {});
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) {}) (JQuery);
Equivalent
var fn = function ($) {};
FN (jQuery);

JQuery (function () {}) is the code that executes the method after a DOM element has been loaded.
(function ($) {}) (JQuery); Defines an anonymous function in which jquery represents the actual parameter of the anonymous function. Typically used in the development of jquery Plug-ins, it plays a role in defining the private domain of plug-ins.

Three: Develop jquery plug-in standard structure

1, define scope: Define a jquery plugin, first put the code of this plug-in in a place that is not disturbed by the outside world. If you're professional, you want to define a private scope for this plug-in. External code cannot directly access the code inside the plug-in. The code inside the plug-in does not pollute the global variable. In a certain role decoupling the plug-in and the operating environment dependence. Having said so much, how do you define a private scope for a plug-in?

Copy Code code as follows:

(function ($) {
}) (JQuery);

So far, one of the simplest jquery plug-ins has been completed. The call can be $ ("#domName"), or $ (". Domname"). Easyslider ({}) or more to invoke the plug-in.

3, set the default value: Define a jquery plugin, like defining a. NET control. A perfect plugin, should be a more flexible attribute.  Let's look at this code: <asp:textbox id= "TextBox1" width= "height=" runat= "Server" ></asp:TextBox>. The TextBox control has the width and Height properties, and the user can set the height and width of the control freely when using a textbox, or it can not set the value, because the control itself has a default value. When you are ready to develop a jquery plug-in, you should have a default value when the user does not specify a property, and in jquery you can do so in two steps, looking at the following code step03-a,step03-b.

Copy Code code as follows:

STEP01 defines the scope of jquery
(function ($) {
Default Value properties for Step03-a plug-ins
var defaults = {
Previd: ' Prevbtn ',
Prevtext: ' Previous ',
NextID: ' Nextbtn ',
Nexttext: ' Next '
......
};
Extension method Name of the STEP02 plug-in
$.fn.easyslider = function (options) {
Step03-b Merge user custom properties, default properties
var options = $.extend (defaults, options);
}
}) (JQuery);

Do the program people like innovation, change the name of the variable, change a line ah these. When you see Using var defaults = {} to represent a default property, you want to be different when you write your jquery plug-in, so use the Var default01 ={}, var default02 ={} to represent the default properties. Then the default property names are all sorts of, getting worse. Therefore, it is recommended that when writing jquery plug-ins, when defining default properties, the defaults variable is used to represent the default property, and the code is more readable.

Someone saw this line of code: var options = $.extend (defaults, options), frowned, expressed puzzled. Let's look at the following code:

Copy Code code as follows:

var obj01 = {name: "English name: Sam Xiao", age:29, girlfriend: {name: "Yang", age:29}}
var obj02 = {name: "Chinese name: Xiaojian", girlfriend: {name: "YY"}};

var a = $.extend (obj01, obj02);
var B = $.extend (true, obj01, obj02);
var c = $.extend ({}, obj01, obj02);
var d = $.extend (true,{}, obj01, obj02);

Copy the code into the development environment, look at the value of A,b,c,d, and understand the meaning of the var options = $.extend (defaults, options). Indicates options to cover the value of the defaults and assigns the value to the options.
In a plug-in environment, it represents the user-set value, overrides the plug-in's default value, or retains the plug-in's default value if the user does not have a default value set.

4, support jquery selector: jquery selector, is a good feature of jquery, if our plug-ins are written to not support the jquery selector, is indeed a small regret. If you make your own jquery plugin support multiple selectors, our code should define this:

Copy Code code as follows:

STEP01 defines the scope of jquery
(function ($) {
Default Value properties for Step03-a plug-ins
var defaults = {
Previd: ' Prevbtn ',
Prevtext: ' Previous ',
NextID: ' Nextbtn ',
Nexttext: ' Next '
......
};
Extension method Name of the STEP02 plug-in
$.fn.easyslider = function (options) {
Step03-b Merge user custom properties, default properties
var options = $.extend (defaults, options);
STEP4 Support jquery Selector
This.each (function () {

});
}
}) (JQuery);

5, support for jquery link calls: The top code looks perfect, but it's not so perfect. Link calls are not supported so far. In order to achieve the effect of the link call, you must return each element of the loop

Copy Code code as follows:

STEP01 defines the scope of jquery
(function ($) {
Default Value properties for Step03-a plug-ins
var defaults = {
Previd: ' Prevbtn ',
Prevtext: ' Previous ',
NextID: ' Nextbtn ',
Nexttext: ' Next '
......
};
Extension method Name of the STEP02 plug-in
$.fn.easyslider = function (options) {
Step03-b Merge user custom properties, default properties
var options = $.extend (defaults, options);
STEP4 Support jquery Selector
STEP5 Support Chained calls
Return This.each (function () {

});
}
}) (JQuery);

Such a definition can support link calls. such as support for such calls: $ (". Div"). Easyslider ({previd: "", Prevtext: "}). css ({" Border-width ":" 1 "," Border-color ":" Red "," Border-bottom-style ":" Dotted "});

6, Plug-ins in the method: often implement a plug-in function requires a lot of code, there may be hundreds of lines, thousands of lines, or even tens of thousands of lines. We have to structure this code, we have to use function. In the 1th already said, in the plug-in definition of the method, the outside can not directly call, I in the plug-in definition of the method also does not pollute the external environment. Now try to define some methods in the plugin:

Copy Code code as follows:

STEP01 defines the scope of jquery
(function ($) {
Default Value properties for Step03-a plug-ins
var defaults = {
Previd: ' Prevbtn ',
Prevtext: ' Previous ',
NextID: ' Nextbtn ',
Nexttext: ' Next '
......
};
Step06-a define methods in Plug-ins
var showlink = function (obj) {
$ (obj). Append (function () {return "(" + $ (obj). attr ("href") + ")"});
}

Extension method Name of the STEP02 plug-in
$.fn.easyslider = function (options) {
Step03-b Merge user custom properties, default properties
var options = $.extend (defaults, options);
STEP4 Support jquery Selector
STEP5 Support Chained calls
Return This.each (function () {
Step06-b define methods in Plug-ins
Showlink (this);
});
}
}) (JQuery);

Step step06-a: In the plug-in definition of a method called Showlink (); This method can not be directly called outside the plug-in, a bit like a C # class in a private method, can only meet the internal use of plug-ins. Step Step06-b demonstrates how to invoke a method inside a plug-in.