jQuery – JavaScript Library for DOM, Events, and AJAX

Overview

jQuery is a widely adopted JavaScript library that streamlines many client-side scripting tasks in web development. Founded in 2006, its primary goal is to simplify HTML document traversal and manipulation, event handling, animation, and Asynchronous JavaScript and XML (AJAX) interactions. The library achieves this by providing a concise, cross-browser compatible API that abstracts away much of the complexity and inconsistencies inherent in various browser implementations of the Document Object Model (DOM).

Developers often choose jQuery for projects requiring efficient DOM manipulation, such as dynamically updating page content, responding to user input, or creating interactive user interfaces. Its chainable syntax allows for multiple operations to be performed on a selected set of elements in a single statement, which can lead to more readable and compact code. For example, selecting an element by its ID and then hiding it can be accomplished with $('#elementId').hide();.

Beyond its core functionalities, jQuery has fostered a robust ecosystem of plugins. These plugins extend the library's capabilities, offering ready-to-use solutions for tasks ranging from UI widgets (like date pickers and carousels) to form validation and data tables. This extensibility contributes to faster development cycles, as developers can often find pre-built solutions rather than coding them from scratch. While jQuery remains a significant tool, particularly in maintaining legacy applications or for specific tasks, modern JavaScript frameworks such as React, Vue.js, and Angular, which offer more structured approaches to application development, have gained prominence for building complex, single-page applications. The Document Object Model (DOM) specification itself continues to evolve, influencing how modern libraries and frameworks approach web interactions.

jQuery is particularly well-suited for projects where direct DOM manipulation is a frequent requirement, for enhancing existing static HTML pages with dynamic features, or for ensuring broad compatibility across a range of older web browsers. Its relatively small footprint and ease of integration mean it can be added to almost any web project with minimal overhead.

Key features

• DOM Traversal and Manipulation: Provides methods for selecting elements with CSS selectors, traversing the DOM tree, and modifying the structure, content, and style of HTML documents.
• Event Handling: Offers a simplified and normalized way to handle user and browser events (e.g., clicks, key presses, form submissions) across different browsers.
• Animations and Effects: Includes built-in functions for creating visual effects and animations, such as fading, sliding, and custom animations, to enhance user experience.
• AJAX Interactions: Simplifies asynchronous HTTP requests (AJAX), enabling dynamic loading of content from the server without requiring a full page reload.
• Cross-browser Compatibility: Abstracts away many browser-specific inconsistencies, allowing developers to write code that functions reliably across various web browsers.
• Extensible Plugin Architecture: Supports the development and integration of plugins, extending its core functionality with custom widgets and utilities.
• Utilities: Provides a collection of utility functions for common JavaScript tasks like array and object manipulation, string processing, and feature detection.

Pricing

jQuery is released under the MIT License and is entirely free and open-source. There are no licensing fees, subscription costs, or paid tiers associated with its use.

As of: 2026-05-09

Common integrations

• jQuery UI: A curated set of user interface interactions, widgets, and themes built on top of the jQuery JavaScript Library.
• jQuery Mobile: A touch-optimized web framework for creating mobile web applications.
• Content Delivery Networks (CDNs): Frequently integrated via CDNs like Google Hosted Libraries or jsDelivr for faster loading and reduced server load.
• WordPress: Often used within WordPress themes and plugins for dynamic frontend functionalities.
• Bootstrap: Historically, Bootstrap utilized jQuery for its interactive components, though newer versions have reduced this dependency.

Alternatives

• React: A JavaScript library for building user interfaces, focusing on declarative component-based development.
• Vue.js: A progressive JavaScript framework for building user interfaces, known for its approachability and performance.
• Angular: A comprehensive, platform-agnostic framework for building web applications, maintained by Google.
• Vanilla JavaScript: Direct manipulation of the DOM and event handling using native browser APIs, offering maximum control and no external dependencies.
• Svelte: A modern JavaScript framework that compiles components into small, highly optimized vanilla JavaScript at build time.

Getting started

To begin using jQuery, you can include it in your HTML file directly from a Content Delivery Network (CDN) or download the library and host it locally. The following example demonstrates how to include jQuery via a CDN and then use it to hide a paragraph when a button is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Quick Start</title>
    <!-- Include jQuery from a CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

    <h1>Welcome to jQuery!</h1>

    <p id="myParagraph">This is a paragraph that will be hidden.</p>

    <button id="hideButton">Hide Paragraph</button>

    <script>
        // Document ready function ensures the script runs after the DOM is fully loaded
        $(document).ready(function() {
            // Select the button by its ID and attach a click event listener
            $('#hideButton').on('click', function() {
                // Select the paragraph by its ID and hide it with a fade effect
                $('#myParagraph').fadeOut();
            });
        });
    </script>

</body>
</html>

In this example:

1. The jQuery library is loaded from Google's CDN in the <head> section. It's generally recommended to place script tags at the end of the <body> for performance, but for simple demos, the head is acceptable.
2. The $(document).ready() function ensures that the JavaScript code inside it executes only after the entire HTML document has been fully loaded and parsed by the browser. This prevents issues where scripts try to access elements that aren't yet available.
3. $('#hideButton') uses jQuery's selector engine to select the HTML element with the ID hideButton.
4. .on('click', function() { ... }); attaches an event listener to the selected button. When the button is clicked, the anonymous function provided will execute.
5. Inside the event handler, $('#myParagraph').fadeOut(); selects the paragraph with the ID myParagraph and then calls the fadeOut() method, which gradually reduces the opacity of the element until it is hidden.