Why jQuery is one of the most used JavaScript libraries available on the web? Perhaps it has more features than other libraries or more flexibility. Perhaps its design is better conceived. Nothing like that: jQuery is a successful project simply because it has usability in mind. Usability is a too often neglected aspect of library development. jQuery fills this gap by providing a simple way to perform tasks that other libraries tend to make too complicated for the average user. That's the jQuery's secret.
Usability and productivity
Developers want to be ready and productive as soon as possible. jQuery provides a simple interface to work with. Most JavaScript libraries tend to create a complex namespace hierarchy which is surely great from an OOP perspective, but it turns out to be difficult to remember and use when it comes to productivity.
For example, to hide an element in Prototype you have to write the following:
Element('test').hide();
whereas in jQuery you have only to write a simpler line:
$('#test').hide();
jQuery uses CSS selectors to match DOM elements. This is really, really useful because even beginners can actually start to work with this library only knowing CSS and a little of JavaScript, whereas other libraries require that a user must have a firm knowledge of JavaScript and the DOM.
Also chaining is a vital aspect of jQuery's usability: instead of using a syntax like this:
Library.namespace.method(element, function() {
//...
});
you can use the following:
$('#test').addClass('test').find('p').removeClass('para');
Event the method and property names used by jQuery is intuitive and easy: bind() is easy to understand and remember, but what exactly Event.observe() does? And what is its exact syntax?
The more a namespace hierarchy gets complex and deeper, the more is difficult to remember and use.
Hiding the DOM
DOM methods and properties are generally verbose and inconsistent across browsers. jQuery succeeds in hiding the underlying DOM procedures and structures by providing some really useful methods to work with the DOM without knowing all the nuts and bolts of the DOM:
- CSS selectors
- DOM traversing methods
- DOM manipulation methods
By hiding the underlying DOM structure to the average user, jQuery aids usability with a simple interface that is very easy to understand even for the absolute beginner:
$('#test').prev().wrap('<div></div>').end().find('p').wrapAll('<div></div>');
Extensibility
Unless other libraries, jQuery is fully extensible through plugins. From a pure user perspective, this is really handy. In fact, jQuery itself cannot encompass all the possible use cases that you may encounter during the development process of a web site.
Extending jQuery is easy:
(function($) {
$.fn.plugin = function(options) {
options = $.extend({
option1: defaultValue1,
option2: defaultValue2,
optionN: //...
}, options);
return this.each(function() {
//...
});
};
})(jQuery);
The way by which jQuery handles plugins is very simple in itself: once defined, your plugin is available on all elements in the set, unless you restrict its usage only on a particular element.
Conclusions
jQuery is a great example of how JavaScript library development meets usability to provide users with some tools which are not only powerful in their design, but also easy to use.