jQuery is a fast, small, and feature-rich JavaScript library that simplifies common tasks such as:
- HTML document traversal and manipulation
- Event handling
- Animation
- AJAX interactions
It allows you to write less code to do more work.
⚙️ Why Use jQuery?
Here’s why developers love (and still use) jQuery:
- ✅ Simplified Syntax — Easier than plain JavaScript for DOM manipulation.
- 🌐 Cross-browser Compatibility — Handles browser differences automatically.
- ⚡ AJAX Made Simple — Easy to fetch and send data asynchronously.
- 🎨 Animations & Effects — Built-in functions for fading, sliding, etc.
- 🔌 Plugins — Thousands of community-made plugins for added functionality.
📦 How to Add jQuery to a Web Page
You can include jQuery in two ways:
1. Using CDN (Recommended)
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1>Hello jQuery!</h1>
</body>
</html>
2. Downloading jQuery
You can also download jQuery and include it locally:
<script src="js/jquery.min.js"></script>🧠 Basic Syntax
The basic jQuery syntax looks like this:
$(selector).action();$→ Accesses the jQuery libraryselector→ Finds HTML elements (like CSS selectors)action()→ Performs an action on the element(s)
Example:
$("p").hide(); // Hides all <p> elements
$("#demo").show(); // Shows element with id="demo"
$(".text").css("color", "blue"); // Changes color of all elements with class="text"⚡ The Document Ready Function
You must ensure your code runs after the document is fully loaded.
$(document).ready(function() {
$("button").click(function() {
$("p").hide();
});
});Or using the shorthand:
$(function() {
$("button").click(function() {
$("p").hide();
});
});🎛️ Common jQuery Actions
| Task | jQuery Code | Description |
|---|---|---|
| Hide elements | $("p").hide(); | Hides all <p> elements |
| Show elements | $("p").show(); | Shows all <p> elements |
| Toggle visibility | $("p").toggle(); | Toggles visibility |
| Change CSS | $("p").css("color", "red"); | Changes text color |
| Add class | $("p").addClass("highlight"); | Adds a CSS class |
| Set HTML | $("#demo").html("Hello World!"); | Changes inner HTML |
| Handle click | $("button").click(function(){ ... }); | Runs when clicked |
🔄 Example — Simple Interaction
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#msg").fadeToggle();
});
});
</script>
</head>
<body>
<button id="btn">Toggle Message</button>
<p id="msg">Welcome to jQuery!</p>
</body>
</html>🧰 Summary
| Concept | Description |
|---|---|
| Library | JavaScript library for easier DOM manipulation |
| Syntax | $(selector).action() |
| Event Handling | click(), hover(), etc. |
| Animations | hide(), fadeIn(), slideDown() |
| AJAX | Simplified data loading without page refresh |
This tutorial is exactly what I needed! I’ve bookmarked it for future reference. Can’t wait for more posts like this!
One suggestion: it might be helpful to mention [X] as an additional step to avoid confusion. Otherwise, this tutorial was spot on!
This is easy to understand.