The jQuery project started five years ago as the brain child of John Resig. jQuery was originally designed to handle cross-browser DOM traversal and manipulation. The current jQuery 1.4.2 version has evolved to include many additional tools intended to make JavaScript coding much easier. According to BuiltWith usage statistics, this open source JavaScript project is now used in over 30% of the top 10000 web sites.
The jQuery API is intended to be straightforward and intuitive. The API includes functionality for:
- Traversing over the DOM
- Manipulating DOM elements
- CSS handling
- Event handling
- Ajax interactions
- Utility Functions
- A UI library
- An Effects library
The jQuery framework uses a simple selector as the means of getting and manipulating DOM elements. Once an element in the DOM is obtained, it becomes a jQuery object and any library methods can be invoked on it. The jQuery framework allows the use of complex selectors as well, i.e. elements based on parent-child relationships, attributes and filters.
The Traversing (or navigating through the DOM elements) API include methods for advanced filtering of already-selected collections of elements, with methods such as filter(), is(), not() and slice().
Other traversing API are used for 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().
Once a DOM element is selected (either by selection or creation), the jQuery manipulation functionality is available. This includes:
- Inserting an element in the document
- Setting inner HTML or text, insert content at the start or end of other elements, before or after other elements or wrap around other elements
- Replace matched elements
- Remove elements
- Clone elements
The CSS component provides a set of tools for getting and setting CSS properties of any element or collection of elements. Other tools in this category include the width() and height() methods as well as an offset() method for obtaining the relative offset of any specified element.
The jQuery framework provides a cross-browser implementation of working with events. Methods are exposed for defining and firing custom events, as well as bindings to standard DOM events. The jQuery framework also offers a wide range of event helpers, which wrap standard DOM events in jQuery functionality. This functionality is intended to make the reaction to things like clicks on particular elements possible with minimal code and no need for browser detection.
The jQuery Ajax API include methods for loading remote pages, data and scripts using get or post requests, simple access to JSON data and a set of custom AJAX events as way to work with the success, complete, start, stop and error events.
More documentation and tutorials on the jQuery framework also available, for getting started as well as more advanced plugins.