What jQuery is and when to use it

A library, not a language

jQuery is a free, open-source JavaScript library: one JavaScript file full of ready-made functions. You add that file to a page, and then your own JavaScript can call those functions to do common jobs in fewer lines:

• find elements on the page,
• change their text, attributes, classes and styles,
• add and remove elements,
• react to clicks, typing and form submissions,
• show, hide and animate things,
• load data from a server without reloading the page (Ajax).

jQuery was released in 2006 by John Resig. At the time, each browser had its own way of doing basic things, and code that worked in one browser often broke in another. jQuery hid those differences behind one simple set of methods, and it quickly became the most widely used JavaScript library on the web. The current major version is jQuery 4, released in January 2026, and that is the version this course teaches.

What jQuery code looks like

Here is a complete page. Click Try it, then click the button in the result:

<p>First paragraph.</p>
<p>Second paragraph.</p>
<button id="hide">Hide the paragraphs</button>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#hide").on("click", function () {
    $("p").hide();
  });
</script>

Hide the paragraphs

Read the script as two sentences:

1. Find the element with the id hide, and when it is clicked, run a function.
2. Inside that function, find every p element and hide it.

That pattern, select some elements, then do something to them, is the whole idea of jQuery. The $ is the jQuery function, and the text inside $("...") is an ordinary CSS selector, the same kind you write in a stylesheet. If you know CSS selectors, you already know how to find things with jQuery.

Notice there is no loop. $("p") found two paragraphs, and .hide() hid both. jQuery methods act on every element they selected. This is called implicit iteration, and it is one of the reasons jQuery code is short.

The same job in plain JavaScript

Modern browsers have excellent built-in tools for the same work. Here is the example again without jQuery:

<p>First paragraph.</p>
<p>Second paragraph.</p>
<button id="hide">Hide the paragraphs</button>

<script>
  document.querySelector("#hide").addEventListener("click", () => {
    document.querySelectorAll("p").forEach(p => { p.style.display = "none"; });
  });
</script>

Hide the paragraphs

It works, and it needs no library. It is a little longer, and you must loop yourself. Since about 2015, browsers have become consistent enough that plain JavaScript (often called vanilla JavaScript) is a fine choice for new work, and many teams no longer add jQuery to new projects. A later lesson puts common jQuery methods next to their plain JavaScript equivalents.

So why learn jQuery now?

There are good, practical reasons:

• It is everywhere. A very large share of existing websites still load jQuery. WordPress ships it, many themes and plugins depend on it, and countless business sites, admin panels and older applications are written with it. Someone has to maintain, fix and extend that code, and that work is paid.
• It is quick for small jobs. For a brochure site that needs a menu toggle, a form check and a few effects, jQuery is short, readable and well documented.
• It teaches the DOM gently. Selecting elements, handling events and changing the page are the same ideas in every front-end tool. jQuery lets you focus on the ideas before the details.
• Upgrading old sites is a real task. Many sites run jQuery 1.x or 3.x. Knowing what changed in jQuery 4 lets you upgrade them safely, which this course covers near the end.

When not to use it

Be honest about the limits. If you are starting a large application today, a framework such as React or Vue, or plain JavaScript, is usually a better base. Adding jQuery only to call document.querySelector in a shorter way is not worth an extra download. And mixing jQuery with a framework that manages the page itself (such as React) causes bugs, because both try to control the same elements.

A good rule: use jQuery where it already is, or where it clearly saves you time on a small site. Learn plain JavaScript alongside it, because jQuery is built on it.

What you need for this course

You should be comfortable with basic HTML (elements, attributes, ids and classes) and CSS selectors. The HTML course and the CSS selectors lesson cover both. You do not need to be a JavaScript expert: each lesson explains the JavaScript it uses, such as variables, functions and conditions.

Every example in this course has a Try it button that opens a live editor. The result runs in a safe, sandboxed frame on this page, with jQuery loaded from the official jQuery CDN. Change the code and the result updates as you type. Each example's printed output was checked by running it in a real browser.

Common mistakes

• Thinking jQuery is a separate language. It is JavaScript. A missing bracket breaks jQuery code exactly as it breaks any JavaScript.
• Forgetting to load jQuery. If the jQuery file is not on the page, $ does not exist and the browser reports $ is not defined.
• Using jQuery and a framework on the same elements. Pick one owner for each part of the page.
• Avoiding plain JavaScript. jQuery knowledge transfers best when you know what it does underneath.

Exercise

Open the first example in the editor. Change it so that the button hides only the second paragraph. Give that paragraph an id and use it in the selector.

<p>First paragraph.</p>
<p id="second">Second paragraph.</p>
<button id="hide">Hide the second paragraph</button>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#hide").on("click", function () {
    $("#second").hide();
  });
</script>