My first jquery plugin--Table interlaced color

Although there are a lot of plug-ins online for us to use, but there is not necessarily a suitable for you, when necessary or to do their own to knock. Below, start my first plugin ...

With the sharp jquery, jquery adds two additional methods for developing plugins: $.extend (object), $.fn.extend (object).

This blog post on the plug-in production of the explanation is very good, is a bit long, but it is worth pondering: http://blog.csdn.net/guorun18/article/details/49819715

Let's talk about a (one-sided) understanding of plugins:

Plug-ins are divided into two types:

• Class-level component development:

The ---is to add a new global function, also known as a static method, to the jquery namespace. the form is as follows:

function () {           //dosomething};

For example: $.ajax (options); $.type ();

• Object-level component development

---The method that hangs under the jquery prototype, the JQuery object instance obtained by the selector can share the method, called the dynamic method. The form is as follows:

// $.fn = = $.prototype function () {          //dosomthing};

For example:. addclass ();. attr ();

At the same time, the plug-in should maintain the characteristics of the jquery chain call, the form of chained calls are as follows:

$.fn.myplugin = function () {

Return This.each (function () {//return implements chained invocation

Do something

});

};

---------------------------------- above is the plug-in mechanism---------------------------------

The following implements a simple tabular interlaced plug-in:

 //for better compatibility, there's a semicolon in front(function($) {$.fn.tableui=function(options) {varDefaults ={evenrowclass:"Evenrow", Oddrowclass:"Oddrow", Activerowclass:"Activerow", Clickrowclass:"Clickrow"        }        varoptions = $.extend (defaults, options);//$.extend (option ...) Returns an object.        //to implement a chained call, return an object with return        return  This. each (function(){            //Cache This            varThistable = $ ( This); $ (thistable). Find ("Tr:even"). addclass (Options.evenrowclass); $ (thistable). Find ("Tr:odd"). addclass (Options.oddrowclass); $ (thistable). Find ("TR"). Bind ("MouseOver",function(){                $( This). Removeclass (Options.clickrowclass). addclass (Options.activerowclass);            }); $ (thistable). Find ("TR"). Bind ("Mouseout",function(){                $( This). Removeclass (Options.clickrowclass). Removeclass (Options.activerowclass);            }); $ (thistable). Find ("TR"). Bind ("click",function(){                $( This). addclass (Options.clickrowclass);        });    }); };}) (jQuery);

In view of the first time I write a plugin, but still want to share the sense of what is now, the future will certainly feel a simple mind.

By first passing the DOM element object with this, you can think of it as the outermost element of the plug-in, and then use the query (find) method provided by jquery to match the inner element object, and then step through the properties of the matching element with the set of attributes (options) to achieve the desired functionality.

The Ps:options class name should be written in advance to prepare the CSS style for use.

My first jquery plugin--Table interlaced color