
Get Started in Jquery
Getting started with jQuery is super simple! jQuery is a fast, small, and feature-rich JavaScript library that makes things like HTML document traversal, event handling, animations, and AJAX much easier with less code.
? What is jQuery?
A JavaScript library
Simplifies DOM manipulation
Easy to use and cross-browser compatible
Written using
$
(dollar sign) function
? Step 1: Include jQuery in Your Page
? Option 1: Use CDN (Recommended for beginners)
Add this in your <head>
or before </body>
:
<script <script <!DOCTYPE html>document).ready(function(){ $("#btn").click(function(){ $("#text").text("Hello from jQuery!"); }); }); </script></head><body> <p id="text">Click the button ?</p> <button id="btn">Click Me</button></body></html>
$(document).ready(...)
: Runs code only after the page is fully loaded.$("#btn")
: Selects the button withid="btn"
.click(...)
: Adds a click event handler
? jQuery Syntax Basics
$(selector).action();
Example | Description |
---|---|
$("#id") | Selects an element by ID |
$(".class") | Selects all elements with a class |
$("p") | Selects all <p> tags |
.hide() , .show() | Built-in methods to hide/show elements |
? Why Use jQuery?
Less code, more power
Easy DOM selection
Cross-browser support
Great for animations & effects
Simplifies AJAX calls
? Example jQuery Tricks
$("p").hide(); // Hides all <p> elements$(".box").fadeIn(); // Fades in elements with class "box"$("#id").val(); // Gets value of input with ID