Learn jQuery

jQuery is a compact JavaScript library that makes finding elements, changing the page, and reacting to user actions far shorter to write.

What is jQuery?

jQuery is a JavaScript library that wraps common browser tasks behind a single, consistent function. Instead of writing several lines of plain JavaScript to locate elements and update them, you describe what you want with a short expression and jQuery handles the details. It was created to smooth over the differences between browsers, so code that behaves one way in one browser behaves the same everywhere.

The library is built around one idea: select something on the page, then do something to it. That pattern repeats through almost every jQuery program you will ever write, which is a big part of why the library is quick to learn.

What jQuery helps you do

  • Find elements in the page using CSS-style selectors.
  • Change text, HTML, attributes, and styles with short method calls.
  • Listen for clicks, key presses, and other user events.
  • Add visual effects such as fading and sliding.
  • Send and receive data from a server with AJAX helpers.

A first taste of jQuery

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<button>Click me</button>
<p>Waiting...</p>

<script>
$(document).ready(function () {
  $("button").click(function () {
    $("p").text("You clicked the button!");
  });
});
</script>

</body>
</html>

In the example above, the code waits for the page to be ready, listens for a click on any button, and replaces the text of every paragraph. Writing the same behaviour without a library takes noticeably more code, and you would need to handle event attachment carefully across browsers.

Note: jQuery does not replace JavaScript. It is written in JavaScript and runs on top of it, so everything you learn about jQuery still relies on the language underneath.

Is jQuery still worth learning?

Modern browsers now include many features that once needed jQuery, and newer frameworks handle large applications in different ways. Even so, a great deal of existing code, plugins, and older projects use jQuery, so understanding it remains a practical skill. Learning it also teaches selection and event patterns that carry over to other tools.

TaskPlain JavaScriptjQuery
Select all paragraphsdocument.querySelectorAll("p")$("p")
Hide an elementel.style.display = "none"$(el).hide()
Handle a clickel.addEventListener("click", fn)$(el).click(fn)

Exercise: jQuery Introduction

What is jQuery, fundamentally?

Frequently Asked Questions

Is jQuery still worth learning?
For new projects, rarely: modern browsers do natively what jQuery was invented to smooth over. It remains worth recognising, because a large amount of existing code and many WordPress themes still depend on it, and you will meet it in maintenance work.
What replaced jQuery?
The browser itself, mostly. querySelector, classList, fetch and addEventListener cover the everyday work jQuery existed to simplify. For building interfaces rather than manipulating pages, React, Vue and similar frameworks took over the larger role.
Do I need JavaScript before jQuery?
Yes. jQuery is a library written in JavaScript, and without the language underneath you will be copying patterns you cannot debug. Learning plain JavaScript first also makes it obvious when jQuery is not needed at all.