Introduction
jQuery is a lightweight, fast, and feature-rich JavaScript library designed to simplify HTML DOM tree traversal, event handling, animation, and Ajax interactions. In this article, we’ll introduce you to jQuery and show you how it can make writing JavaScript easier and more efficient.
Why Use jQuery?
- Simplifies complex JavaScript tasks
- Cross-browser compatibility
- Easy DOM manipulation
- Built-in animation and effects
- Simplified Ajax calls
Adding jQuery to Your Project
Option 1: Use CDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>Option 2: Download Locally
Download jQuery from jquery.com and link it:
<script src="js/jquery.min.js"></script>jQuery Syntax Basics
$(selector).action();Example:
$(document).ready(function() {
$("#btn").click(function() {
$("#demo").text("Hello from jQuery!");
});
});Common jQuery Selectors
$("#id") // Select by ID
$(".class") // Select by class
$("p") // Select all paragraph elements jQuery Events
$("button").click(function() {
alert("Button clicked!");
});DOM Manipulation
$("#demo").html("New HTML Content");
$(".box").css("background-color", "lightblue");jQuery Effects
$("#demo").hide();
$("#demo").fadeIn();
$("#demo").slideUp();AJAX Example
$.get("data.txt", function(data) {
$("#demo").html(data);
});Conclusion
jQuery simplifies many common JavaScript tasks and allows developers to write less code with more functionality. While modern JavaScript has caught up with many of jQuery’s features, it’s still widely used and a great tool for beginners to understand DOM manipulation and event handling. Next up, we’ll dive into PHP: Getting Started with Server-Side Scripting.
