jQuery plugins

[Hussein Baghdadi]

Hi.
What are the plug-ins in jQuery?
Thanks.

[Eric Pascarello]

Did you look through the list here: http://plugins.jquery.com/

Eric

[Bear Bibeault]

jQuery was designed from the get-go to be extensible via plugins. This is one of jQuery's greatest strengths.

The core jQuery library was kept purposefully focused on providing support for the types of things people need to do on most pages, and this keeps its footprint to a minimum. After all, no sense downloading a bunch of script that's never going to be used, right?

The plugins provide the extra stuff, and there are literally dozens and dozens of plugins to do everything from form entry validation, to drag and drop, to date pickers and beyond.

Moreover, it's very easy to write your own code as jQuery plugins so that the code on your page follows a consistent style and pattern, and so that it can easily leverage the core jQuery capabilities.

The book includes a chapter on how to write jQuery extensions and plugins, and a chapter that takes a survey of some of the more popular plugins.

[Hussein Baghdadi]

So, writing a plugin-s in jQuery is equivalent to writing a library or utility in Java.

[Bear Bibeault]

It's more like adding code to jQuery itself.

It could be as easy as adding a single method to jQuery to do something useful that you want to do over and over again, or as complex as adding a whole suite of cooperating methods.

For example, let's say I wanted to add a trivial method to jQuery to add the CSS class name "fieldInError" to all matched elements. This is actually easy to do with the addClass() method of jQuery, but let's say that I wanted to create a new method named markAsBad() just for readability and so that I don't have to type the class name "fieldInError" over and over again.

The code to add this method:

$.fn.markAsBad = function(){
  this.addClass('fieldInError');
}

That's all there is to it.

The fn field of the $ function (an alias for the $ function's constructor's prototype, for those familiar with OO JavaScript) is used to add new methods to jQuery. Within the body of the new function, the function context (this) references the matched set, so all we need to do is to apply the addClass() method to it.

To use this new class, you'd call it just like any other jQuery method:

$('#myInputField').markAsBad();

A great benefit to doing things in this way is that your own code can leverage the power of jQuery selectors (and everything else in jQuery) so you have to write much less code to get the same results.

The chapter on extending jQuery explains all this in much greater detail.

[Yehuda Katz]

This would be equivalent to adding a method to an existing class in Java. In effect, every time you do $("..."), you get an instance of the jQuery class.

By doing $.fn.foo = function() { ... }, you're adding a foo method to that class. jQuery itself and jQuery plugins are structured so that most methods return an instance of the jQuery class itself, so $("...").foo().bar().baz() will work (this is how "chaining", which is discussed in other threads, works).

This means that your code, assuming it's structured correctly, is indistinguishable for jQuery core code, and integrates into the chain with jQuery core code and other plugin code.

[Gregg Bolinger]

Originally posted by Yehuda Katz:
This means that your code, assuming it's structured correctly, is indistinguishable for jQuery core code, and integrates into the chain with jQuery core code and other plugin code.

Which also means that

$("...").foo().bar().baz().doo()

foo() - JQuery core function
bar() - your custom plugin/function
baz() - 3rd party else's plugin/function
doo() - JQuery core function

Sue-Weet!!