jQuery Overview

Working with element attributes allows you to do many cool things with elements on your web pages; the attributes section of jQuery gives you the tools to work with elements and their attributes quickly, easily and without the frustration of any browser inconsistencies.

The methods exposed by this section of the library include those for getting and setting element attributes, determining whether an element has a class, as well as adding, removing and toggling classes, getting and setting the inner HTML or text of an element and getting or setting element values.

Traversing

Navigating document elements, or walking the DOM as it is more commonly known, can be problematic when using naked JavaScript. With jQuery however, moving from one end of the page to the other couldn't be easier.

The Traversing section contains methods for advanced filtering of already-selected collections of elements, with methods such as filter(), is(), not() and slice() among others. Finding specific elements based on their relationships to other elements (as opposed to using id or class selectors) is also made easy with methods like children(), find(), contents(), next(), prev(), parents() and siblings().

Manipulating

Once you have the element (either by selection or creation), putting it somewhere appropriate is made child's play with the manipulation section of the library. As well as the methods for setting inner HTML or text that we already saw, this section allows you to easily insert content at the start or end of other elements, before or after other elements or even wrap around other elements completely.

You can also replace matched elements, remove them from the DOM completely or clone them, all with smoothness and panache! There are a lot of methods in the section, but it's easy to remember what does what thanks to the simplified API.

CSS

The CSS component provides a series of powerful tools for getting and setting any CSS property of any element or collection of elements. It offers an easy literal object-based approach to setting any arbitrary number of CSS properties.

Other tools in this category include the width() and height() methods that we used in an earlier example, as well as a useful offset() method for obtaining the viewport-relative offset of any specified element.

Events

Any modern JavaScript library that wants to emerge as a leader needs to provide a cross-browser way of working with events, and jQuery does just that. It exposes methods for defining and firing custom events, as well as binding to standard DOM events.

The real gem of this section, however, is the huge range of event helpers, which wrap standard DOM events in jQuery functionality, allowing you to easily react to things like clicks on particular elements with minimal code and no browser detection.