How to define a jquery plugin

Extension of jquery. The core methods are as follows:

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

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

 

$. Extend (object)

Example:

/* $. Extend definition and call ************************************ * ***/$. extend ({fun1: function () {alert ("execution method 1") ;}}); // defines $. fun1 (); // call

　　

 

 

$. Fn. extentd (object)/* $. fn. extend definition and call ************************************ * ***/$. fn. extend ({fun2: function () {alert ("execution method 2") ;}}); $ (this ). fun2 (); // equivalent to $. fn. fun3 = function () {alert ("execution method 3") ;}$ (this ). fun3 ();

　　

Define the basic structure of the jquery plug-in

 

1. Define the scope:

Defines a private scope for the plug-in. External Code cannot directly access the internal plug-in. The internal code of the plug-in is not subject to external interference, and global variables are not contaminated.

// Step01 defines JQuery's scope (function ($) {}) (jQuery );

　　

2. Add extension methods for the plug-in:

    $.fn.easySlider =

 

3. Set the default value:

// Step01 defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options) ;}} (jQuery );

　　

Var options = $. extend (ults, options. Indicates that options overwrites the defaults value and assigns the value to options.
In the plug-in environment, the value set by the user overwrites the default value of the plug-in. If the default value is not set, the default value of the plug-in is retained.

4. Support for jquery selector:

// Step01 defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options); // step4 supports the JQuery selector this. each (function () {}) ;}) (jQuery );

　　

5. Support JQuery link call:

To achieve the effect of link calling, you must return each element of the loop.

// Step01 defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options); // step4 supports JQuery selector // step5 supports chained call return this. each (function () {}) ;}) (jQuery );

　　

6. Methods in the plug-in:

The methods defined in the plug-in cannot be called directly from outside, and the methods defined in the plug-in do not pollute the external environment. // Step01 defines JQuery's scope

(Function ($) {// default property var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nextbtn', nextText: 'Next '//...... }; // The step06-a defines the method var showLink = function (obj) in the plug-in {$ (obj ). append (function () {return "(" + $ (obj ). attr ("href") + ")"});} // The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {// step03-b combines user-defined attributes, default attribute var options =$. extend (defaults, options); // step4 supports JQuery selector // step5 supports chained call return this. each (function () {// The step06-b defines the method showLink (this);}) ;}} in the plug-in (jQuery );