How to define a jquery plugin

The time to extend jquery. The core approach is the following two types:

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

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

$.extend (object)

Example:

1234567

/* $.extend 定义与调用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1: function () { alert("执行方法一"); } });//定义$.fun1();//调用

　　

12345678910111213141516171819

$.fn.extentd(object) /*  $.fn.extend 定义与调用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$.fn.extend({ fun2: function() { alert("执行方法2"); } });$(this).fun2();//等同于 $.fn.fun3 = function() { alert("执行方法三"); }$(this).fun3();

　　

Defining the basic structure of the jquery plugin

1. Define the scope:

Define a private scope for the plug-in. External code cannot directly access the inside of the plugin. Plug-in internal code is not subject to external interference, and will not contaminate global variables.

12345

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

　　

2. Add extension methods for plugins:

STEP01 defines the scope of the jquery (function ($) {    //STEP02 plug-in extension method name    $.fn.easyslider = function (options) {            }}) ( JQuery);

3. Set Default values:

12345678910111213141516

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

　　

Where: var options = $.extend (defaults, options) meaning. 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:

1234567891011121314151617181920

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

　　

5. Link calls that support jquery:

In order to achieve the effect of a link call, you must return each element of the loop

123456789101112131415161718192021

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

　　

6. Methods in the plugin:

In the plug-in definition of the method, the outside world can not be directly called, I defined in the plugin method also does not pollute the external environment.

STEP01 defines the scope of the jquery (function ($) {    //step03-a plugin default Value property    var defaults = {        previd: ' prevbtn ',        prevtext: ' Previous ',        nextid: ' nextbtn ',        nexttext: ' Next '        //...    };    Step06-a defines the method in the plugin    var showLink = function (obj) {        $ (obj). Append (function () {return "(" + $ (obj). attr ("href") + ")" });    }     STEP02 plug-in extension method name    $.fn.easyslider = function (options) {        //step03-b merge user-defined property, default property        var options = $. Extend (defaults, options);        STEP4 supports the jquery selector        //STEP5 supports chained call        return This.each (function () {            //step06-b defines the method in the plug-in            ShowLink ( (this);})        ;}    ) (JQuery);

　　

How to define a jquery plugin