jQuery Introduction

What is jQuery?#

jQuery is a JavaScript library, first released in 2006, built to simplify DOM manipulation, event handling, animation, and AJAX behind a single, consistent API. Its signature function is $(), which selects elements using CSS-style selectors and returns a jQuery object you can call methods on:

$('#greeting').text('Hello, jQuery!');

Why jQuery existed#

In the mid-2000s, browsers implemented the DOM and JavaScript inconsistently — a script that worked in Internet Explorer 6 often didn't work the same way in Firefox, and vice versa. Simple tasks required verbose, browser-specific branching:

// Pre-jQuery: attaching an event handler that worked across browsers
function addEvent(el, type, handler) {
    if (el.addEventListener) {
        el.addEventListener(type, handler, false); // modern browsers
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, handler);       // old Internet Explorer
    }
}

// With jQuery: one line, works everywhere jQuery supported
$('#button').on('click', handler);

jQuery abstracted away these cross-browser differences (event handling, XMLHttpRequest quirks, CSS property names, element selection before document.querySelectorAll existed) behind one consistent API, plus a fluent, chainable method style that made common DOM tasks noticeably shorter to write. This is why it spread so quickly — it solved a real, painful, universal problem at the time.

Is jQuery still relevant?#

Honestly: its original reason for existing has mostly disappeared. Modern browsers have converged on standard, consistent APIs — document.querySelector, addEventListener, and fetch() now do natively, and consistently, most of what jQuery was invented to paper over. For a brand-new project today, native JavaScript (or a modern framework like React/Vue) is almost always the better default choice, and most professional front-end teams no longer add jQuery to new codebases.

That said, jQuery remains genuinely widespread, for a few concrete reasons:

• An enormous amount of existing production code still runs on it — countless legacy enterprise applications, internal admin tools, and older WordPress sites depend on jQuery and jQuery plugins that would be expensive to rewrite.
• WordPress ships jQuery by default, and a large share of WordPress plugins and themes still depend on it directly, which keeps it deployed across a huge share of the public web even today.
• Some legacy plugin ecosystems (certain date pickers, older admin dashboard templates, some jQuery-UI-based widgets) still don't have a drop-in modern equivalent.

The honest, practical takeaway: you're unlikely to choose jQuery for a greenfield project in 2026, but you're quite likely to encounter it maintaining an existing one — which is exactly why it's still worth understanding.

Installing jQuery#

Via CDN — the simplest option, and still the most common way jQuery is included:

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

Via npm — for projects with a build step:

npm install jquery

import $ from 'jquery';

Always load jQuery before any script that uses $ — putting the <script> tag right before </body>, after your own scripts have been declared but before they run, is the classic safe placement.

Your first jQuery snippet#

<button id="load-btn">Load message</button>
<p id="message"></p>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
    $('#load-btn').on('click', function () {
        $('#message').text('Hello from jQuery!');
    });
});
</script>

$(document).ready(...) delays the code inside it until the full DOM has been parsed — without it, a script running before the <button> even exists in the page would fail to find it.

Common mistakes#

• Adding jQuery to a brand-new project purely out of habit, without checking whether native querySelector/fetch/addEventListener already cover the need just as easily.
• Loading jQuery from a CDN after a script that already tries to use $ — the library must be loaded first, or every jQuery call in that later script throws $ is not defined.
• Loading multiple different versions of jQuery on the same page (common when several third-party plugins each bundle their own copy) — this can cause silent, confusing conflicts.