Extending jQuery with Plug-ins

jQuery is written so that it is easy to add new functionality.
Modules that add new functionality are called
plug-ins, and you can find many of them at http://plugins.jquery.com. jQuery plug-ins are just
ordinary files of JavaScript code, and to use them in your web pages,
you just include them with a <script> element as you would any
other JavaScript library (you must include plug-ins after you include
jQuery itself, of course).

It is almost trivially easy to write your own jQuery extensions.
The trick is to know that jQuery.fn
is the prototype object for all jQuery objects. If you add a function
to this object, that function becomes a jQuery method. Here is an
example:

jQuery.fn.println=function(){// Join all the arguments into a space-separated stringvarmsg=Array.prototype.join.call(arguments," ");// Loop through each element in the jQuery objectthis.each(function(){// For each one, append the string as plain text, then append a <br/>.jQuery(this).append(document.createTextNode(msg)).append("<br/>");});// Return the unmodified jQuery object for method chainingreturnthis;};

With that jQuery.fn.println
function defined, we can now invoke a println() method on any jQuery object like
this:

$("#debug").println("x = ",x,"; y = ",y);

It is common practice to add new methods to jQuery.fn. If you find yourself using the
each() method to “manually” iterate through the elements in a jQuery object and perform some kind of operation on them, ...

The best content for your career. Discover unlimited learning
on demand for around $1/day.