Do not define jquery plug-ins don't say jquery

Ii. Universal knowledge of jquery

Knowledge 1: When writing plugins with jquery, the core approach is as follows two:

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

$.fn.extend (object) can be understood as adding a method to a jquery instance.

Basic definition and invocation:

/* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1: function () { alert( "执行方法一" ); } }); $.fun1(); /* $.fn.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.fn.extend({ fun2: function () { alert( "执行方法2" ); } }); $( this ).fun2(); //等同于 $.fn.fun3 = function () { alert( "执行方法三" ); } $( this ).fun3();Knowledge 2:jquery (function () {}); differs from (function ($) {}) (JQuery): jQuery( function () { }); //相当于 $(document).ready( function () { }); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ ( function ($) { })(jQuery); //相当于 var fn = function ($) { }; fn(jQuery);

JQuery (function () {}) is the code in the execution method after a DOM element has been loaded.

(function ($) {}) (JQuery); An anonymous function is defined, where jquery represents the argument for this anonymous function. Often used in jquery plug-in development, the role of defining the plug-in's private domain.

Third, the development of jquery plug-in standard structure

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

//step01 定义JQuery的作用域 ( function ($) { })(jQuery);

Don't underestimate this scope, just as important as C # defines a class keyword.

2. Expand a plugin for jquery: When you have defined the scope of jquery, the most important and most urgent step is to add an extension method to this jquery instance. First we name a method for this Jqury plugin, called Easyslider, when we call this plugin, we can pass some parameters to the plugin through the options. The specific definition method looks like the following code:

//step01 定义JQuery的作用域 ( function ($) {   //step02 插件的扩展方法名称   $.fn.easySlider = function (options) {      } })(jQuery);

So far, one of the simplest jquery plugins has been completed. The call can be ("#domName"), Easyslider ({}), or ("#domName"). Easyslider ({}), or (". Domname"). Easyslider ({}) or more ways to invoke the plugin.

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

//step01 定义JQuery的作用域 ( function ($) {   //step03-a 插件的默认值属性   var defaults = {    prevId: ‘prevBtn‘ ,    prevText: ‘Previous‘ ,    nextId: ‘nextBtn‘ ,    nextText: ‘Next‘    //……   };   //step02 插件的扩展方法名称   $.fn.easySlider = function (options) {    //step03-b 合并用户自定义属性，默认属性    var options = $.extend(defaults, options);   } })(jQuery);

The people who do the procedure like to innovate, change the variable name, change a line ah these. When you see the use of var defaults = {} to represent a default property, when you write the jquery plugin to think differently, so with Var default01 ={}, var default02 ={} to represent the default properties. Then the default attribute names are varied and getting worse. It is recommended that when you write a jquery plugin, the default properties are defined by using the defaults variable to represent the default property, which makes the code more readable.

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

var obj01 = { name: "英文名：Sam Xiao" , age: 29, girlfriend: { name: "Yang" , age: 29} } var obj02 = { name: "中文名：XiaoJian" , girlfriend: { name: "YY" } }; var a = $.extend(obj01, obj02); var b = $.extend( true , obj01, obj02); var c = $.extend({}, obj01, obj02);

By copying the code into the development environment and looking at the value of a,b,c,d, we understand the meaning of var options = $.extend (defaults, options). Represents the options to overwrite the value of the defaults and assigns the value to the options.
In a plug-in environment, the value that represents the user setting overrides the default value of the plug-in, or the default value of the plug-in if the user does not have a property that sets the default value.

4, support jquery selector: jquery selector, is a good feature of jquery, if our plug-in writing does not support jquery selector, is indeed a great pity. In order to enable your jquery plugin to support multiple selectors, our code should be defined like this:

//step01 定义JQuery的作用域 ( function ($) {   //step03-a 插件的默认值属性   var defaults = {    prevId: ‘prevBtn‘ ,    prevText: ‘Previous‘ ,    nextId: ‘nextBtn‘ ,    nextText: ‘Next‘    //……   };   //step02 插件的扩展方法名称   $.fn.easySlider = function (options) {    //step03-b 合并用户自定义属性，默认属性    var options = $.extend(defaults, options);    //step4 支持JQuery选择器    this .each( function () {    });   } })(jQuery);5, Support jquery link call: The above code looks perfect, in fact, it is not so perfect. Link calls are not supported so far. In order to achieve the effect of a link call, you must return each element of the loop //step01 定义JQuery的作用域 ( function ($) {   //step03-a 插件的默认值属性   var defaults = {    prevId: ‘prevBtn‘ ,    prevText: ‘Previous‘ ,    nextId: ‘nextBtn‘ ,    nextText: ‘Next‘    //……   };   //step02 插件的扩展方法名称   $.fn.easySlider = function (options) {    //step03-b 合并用户自定义属性，默认属性    var options = $.extend(defaults, options);    //step4 支持JQuery选择器    //step5 支持链式调用    return this .each( function () {    });   } })(jQuery);

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

6, Plug-in methods: often implement a plug-in function requires a lot of code, it is possible to hundreds of lines, thousands of lines, even tens of thousands of lines. We structure this code and we have to use function. In the 1th has been said, in the plug-in definition of the method, the outside world can not directly call, I defined in the plug-in method also does not pollute the external environment. Now try to define some methods in the plugin:

//step01 定义JQuery的作用域 ( function ($) {   //step03-a 插件的默认值属性   var defaults = {    prevId: ‘prevBtn‘ ,    prevText: ‘Previous‘ ,    nextId: ‘nextBtn‘ ,    nextText: ‘Next‘    //……   };   //step06-a 在插件里定义方法   var showLink = function (obj) {    $(obj).append( function () { return "(" + $(obj).attr( "href" ) + ")" });   }   //step02 插件的扩展方法名称   $.fn.easySlider = function (options) {    //step03-b 合并用户自定义属性，默认属性    var options = $.extend(defaults, options);    //step4 支持JQuery选择器    //step5 支持链式调用    return this .each( function () {     //step06-b 在插件里定义方法     showLink( this );    });   } })(jQuery);Step step06-a: Define a method called Showlink () in the plugin; This method can not be called directly outside the plugin, a bit like a private method in C # class, can only meet the internal use of plug-ins. Step Step06-b demonstrates how to invoke the inside of a plug-in method.

Do not define jquery plug-ins don't say jquery