The basics of writing your own jquery plugin

1, write jquery plug-ins to follow the naming convention, usually, jquery plug-ins in this mode to name: Jquery.pluginName.js, compressed version: Jquery.pluginName.min.js

2. There are 3 ways to write jquery plug-ins, the first of which is to write plug-ins through the prototype properties of jquery functions. The second option is to use the Jquery.extend () method. The third is to write plugins using the powerful jquery UI Widget factory. Here I choose to write with the prototype properties of the jquery function.

2.1 jquery source has such a code: JQUERY.FN = Jquery.prototype = {//jquery goes here//}, this code means that the jquery function prototype object is assigned to the FN property of jquery, in the Jqu Adding a method on the Ery.fn property is equivalent to adding a method on a jquery prototype object. We are writing jquery plugins through Jquery.fn.

2.2 A small example:

 1  (function   ($) { 2  $.fn.highlight1= function   () { 3  this . css (' backgroundcolor ', ' #fffceb '). CSS (' color ', ' #d85030 ')   4  return  this  ;  5  }  6 }) (jQuery); 

In this example, we have extended a highlight1 () method for jquery, and we can invoke the Highlight1 () method of our extension as we call the jquery default method.  1 $ (selector). highlight1 (); 。 This code will change the background color and font color of the matching selector to the color set in the Highlight1 () method.

In this way, a simple jquery plugin is written and completed. Maybe some friends will wonder, why should renturn this? The reason is that our own extended jquery approach also supports the most essential part of jquery-chaining calls. Return this is the jquery method that allows us to expand ourselves to support even invocation. Because this is also a jquery object, it is possible to return it and then call other methods in a chain.

2.3 Perfect for the above examples.

The above example has a less-than-perfect place, when calling the Highlight1 () method, only the background and font color of the matching element can be changed to our pre-set color, which is not good. It's best to let the user customize the color they want, and then we'll modify the Highlight1 () method. The specific method is that we can add a parameter to the method, allowing the user to use the parameters to pass in the object.

1(function($){2$.fn.highlight2=function(options) {3          //to take into account the various circumstances;4          //options for undefined;5          //options are only part of the key;6          varbgcolor = options && Options.backgroundcolor | | ' #fffceb ';7          varcolor = Options && Options.color | | ' #d85030 ';8           This. css (' backgroundcolor ', bgcolor). CSS (' Color ', color); 9          return  This;Ten     } One}) (JQuery);

Users can pass parameters to the Highlight2 () method as the jquery css () method, setting their own background and font color:

1 $ (selector). Highlight ({2     backgroundcolor: ' #ccc ',3     4 });

We can also let the user modify the default value, the user set the default value and then call the Highlight2 () method will not have to pass the value every time.

1(function($){2$.FN.HIGHTLIGHT3 =function(){3         //To merge default and user-defined values:4         varopts =$.extend ({}, $.fn.highlight.defaults, options);5          This. css (' backgroundcolor ', Opts.backgroundcolor). CSS (' Color ',     6 opts.color);7         return  This;8     }9 Ten     //Set Default values One$.fn.highlight3.defaults = { AColor: "#d85030", -BackgroundColor: "#fff8de" -     } the }) (JQuery) -  - //When you use it, you only need to set the default value once -$.fn.highlight3.defaults.color = ' #fff '; +$.fn.highlight3.defaults.backgroundcolor = ' #000 '; -  + //then call the Highlight3 () method, and the background and font color of the matching element are the default values defined by the user . A$ (selector). HIGHLIGHT3 ();

In this way, our highlight () method is more perfect.

Perhaps you notice that in the final version of the highlight () method, the $.extend () method is used, which I'll cover in detail in the next blog post. And in the next blog post, I'll cover extensions for specific elements.

The basics of writing your own jquery plugin