jquery defines the plug-in method _jquery

Some Web developers will refer to a jquery class library, then write a $ ("#"), $ (".") on a Web page, and write a few years to say that they are very familiar with jquery. I used to be one of those people, until there was a technical exchange in the company, I changed my view of myself.

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

$.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

$.extend (object)

Example:

* * $.extend definition and call * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
N:function () {Alert ("execution method One");});  /define
$.fun ()//Call
$.fn.extentd (object)/*
$.fn.extend definition and Call
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
$.fn.extend ({fun:function () {alert ("Execute Method");});
$ (this). Fun ();
Equivalent to
$.fn.fun = function () {alert ("Execute method Three");}
$ (this). Fun ();

Define the basic structure of the jquery plug-in

1. Define scope:

Define a private scope for the plug-in. Outside code cannot directly access the inside of the plug-in. The plug-in's internal code is not subject to external interference and does not contaminate global variables.

  Step defines the scope
(function ($) {
}) (jquery) of jquery;

2. Add extension methods for Plug-ins:

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

3. Set Default values:

Step defines the scope of jquery
(function ($) {
  //STEP-A plug-in default Value property
  var defaults = {
    previd: ' prevbtn ',
    Prevtext: ' Previous ',
    nextid: ' nextbtn ',
    nexttext: ' Next '
    //...
  };
  The step plug-in extension method name
  $.fn.easyslider = function (options) {
    //step-b merge user custom properties, default Properties
    var options = $.extend ( defaults, options);
  }
(JQuery);

Among them: var options = the meaning of $.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:

 Step defines the scope of jquery
(function ($) {
  //STEP-A plug-in default Value property
  var defaults = {
    previd: ' prevbtn ',
    prevtext : ' Previous ',
    nextid: ' nextbtn ',
    nexttext: ' Next '
    //...
  };
  The step plug-in extension method name
  $.fn.easyslider = function (options) {
    //step-b merge user custom properties, default Properties
    var options = $.extend ( defaults, options);
    Step supports the jquery selector
    This.each (function () {
    });
  }
) (JQuery);

5. Link calls to support jquery:

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

Step defines the scope of jquery
(function ($) {
  //STEP-A plug-in default Value property
  var defaults = {
    previd: ' prevbtn ',
    prevtext : ' Previous ',
    nextid: ' nextbtn ',
    nexttext: ' Next '
    //...
  };
  The step plug-in extension method name
  $.fn.easyslider = function (options) {
    //step-b merge user custom properties, default Properties
    var options = $.extend ( defaults, options);
    Step supports the jquery selector
    //step support chained call return
    This.each (function () {
    });
  }
) (JQuery);

6. The method in the plugin:

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.

STEP01 defines the scope of jquery
(function ($) {
  //step03-a plug-in default value attribute
  var defaults = {
    previd: ' prevbtn ',
    Prevtext: ' Previous ',
    nextid: ' nextbtn ',
    nexttext: ' Next '
    //...
  };
  Step06-a defines methods in Plug-ins
  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 custom attribute, default property
    var options = $. Extend (defaults, options);
    STEP4 supports the jquery selector
    //STEP5 support chained call return
    This.each (function () {
      //step06-b defines method Showlink in Plug-ins
      ( This);} ()})
(JQuery);

Through the above content to introduce the jquery definition plug-in method, I hope you like.