jQuery – Introduction
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library.
It makes it much easier to use JavaScript on your website by simplifying common tasks like:
- HTML document traversal and manipulation
- Event handling
- Animation effects
- AJAX calls
Instead of writing long lines of JavaScript code, jQuery allows you to achieve the same result with just a few lines.
Why Use jQuery?
Without jQuery, developers had to write complex JavaScript code to handle even simple tasks (like selecting elements or sending AJAX requests).
With jQuery, you can:
- Write less code and do more
- Handle browser compatibility issues easily
- Add interactive effects and animations
- Simplify AJAX requests
- Manipulate HTML & CSS dynamically
Example
Without jQuery (Pure JavaScript)
document.getElementById("demo").style.display = "none";
With jQuery
$("#demo").hide();
How to Include jQuery in Your Web Page
There are two ways to add jQuery to your webpage:
1. Using a CDN (Content Delivery Network)
Add this line inside your HTML <head> or before </body>:
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js>"></script>
2. Using a Local Copy
Download jQuery from https://jquery.com/download
Then include it like this:
<script src="jquery.min.js"></script>
Basic jQuery Syntax
The basic syntax of jQuery is:
$(selector).action()
$→ Refers to the jQuery functionselector→ Selects the HTML element(s)action()→ Defines what to do with those elements
Example:
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
$(document).ready()ensures the code runs only after the page is fully loaded.$("p")selects all paragraph elements..click()adds a click event.$(this).hide()hides the clicked paragraph.
Advantages of jQuery
- Easy to learn and use
- Cross-browser compatible
- Lightweight and fast
- Large plugin library
- Strong community support
Where jQuery Is Used
- Creating smooth animations
- Making responsive navigation menus
- Handling forms and validations
- Loading content dynamically (AJAX)
- Building UI components (modals, sliders, tabs)