Access elements in a document: Without a JavaScript library, web developers often need to write many lines of code to traverse the Document Object Model (DOM) tree and locate specific portions of an HTML document's structure. With jQuery, developers have a robust and efficient selector mechanism at their disposal, making it easy to retrieve the exact piece of the document that needs to be inspected or manipulated.

$('div.content').find('p');

Modify the appearance of a web page: CSS offers a powerful method of influencing the way a document is rendered, but it falls short when not all web browsers support the same standards. With jQuery, developers can bridge this gap, relying on the same standards support across all browsers In addition, jQuery can change the classes or individual style properties applied to a portion of the document even after the page has been rendered.

$('ul > li:first').addClass('active');

Alter the content of a document: Not limited to mere cosmetic changes, jQuery can modify the content of a document itself with a few keystrokes. Text can be changed, images can be inserted or swapped, lists can be reordered, or the entire structure of the HTML can be rewritten and extended—all with a single easy-to-use Application Programming Interface (API).

$('#container').append('<a href="more.html">more</a>');

Respond to a user's interaction: Even the most elaborate and powerful behaviors are not useful if we can't control when they take place. The jQuery library offers an elegant way to intercept a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers. At the same time, its event-handling API removes browser inconsistencies that often plague web developers.

$('button.show-details').click(function() {
  $('div.details').show();
});

Animate changes being made to a document: To effectively implement such interactive behaviors, a designer must also provide visual feedback to the user. The jQuery library facilitates this by providing an array of effects such as fades and wipes, as well as a toolkit for crafting new ones.

$('div.details').slideDown();

Retrieve information from a server without refreshing a page: This code pattern is known as Ajax, which originally stood for Asynchronous JavaScript and XML, but has since come to represent a much greater set of technologies for communicating between the client and the server. The jQuery library removes the browser-specific complexity from this responsive, feature-rich process, allowing developers to focus on the server-end functionality.

$('div.details').load('more.html #content');

Simplify common JavaScript tasks: In addition to all of the document-specific features of jQuery, the library provides enhancements to basic JavaScript constructs such as iteration and array manipulation.

$.each(obj, function(key, value) {
  total += value;
});