jQuery is a small JavaScript library that makes everyday front-end jobs shorter to write: finding elements, reacting to clicks, changing text and classes, simple animations and loading data from a server. It first appeared in 2006 and became one of the most widely used pieces of JavaScript on the web. This jQuery introduction, like the whole track, uses jQuery 4.0.0, the current major version, released in January 2026. You should already know basic JavaScript – if not, start with JavaScript Introduction and DOM Manipulation.
jQuery introduction: what is it?
A library is a file of ready-made functions that you include in your page and call from your own code. jQuery wraps the browser’s DOM and event APIs in shorter, chainable methods. For example, to hide every element with the class offer you write $('.offer').hide() – one line, no loop.
When jQuery was born, browsers disagreed on many basics. Internet Explorer handled events and AJAX differently from Firefox, so developers wrote the same feature two or three times. jQuery hid those differences behind one API. Today browsers follow the same standards, and plain JavaScript can do almost everything jQuery does. So jQuery’s main value now is its compact syntax and the very large amount of existing code built on it.
Should you learn jQuery in 2026?
An honest answer: for a brand-new project you often don’t need jQuery. Modern JavaScript has querySelectorAll(), classList, fetch() and CSS transitions built in, and component frameworks such as React suit larger apps. But you will still meet jQuery all the time in real work:
- WordPress ships jQuery with core, and a great many themes and plugins depend on it.
- Older Bootstrap sites – Bootstrap 4 and earlier needed jQuery for menus and modals. (Bootstrap 5 does not; see Bootstrap Introduction.)
- Existing business sites and admin panels that have grown over ten or fifteen years.
- Plugins for sliders, date pickers and tables that are written as jQuery plugins.
Being able to read and safely change jQuery code is a practical, job-ready skill. Throughout this jQuery introduction and the lessons after it, you will also see the plain JavaScript version of each idea, so you learn both and can choose wisely.
Adding jQuery to a page
The quickest way is to load jQuery from the official CDN with a <script> tag. Your own script must come after it, because your code uses the $ function that jQuery defines. Placing both just before </body> also means the HTML above them already exists when they run.
<!-- 1. jQuery itself -->
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<!-- 2. Your own code, after jQuery -->
<script src="js/main.js"></script>You can also download the file and host it yourself, or install it with npm install jquery in a project that uses a build tool. There is a smaller slim build too, which leaves out the AJAX and effects modules – use the full build for this track.
The $ function and the jQuery object
Everything starts with $(), a short alias for jQuery(). Give it a CSS selector and it returns a jQuery object: a list-like wrapper around every matching element (possibly none). Methods you call on it act on all the matched elements – this is called implicit iteration. Most methods also return the same jQuery object, so you can chain several calls in a row.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first jQuery page</title>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; line-height: 1.5; }
.highlight { background: #fff3c4; border-left: 4px solid #e0a800; padding-left: 8px; }
</style>
</head>
<body>
<h1 id="greeting">Hello!</h1>
<p class="city">Chennai</p>
<p class="city">Madurai</p>
<p class="city">Puducherry</p>
<button id="go" type="button">Run jQuery</button>
<p id="info"></p>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
// Runs when the button is clicked
$('#go').on('click', () => {
// One call changes the heading text
$('#greeting').text('Vanakkam from jQuery!');
// Implicit iteration + chaining: every .city paragraph gets both changes
$('.city').addClass('highlight').append(' ✔');
// .length tells you how many elements matched
$('#info').text(`Matched ${$('.city').length} city paragraphs.`);
});
</script>
</body>
</html>Notice there is no forEach loop: $('.city').addClass('highlight') updates all three paragraphs. Also, a jQuery object is never null. If nothing matches, the methods simply do nothing, and .length is 0.
Running code when the page is ready
If your script is in the <head>, the body does not exist yet when it runs. Wrap your code in $(() => { … }) and jQuery will run it as soon as the DOM is ready. Older code often uses $(document).ready(…); it still works, but it has been deprecated since jQuery 3.0, so prefer the short form.
// Recommended in jQuery 3 and 4
$(() => {
$('#status').text('The page is ready.');
});
// You will see this older form in existing code (deprecated since 3.0)
$(document).ready(function () {
$('#status').text('The page is ready.');
});Watch out: In WordPress, jQuery is loaded in “no-conflict” mode, so $ is not defined globally and $('#menu') throws an error. Use jQuery(($) => { … }) – the ready handler receives jQuery as its first argument, so you can name it $ inside.
What changed in jQuery 4
jQuery 4 removed many helpers that had been deprecated for years, because modern JavaScript has its own versions. If you copy code from an old tutorial, check it against this list:
| Removed in jQuery 4 | Use instead |
|---|---|
$.trim(str) | str.trim() |
$.isArray(x) | Array.isArray(x) |
$.parseJSON(text) | JSON.parse(text) |
$.now() | Date.now() |
$.isFunction(x) | typeof x === 'function' |
It also dropped support for Internet Explorer 10 and older, and .css() no longer adds px to most plain numbers. To upgrade an old site, the official jQuery Migrate plugin logs warnings for code that needs changing.
Tip: Learn JavaScript first, then jQuery. Every jQuery method is plain JavaScript underneath, so the better you know the DOM, the easier jQuery – and debugging it – becomes.