When you start writing JavaScript, one of the first things you feel is that you are surrounded by lines, by functions and sometimes by far too many semicolons. You find yourself writing and rewriting similar things, like reaching for an HTML element or responding to a click on a button, and you start wondering: “Isn’t there a simpler way to do this?”
The answer is yes, and for many years that answer was jQuery.
jQuery: a small revolution in simplicity
jQuery is a JavaScript library built around one very precise goal: making code easier to write. When John Resig released it in 2006, it caught the attention of web developers everywhere. The idea was clear: offer a lighter, more approachable interface for working with the DOM, that is with HTML elements, cut down how verbose the code had to be and, just as importantly, keep things working the same way across browsers.
The library’s motto โ “Write less, do more” โ sums up exactly what jQuery lets you do: write less code for the same results, often better ones. At a time when writing JavaScript that worked in both Internet Explorer and Firefox was close to doing the job twice, jQuery was the bridge between those two worlds.
A syntax that speaks plainly
Getting started with jQuery is not complicated. You include the library in your HTML file, using a CDN from Google or from jQuery itself, and you are up and running.
Here is the classic example, hiding a paragraph when a button is clicked.
With plain JavaScript:
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("paragraph").style.display = "none";
});With jQuery:
$("#btn").click(function() {
$("#paragraph").hide();
});Two lines against five. It is not only a matter of quantity, though: what changes is how readable it is. What you are doing is obvious at a glance.
The $ symbol is the backbone of jQuery. You use it to select elements, exactly as you would with a CSS selector. From there you can chain actions one after another, smoothly.
Reaching into the DOM and changing it
One of the most common jobs in web development is working with HTML elements: changing their content, editing their CSS, moving them, adding them or taking them away. jQuery makes all of that considerably simpler.
To change the text of an element, for instance:
$("#title").text("New title");Or to add a CSS class:
$(".block").addClass("highlighted");A handful of words gets you effects that, in plain JavaScript, would take many lines, checks, conditions and error handling.
Events and animations: a question of flow
Another strong point of jQuery is the way it handles events. Listening for clicks, hovers, input and so on comes down to a couple of lines.
For example:
$("input").focus(function() {
$(this).css("background-color", "#ffcccc");
});Here, every time an input receives focus it changes colour. It is simple, direct, and it works in all the major browsers without any extra checks.
And animations? You need no complicated calls to requestAnimationFrame and no external plugins. Want a slide-up? Just write:
$("#box").slideUp();Want it to come back slowly?
$("#box").fadeIn("slow");What matters here is that jQuery also takes care of the backstage work: you never have to run the calculations or manage frames yourself. It handles all of it.
jQuery and AJAX: asynchronous loading within a click
Another area where jQuery gave developers an enormous push is AJAX calls. Loading content from another file or from a server without reloading the page used to be a complicated procedure. With jQuery it became almost trivial.
To load content from a file called content.html into a div, for instance:
$("#content").load("content.html");Or to make a GET request and handle the response:
$.get("data.json", function(data) {
console.log(data);
});Or a POST:
$.post("login.php", { user: "Mario", password: "1234" }, function(response) {
alert("Response received: " + response);
});The convenience is that jQuery also looks after the format of the data (HTML, JSON, script), the fallbacks when something goes wrong and any callbacks once the request finishes.
jQuery today: is it still useful?
This question comes up often. In 2025, with modern frameworks such as React, Vue and Angular everywhere, you might assume jQuery has little left to say.
The reality is a little more nuanced.
jQuery remains a sensible choice for:
- light projects, where reaching for a framework would be overkill;
- existing sites that already run plenty of functionality on jQuery;
- anyone learning JavaScript who wants a practical bridge into working with real code.
It is no accident that plenty of CMS platforms, WordPress first among them, still use it. Not so much out of habit, but because for many operations it still offers a compact and compatible solution.
On top of that, version 3.x improved event handling, security and modularity further. Thanks to CDNs and slim builds, it can be loaded quickly without weighing the page down.
A small practical project with jQuery
To give you a better sense of how jQuery works in a concrete case, here is a small interactive to-do list:
$("#add").click(function() {
var task = $("#new-task").val();
if (task !== "") {
$("#list").append("" + task + " X");
$("#new-task").val("");
}
});
$(document).on("click", ".remove", function() {
$(this).parent().remove();
});In this code:
- when you click “Add”, the content of the input is read and appended to the list;
- every task carries an “X” button to remove it;
- the
on("click", ".remove", โฆ) event is bound to the document because the elements are created dynamically.
In under ten lines you have a fully dynamic list, without writing all the code by hand in vanilla JavaScript.
Conclusion
This introduction to jQuery is not meant as an encyclopaedic lesson, but as a clear and useful starting point for understanding where this library can make a difference. In a world that moves quickly, where frameworks appear and disappear every year, jQuery is still a dependable ally for small projects, quick prototypes and anyone who wants to tame the DOM without making life complicated.
It does not replace modern development architectures, but it can still play a valuable part for anyone learning JavaScript step by step, building up an awareness of what happens under the bonnet.
And to start enjoying code, sometimes this is exactly what you need: something that lets you experiment, build and see the result straight away. On that front, jQuery remains a perfect companion.
Our courses: https://itamde.com/en/online-courses/
โผ FOLLOW US โผ
ยป Facebook: https://www.facebook.com/itamde
ยป Instagram: https://www.instagram.com/itamdestudio
ยป X (Twitter): https://x.com/itamdestudio
ยป SUBSCRIBE TO OUR CHANNEL: https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q
0 Comments