This page is a self-contained introduction to jQuery—a popular JavaScript library for front-end interactivity. You will understand what jQuery does, add it to a page, and use it to select elements, handle events, and animate the DOM.
Library overview.
Key benefits.
CDN script tag.
$() & ready.
Manipulate pages.
Hands-on code.
jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, and AJAX interactions for rapid web development.
It lets developers write less code while achieving more, making it a practical tool for front-end development—especially when maintaining existing sites or building interactive pages without a heavy framework.
jQuery does not replace JavaScript. It is written in JavaScript and provides a friendly API on top of the browser’s DOM. The famous $ function is shorthand for “find these elements and let me work with them.”
Learn basic JavaScript first (variables, functions, DOM). Then jQuery will feel like a shortcut for repetitive tasks such as selecting elements and attaching click handlers.
One of jQuery’s main attractions is its concise, intuitive syntax. Common tasks that take many lines of vanilla JavaScript often fit in a single chained expression. That improves readability and speeds up prototyping.
jQuery abstracts away many browser inconsistencies from the pre-2015 era. It provides a consistent API that works across different browsers, including older versions still found in enterprise environments.
jQuery has a vast ecosystem of community plugins—UI widgets, sliders, date pickers, validation helpers, and data visualization tools. Plugins extend the core library without reinventing common patterns.
With built-in AJAX helpers such as $.get, $.post, and $.ajax, jQuery simplifies asynchronous HTTP requests. You can fetch JSON or HTML from a server and update part of the page without a full reload.
To start using jQuery, include the library in your HTML document with a <script> tag. You can download it and host it locally, or load it from a content delivery network (CDN) for faster delivery and caching across sites.
<!-- Place before your own scripts -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="app.js"></script>jQuery revolves around selecting HTML elements and performing actions on them. Wrap your code in a document-ready handler so the DOM exists before your script runs:
$(function () {
$("#elementID").hide();
});$(function () { ... }) is shorthand for $(document).ready(...). The selector $("#elementID") targets an element with id="elementID".
jQuery simplifies adding, removing, and updating HTML elements. Powerful selectors let you target nodes by ID, class, tag, or CSS-style queries, then call methods like .html(), .append(), or .remove().
jQuery provides a clean way to respond to clicks, keyboard input, form submissions, and more. Use .on("click", handler) (or shorthand .click(handler)). Event delegation lets you attach one listener to a parent and handle events from dynamically added children.
Animating elements becomes straightforward with methods like .fadeIn(), .fadeOut(), .slideToggle(), and .animate(). These build smooth transitions without writing low-level timing code yourself.
| Concept | What it does |
|---|---|
$() selector | Find DOM elements (CSS-style queries) |
| Chaining | Call multiple methods on one selection: $("#box").hide().fadeIn() |
.on() | Attach event listeners |
.html() / .text() | Read or update content |
.css() / .addClass() | Change styles and classes |
| Effects | .show(), .hide(), .fadeToggle() |
| AJAX | $.get(), $.ajax() for server data |
| Plugins | Third-party extensions on top of jQuery |
| Task | Example |
|---|---|
| Document ready | $(function () { ... }); |
| Select by ID | $("#header") |
| Select by class | $(".btn") |
| Click handler | $("#btn").on("click", fn); |
| Set text | $("#msg").text("Hello"); |
| GET request | $.get("/api/data", callback); |
Seven starter snippets. Use View Output to preview here, or open Try It Yourself to edit and run live in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Demo</title>
</head>
<body>
<p id="demo">Hello, jQuery!</p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
console.log("jQuery version:", $.fn.jquery);
});
</script>
</body>
</html>$(function () {
$("#banner").hide();
});Requires HTML: <div id="banner">Welcome!</div>. When the page loads, the banner disappears immediately.
$(function () {
$("#greeting").text("Welcome back!");
$("h1.title").html("<em>Dashboard</em>");
});.text() sets plain text (safe from HTML injection). .html() parses markup inside the element.
$(function () {
$("#menu-btn").on("click", function () {
$("#sidebar").toggleClass("open");
});
});Each click adds or removes the open class on #sidebar. Pair with CSS such as .open { display: block; } for a simple menu.
$(function () {
$("#alert").hide().fadeIn(800);
});Chaining .hide() then .fadeIn(800) creates a smooth 800 ms fade-in effect when the page loads.
| Approach | Strengths | Best when… |
|---|---|---|
| jQuery | Concise syntax, plugins, legacy support | You maintain WordPress/legacy sites or need quick DOM scripts |
| Vanilla JS | No extra dependency, modern APIs (querySelector, fetch) | You build new apps and want zero library overhead |
| React / Vue | Component model, state management, tooling | You build large single-page applications |
The browser parses your page and downloads the jQuery library from CDN or local file.
Your $(function(){...}) callback runs once elements exist in the document.
$() finds nodes; methods update the DOM, bind events, or start animations.
Users see toggles, fades, and AJAX-loaded content without full page reloads.
jQuery revolutionized web development by providing a simple yet powerful toolkit for JavaScript developers. Its ease of use, extensive plugin ecosystem, and cross-browser compatibility make it a practical choice for interactive pages and maintaining existing sites.
Start integrating jQuery into your projects today and experience the efficiency it brings to DOM scripting. Even if you eventually move to modern frameworks, understanding jQuery helps you read and upgrade a huge amount of real-world code on the web.
<script> tag, then use $(function(){...}).$() function selects elements; methods can be chained.$(function(){}) so the DOM exists before you select elements.on() for event binding (supports delegation).text() for user-provided content to avoid XSSvar $nav = $("#nav"); when reused.html() with untrusted user input$ alias conflict—use jQuery.noConflict() if neededjQuery was released in 2006 by John Resig and quickly became the most popular JavaScript library on the web. Its $ selector inspired countless developers and even influenced how later tools think about DOM APIs. At its peak, jQuery ran on the majority of the top million websites.
Edit any example from this page in the live Try It editor.
9 people found this page helpful