JQuery method for defining plug-ins _ jquery

Some WEB developers reference A JQuery class library and write $ (& quot ;#& quot;), $ (& quot ;. & quot;). I have been familiar with JQuery for several years. In fact, you only know a little bit about it and do not know the truth. Next, I will introduce you to jquery plug-ins through this article. If you are interested, let's learn from some WEB developers, will reference A JQuery class library, and then write $ ("#"), $ (". ") I have been familiar with JQuery for several years. I used to be such a person. I didn't change my opinion on myself until I had a technical exchange in my company.

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 ({fun: function () {alert ("execution method 1") ;}}); // defines $. fun (); // call $. fn. extentd (object)/* $. fn. extend definition and call ************************************ * ***/$. fn. extend ({fun: function () {alert ("execution method") ;}}); $ (this ). fun (); // equivalent to $. fn. fun = function () {alert ("method 3") ;}$ (this ). fun ();

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.

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

2. Add extension methods for the plug-in:

// Step01 defines the JQuery scope (function ($) {// The Extension Method Name of the step02 plug-in $. fn. easySlider = function (options) {}}) (jQuery );

3. Set the default value:

// Step defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step plug-in $. fn. easySlider = function (options) {// step-B combines user-defined attributes. The default attribute is 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:

// Step defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step plug-in $. fn. easySlider = function (options) {// step-B combines user-defined attributes. The default attribute is var options =$. extend (defaults, options); // step supports 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.

// Step defines JQuery's scope (function ($) {// default attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', nextText: 'Next '//...... }; // The Extension Method Name of the step plug-in $. fn. easySlider = function (options) {// step-B combines user-defined attributes. The default attribute is var options =$. extend (defaults, options); // step supports JQuery selector // step 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 attribute var defaults = {prevId: 'prevbtn ', prevText: 'previous', nextId: 'nexttbtn ', 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 );

The above content introduces the jQuery plug-in definition method, and I hope you will like it.