jQuery Overview
(Page 1 of 4 )
For those of you who haven’t heard of jQuery, or have heard of it but haven’t had a chance to give it a go, this article aims to show you why it is one of the best of the plethora of JavaScript libraries available to make your life as a developer easier. Read on to find out more.
History
jQuery 1.0 was released in 2006 and was originally written primarily by John Resig of the Mozilla Software Foundation. What was originally a cross-browser means of easy DOM traversal and manipulation has now grown into a mature, full-featured library resource that contains not just tools that make working with the DOM a pleasure, but many additional and robust tools that make JavaScript coding much easier.
The library is currently on version 1.2.6 and now has an advanced UI extensions companion library that can be used alongside the existing library, which enables you to rapidly build and deploy rich user interfaces. Like other popular, high caliber libraries (such as Prototype), this sister library can be used quickly and easily to add a variety of attractive effects to existing or new components.
Why Use jQuery?
Aside from being extremely fast, lightweight and robust, one of jQuery's big plus points is that it is incredibly easy to use; even for new-comers to JavaScript, the simple selector-style means of getting and manipulating DOM elements makes this very intuitive and comfortable to work with.
The selectors used to obtain elements are based on a combination of simple CSS and XPath selector styles, so anyone with CSS knowledge should have no problem with using the library. For example, if you want to get an element that has an id of myElement, all you do is use:
$("#myElement")
Or to get a collection of elements that share the myElement class name, you would use:
$(".myElement")
See how easy it is? Once an element has been obtained in this manner (making it a jQuery object), any library method can then be called on it. As well as these simple element selectors, more complex selectors can also be used, allowing you to get elements based on parent-child relationships, attributes and specific filters (by say, visibility for example).
The API for jQuery is really straightforward and intuitive; methods used to get or set different values are usually the same, leaving no room for confusion. How does the library know whether you want to get or set a value? Easy; if you call the method with no arguments, you get the value, but if you call the method with a value, you set it instead. So if you wanted to get the height of an element you would use:
$("#myElement").height();
But to set the height, you would use:
$("#myElement").height(100);
This simplified API is another factor which makes using the library both a pleasure and a breeze. Another major reason to use jQuery is that of chainability. This may be an unfamiliar term, but it's something that you'll soon know and love after being exposed to the library. Basically, the majority of methods used with jQuery return the original, modified jQuery object. This means that you can call several methods on the same object one after the other, without needing to get the element again or start a new line. For example, if you wanted to set the height and width of an element you could use:
$("#myElement").height(500).width(500);
This allows you to really condense your code, making it faster, lighter and much more efficient and maintainable.
Next: Library Components >>
More JavaScript Articles
More By Dan Wellman
