jQuery is one of the world's most widely used JavaScript libraries. With a small amount of code, jQuery lets you accomplish tasks that would normally require many lines of plain JavaScript — making your development faster, cleaner, and more readable.
jQuery is a fast, lightweight, and feature-rich JavaScript library. It was created by John Resig in 2006 with a simple goal: "Write less, do more."
At its core, jQuery is a .js file that you include in your HTML page. Once included, it gives you access to a large collection of ready-made functions that help you:
Plain JavaScript (also called Vanilla JS) is powerful but can be verbose. jQuery wraps many of those repetitive tasks into short, readable commands.
Here is a side-by-side comparison to show the difference:
document
.getElementById("btn")
.addEventListener(
"click", function() {
document
.getElementById("msg")
.style.display = "none";
}
);
$("#btn").click(function() {
$("#msg").hide();
});
Both examples do exactly the same thing — hide an element when a button is clicked. But look how much shorter and cleaner the jQuery version is!
Here is a quick overview of what jQuery offers out of the box:
There are two common ways to include jQuery in your HTML project:
A CDN (Content Delivery Network) hosts jQuery on fast servers around the world. You simply add a <script> tag pointing to it — no download needed.
<!-- Add this just before the closing </body> tag -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script> tag before your own custom JavaScript files. jQuery must load first so its functions are available when your code runs.
You can also download the jQuery file from jquery.com and host it yourself. This is useful when working offline or in environments with restricted internet access.
<!-- Link to your locally downloaded jQuery file -->
<script src="js/jquery-3.7.1.min.js"></script>Almost every jQuery script you write will be wrapped inside a special function called the document ready handler. This makes sure your jQuery code only runs after the entire HTML page has loaded.
$(document).ready(function() {
// Your jQuery code goes here
// This runs after the page is fully loaded
});There is also a shorter, modern version of the same thing:
$(function() {
// Shorter version of document ready
});$ symbol is the heart of jQuery. It is a shorthand for the jQuery function. Whenever you see $, think: "jQuery is at work here."
Let's put everything together in one simple, working HTML page. When the user clicks the button, a paragraph will be hidden:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First jQuery Page</title>
</head>
<body>
<h2>Hello jQuery!</h2>
<p id="message">Click the button below to hide me.</p>
<button id="hideBtn">Hide the Paragraph</button>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Your jQuery code -->
<script>
$(document).ready(function() {
$("#hideBtn").click(function() {
$("#message").hide();
});
});
</script>
</body>
</html>Here is what the code does, line by line:
$(document).ready() — waits for the page to fully load before running any code.$("#hideBtn") — selects the element with id="hideBtn" (the button)..click(function() { ... }) — runs the code inside when the button is clicked.$("#message").hide() — selects the paragraph and hides it.You might have heard that modern frameworks like React and Vue have replaced jQuery. While those frameworks are popular for building complex single-page applications, jQuery is still widely used and relevant for several reasons:
$ symbol is jQuery's shorthand function — it is how you access everything jQuery offers.$(document).ready().