How JavaScript and jQuery Are Related

jQuery is a JavaScript library. JavaScript is the language. jQuery is something written in that language to make working with the language easier. The relationship is the same as Lodash to JavaScript or NumPy to Python: a third-party tool that papered over the gaps in the underlying language and standard library. Here's the fun part. W3Techs still measures jQuery on roughly three quarters of all websites, which sounds like it never left. It did. That number is a fossil record: WordPress themes, CMS defaults, and pages nobody has redeployed since 2016. Ask a team what they're starting a new app with and jQuery doesn't come up. The gap between those two facts is the whole story of how web development changed.

The way I think about jQuery is that it solved real problems that don't exist anymore. Browsers used to disagree about how to do basically every DOM operation. Animations were a nightmare across Internet Explorer 6, 7, 8 and Firefox. AJAX was XMLHttpRequest with five different code paths depending on the user's browser. jQuery hid all of that behind one consistent API, and adoption was inevitable. The cleanup from that era is what made modern JavaScript possible.

What jQuery Did

jQuery's pitch was “write less, do more.” The library wrapped DOM manipulation, AJAX, animations, and event handling into a tight, chainable API. The same line of code worked the same way in IE 6, IE 9, Firefox 3, and Chrome.

// Find element
var el = document.getElementById("myButton");

// Hide it (cross-browser was harder)
el.style.display = "none";

// AJAX (verbose, browser-dependent)
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET", "/data", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

// Find and hide
$("#myButton").hide();

// AJAX
$.get("/data", function(data) {
    console.log(data);
});

The jQuery version was shorter, worked across browsers, and was vastly more pleasant. That's the whole story of why it took over.

Why It Won the 2000s

Three reasons:

• Browser inconsistency was the main problem. The web in 2008 had IE 6, IE 7, IE 8, Firefox, Safari, and the early Chrome, all with different DOM and event APIs. jQuery normalized them.
• Plugin ecosystem. jQuery had thousands of plugins (sliders, date pickers, validation, you name it). It was a complete layer above the language.
• It was easy to learn. Selectors used CSS-like syntax. Chaining was intuitive. A web developer could pick it up in an afternoon and ship something useful.

Why It Faded

Three reasons, mostly the inverse of why it won:

• Browsers got better and consistent. The native DOM API added document.querySelector, which landed across browsers around 2008 to 2009 and gave you jQuery-like selectors built in. fetch() replaced XMLHttpRequest. CSS animations replaced $.animate(). The platform absorbed jQuery's features.
• Single Page Applications. React, Angular, Vue, and friends made manual DOM manipulation rare. The framework owns the DOM. jQuery's strength (manipulating the DOM imperatively) became unnecessary in the new architecture.
• Performance and bundle size. Including jQuery added 30-90KB to a page. For a single feature like a date picker, that was unjustifiable when the same thing could be built in a few lines of native code.

What jQuery Looks Like Today

// Click handler
$("#submit").on("click", function() {
    $(".error").hide();
    $.post("/save", { name: $("#name").val() })
        .done(function(response) {
            $("#status").text("Saved");
        })
        .fail(function() {
            $(".error").show();
        });
});

document.querySelector("#submit").addEventListener("click", async () => {
    document.querySelectorAll(".error").forEach(e => e.style.display = "none");
    try {
        const res = await fetch("/save", {
            method: "POST",
            body: JSON.stringify({ name: document.querySelector("#name").value }),
            headers: { "Content-Type": "application/json" }
        });
        document.querySelector("#status").textContent = "Saved";
    } catch {
        document.querySelectorAll(".error").forEach(e => e.style.display = "block");
    }
});

The vanilla version is longer but uses no library. For a project already using a framework like React or Vue, neither version is what you'd write. You'd use the framework's state and event system instead.

Where jQuery Still Lives

WordPress. The CMS that powers over 40% of all websites ships with jQuery and a lot of plugins depend on it. That single fact is most of why jQuery's usage share still reads like it's 2013. Migration off jQuery in WordPress is ongoing and slow. Same story for Drupal, older PHP sites, internal enterprise tools nobody has touched in years, and the long tail of small business websites built before 2018.

For new projects, jQuery is essentially never the right choice. The platform now has everything jQuery used to provide. Adding 30KB of library for selectors and AJAX wrappers is worse on every dimension (bundle size, performance, maintainability) than just using native DOM APIs.

The Conceptual Relationship

To be precise about the language vs library distinction:

• JavaScript is the language. It has syntax, types, control flow, classes, and a runtime.
• The DOM API is what browsers expose to JavaScript for manipulating web pages. It's technically not part of JavaScript itself; it's an interface JavaScript can call.
• jQuery is a library written in JavaScript that wraps the DOM API and other browser APIs into a friendlier interface.

You can write JavaScript without jQuery (most modern code does). You cannot use jQuery without JavaScript (jQuery is JavaScript). The question “is jQuery JavaScript” is roughly equivalent to “is Lodash JavaScript.” Yes, in that it's written in JavaScript and adds JavaScript functions to your runtime. No, in that it's a separate library you choose to install.

The Take

If you're inheriting a jQuery codebase, learn enough jQuery to maintain it but plan your migration. Most modern code can be ported to vanilla JS or a framework with significant cleanup. If you're starting a new project, skip jQuery and use the modern platform. The selectors are there. The AJAX is there. The animations are there. None of them require a library anymore. The fact that they used to is most of why jQuery existed.