Getting Started with jQuery

This section documents jQuery 3.x (the current major line — no specific patch version is pinned). This content was generated with the assistance of AI and should be verified against the official jQuery API reference before being relied on in production, since API details and deprecations continue to change between releases.

jQuery is legacy-leaning: modern browsers implement native equivalents for almost everything it does (querySelectorAll, classList, fetch, addEventListener, append/prepend/remove, the Web Animations API), and most current stacks — Bootstrap 5 included — have dropped it. Prefer the native APIs for new work; this reference is aimed at reading, maintaining, or incrementally migrating code that already uses jQuery. Every page ends with a Modern equivalent note pointing at the native replacement.

This section’s bibliography lists the reference material consulted while preparing these pages.

jQuery is a small JavaScript library that wraps the browser DOM APIs of its era in a terse, chainable, cross-browser interface. A single global function — jQuery, almost always written as $ — selects elements, and the object it returns carries dozens of methods for reading and changing them. In 2006 that smoothed over deep browser inconsistencies; today the native APIs have caught up, so this page gives equal weight to when not to reach for it.

The jQuery function and the $ alias

$ is just another name for the jQuery function. Called with a CSS selector string it returns a wrapped set (also called a "jQuery object"): an array-like object holding zero or more matched DOM nodes plus every jQuery method.

$('p.intro');            // wrapped set of every <p class="intro">
jQuery('p.intro');       // identical -- $ is an alias for jQuery

const $items = $('#list li');
$items.length;           // how many matched -- 0 means "selected nothing"
$items[0];               // the first raw DOM element (HTMLLIElement), not a jQuery object
$items.get(0);           // same raw element, via the jQuery accessor
$items.eq(0);            // a NEW wrapped set containing only the first element

The same function does four different jobs depending on what you pass it:

$('div.card')                       // 1. selector string  -> find existing elements
$(document.body)                    // 2. DOM node/NodeList -> wrap existing nodes
$('<li class="new">Hi</li>')        // 3. HTML string       -> create a detached element
$(function () { /* ... */ })        // 4. function          -> run it when the DOM is ready

A wrapped set is not an array and the elements inside it are not jQuery objects. Convert deliberately: $(rawNode) wraps a node, $set.get(i) / $set[i] unwraps one, $set.toArray() unwraps all.

Why use jQuery — and when not to

Reasons it still appears in codebases:

  • Terse selection and iteration: $('.x').addClass('y') acts on every match with no explicit loop.

  • Implicit null-safety: operating on an empty set is a silent no-op rather than a TypeError.

  • Chaining: most methods return the set, so calls compose left to right.

  • A large plugin ecosystem accumulated over ~15 years.

Reasons to prefer native APIs for new work:

jQuery Modern native equivalent

$(sel)

document.querySelectorAll(sel) (+ for…​of)

.addClass / .removeClass / .toggleClass

el.classList.add / .remove / .toggle

.on('click', fn)

el.addEventListener('click', fn)

.append / .prepend / .before / .after / .remove

same-named native methods on Element

$.ajax / $.get / $.getJSON

fetch() (+ AbortController)

.each

for…​of, Array.prototype.forEach

Bootstrap 5, most component frameworks (React, Vue, Angular), and modern build tooling dropped jQuery entirely. For a greenfield project the native DOM is enough; see Web programming basics.

Adding jQuery to a page

Downloaded file

Download jquery-3.7.1.min.js from jquery.com/download and serve it yourself:

<script src="/js/jquery-3.7.1.min.js"></script>

Self-hosting avoids a third-party origin and works offline, at the cost of the shared-cache benefit a common CDN once offered.

Official CDN

code.jquery.com serves each release. Add integrity and crossorigin so the browser refuses a tampered file (Subresource Integrity):

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-..."
  crossorigin="anonymous"></script>

Copy the current integrity value verbatim from the official CDN page — it is a base64-encoded hash specific to that exact file, and the browser rejects the script if the served bytes do not match. crossorigin="anonymous" is required for the check to run on a cross-origin script. Load jQuery before any script that uses $.

slim vs. full build

The slim build drops the AJAX module ($.ajax and friends) and the entire effects module (.animate(), .fadeIn() / .fadeOut(), .slideUp() / .slideDown(), and the rest of Effects and Animation), saving a few kilobytes. Use it only if the page needs neither. The full build is the default and what the rest of this section assumes.

Running code when the DOM is ready

Selecting an element before the browser has parsed it yields an empty set. Wait for the DOM:

$(document).ready(function () { /* DOM parsed; elements selectable */ });
$(function () { /* identical shorthand -- the common form */ });

ready fires as soon as the DOM tree exists, before images and stylesheets finish loading — earlier than the native window.onload (which waits for every sub-resource). A modern script loaded with defer, or an ES module (which is deferred by default), or a <script> placed just before </body>, already runs after the DOM is parsed, making the wrapper largely redundant today — but it is harmless and still common.

jQuery.noConflict() releases the $ global back to whatever owned it before (some older libraries also used $); jQuery keeps working, and you can capture a private alias: jQuery(function ($) { /* $ is jQuery here */ });.

The browser DevTools console is the fastest way to experiment — on any page that has jQuery loaded, type $('h1').css('color', 'red') and watch it apply live.

Modern equivalent

$(fn) → put the script in a defer-ed <script> or a <script type="module"> and the DOM is already parsed when it runs, or use document.addEventListener('DOMContentLoaded', fn). $(sel) → document.querySelectorAll(sel). See Web programming basics for the native selection, creation, and traversal APIs.