Introduction to jQuery
jQuery is a fast, lightweight, and feature-rich JavaScript library designed to simplify:
- DOM Manipulation
- Event Handling
- AJAX Requests
- Animations
- Form Handling
- Cross-Browser Compatibility
Before jQuery, developers had to write lengthy JavaScript code to perform simple tasks.
jQuery follows the principle:
Write Less, Do More
Why Was jQuery Created?
Earlier browsers handled JavaScript differently.
A simple DOM operation required complex code.
Pure JavaScript
document.getElementById("title").style.color = "red";jQuery
$("#title").css("color","red");jQuery reduces code and improves readability.
Advantages of jQuery
Easy Syntax : Simple and concise.
Cross-Browser Support : Works consistently across browsers.
Rich Effects : Built-in animations and transitions.
AJAX Simplification : Easy communication with APIs.
Huge Community Support : Widely used in existing websites and CMS platforms.
How to Add jQuery
Method 1: Using CDN
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>Method 2: Download and Host Locally
<script src="js/jquery.min.js"></script>First jQuery Program
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1 id="title">
Hello jQuery
</h1>
<script>
$("#title").css(
"color",
"blue"
);
</script>
</body>
</html>Understanding $(document).ready()
Ensures HTML loads completely before jQuery executes.
$(document).ready(function(){
alert("Page Loaded");
});Short Version:
$(function(){
alert("Page Loaded");
});jQuery Selectors
Selectors are used to find HTML elements.
ID Selector
$("#title")<h1 id="title">
Welcome
</h1>Class Selector
$(".box")<div class="box">
Content
</div>Element Selector
$("p")Multiple Selectors
$("h1,p")DOM Manipulation
Change Text
$("#title").text(
"New Title"
);Change HTML
$("#box").html(
"<b>Bold Text</b>"
);Change CSS
$("#title").css({
color:"red",
fontSize:"40px"
});Add Class
$("#box")
.addClass(
"highlight"
);Remove Class
$("#box")
.removeClass(
"highlight"
);Event Handling
Events occur when users interact with a webpage.
Click Event
$("#btn").click(function(){
alert(
"Button Clicked"
);
});Double Click Event
$("#btn").dblclick(function(){
alert(
"Double Clicked"
);
});Mouse Enter
$("#box").mouseenter(function(){
$(this).css(
"background",
"yellow"
);
});Mouse Leave
$("#box").mouseleave(function(){
$(this).css(
"background",
"white"
);
});Keyup Event
$("#username").keyup(function(){
console.log(
$(this).val()
);
});jQuery Effects
hide()
$("#box").hide();show()
$("#box").show();toggle()
$("#box").toggle();Fading Effects
fadeIn()
$("#box").fadeIn();fadeOut()
$("#box").fadeOut();fadeToggle()
$("#box").fadeToggle();Sliding Effects
slideUp()
$("#box").slideUp();slideDown()
$("#box").slideDown();slideToggle()
$("#box").slideToggle();Animation
$("#box").animate({
left:"300px",
opacity:"0.5"
},1000);Form Handling
Get Input Value
let name = $("#username").val();Set Input Value
$("#username")
.val("Akshay");Traversing Elements
Parent
$("#child")
.parent();Children
$("#parent")
.children();Next Element
$("#box")
.next();Creating Elements
append()
$("#list")
.append(
"<li>New Item</li>"
);prepend()
$("#list")
.prepend(
"<li>First Item</li>"
);remove()
$("#box")
.remove();AJAX with jQuery
jQuery simplifies AJAX significantly.
Load Data
$.ajax({
url:"https://jsonplaceholder.typicode.com/users",
method:"GET",
success:function(data){
console.log(data);
}
});GET Request Example
$.get("https://jsonplaceholder.typicode.com/posts",
function(data){
console.log(data);
}
);POST Request Example
$.post(
"https://jsonplaceholder.typicode.com/posts",
{
title:"jQuery Tutorial"
},
function(response){
console.log(response);
}
);Mini Project 1: Live Search Filter
Features
- jQuery Selectors
- keyup()
- DOM Manipulation
Complete Code
<!DOCTYPE html>
<html>
<head>
<title>Live Search</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h2>Live Search</h2>
<input type="text" id="search">
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
<li>Tailwind</li>
</ul>
<script>
$("#search").keyup(function(){
let value = $(this).val().toLowerCase();
$("#list li").filter(function(){
$(this).toggle(
$(this)
.text()
.toLowerCase()
.indexOf(value) > -1
);
});
});
</script>
</body>
</html>Mini Project 2: Image Gallery
Features
- Click Events
- DOM Manipulation
- Image Preview
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<img src="image1.jpg" class="thumb" width="100">
<img src="image2.jpg" class="thumb" width="100">
<br><br>
<img id="main" src="image1.jpg" width="400">
<script>
$(".thumb").click(function(){
$("#main").attr(
"src",
$(this).attr("src")
);
});
</script>
</body>
</html>Mini Project 3: AJAX User Loader
Features
- AJAX
- API Integration
- Dynamic DOM Creation
<!DOCTYPE html>
<html>
<head>
<title>User Loader</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="load"> Load Users </button>
<div id="users"></div>
<script>
$("#load").click(function(){
$.get("https://jsonplaceholder.typicode.com/users",
function(data){
let output="";
data.forEach(function(user){
output += `<p> ${user.name}</p>`;
});
$("#users").html(output);
}
);
});
</script>
</body>
</html>jQuery vs JavaScript
| Feature | JavaScript | jQuery |
|---|---|---|
| Syntax | Longer | Shorter |
| Learning Curve | Moderate | Easy |
| DOM Manipulation | More Code | Less Code |
| AJAX | Complex | Simpler |
| Performance | Faster | Slightly Slower |
| Modern Usage | Preferred | Legacy + CMS |
Common Interview Questions
- What is jQuery?
- Why use jQuery?
- Difference between JavaScript and jQuery?
- What is $(document).ready()?
- Difference between text() and html()?
- What is AJAX in jQuery?
- Difference between append() and prepend()?
- What is event delegation in jQuery?
- Difference between hide() and fadeOut()?
- How do you make AJAX requests using jQuery?
Best Practices
- Use CDN for quick setup
- Use event delegation for dynamic content
- Minimize DOM manipulation inside loops
- Use AJAX for dynamic updates
- Prefer modern JavaScript for new projects
- Learn jQuery because many WordPress and legacy projects still use it
Summary
In this tutorial, we learned:
Core Concepts
- jQuery Introduction
- Selectors
- DOM Manipulation
- Event Handling
Effects and Animations
- hide()
- show()
- toggle()
- fadeIn()
- fadeOut()
- slideUp()
- slideDown()
- animate()
AJAX
- GET Requests
- POST Requests
- API Integration
Practical Projects
- Live Search Filter
- Image Gallery
- AJAX User Loader
jQuery remains an important skill for maintaining existing websites, working with WordPress themes/plugins, and understanding the evolution of modern frontend development.