Chapter-5
jQuery
5.1 Introduction to jQuery
5.1.1 Overview of jQuery and its Advantages
What is jQuery?
jQuery is a JavaScript library.
A library means a ready-made file that contains many useful functions.
Instead of writing long JavaScript code, we can use short and simple jQuery code.
jQuery works on HTML elements.
It helps us change, hide, show, animate, and control web pages easily.
Why jQuery Was Created?
Before jQuery:
JavaScript code was long.
Different browsers behaved differently.
Developers had to write extra code.
jQuery solved these problems by:
✔ Making code shorter
✔ Making it work the same in all browsers
✔ Making animations easier
Main Advantages of jQuery
1. Short Code
JavaScript:
2. [Link]("demo").innerHTML = "Hello";
jQuery:
$("#demo").text("Hello");
3. Cross-Browser Support
Works in Chrome, Firefox, Edge, etc.
4. Easy DOM Manipulation
5. Simple Event Handling
Like click, hover, submit, etc.
6. Built-in Animations
Basic Syntax of jQuery
$(selector).action();
$ → means jQuery
selector → selects HTML element
action → what we want to do
Example:
$("p").hide();
Means: Hide all paragraphs.
5.1.2 Including jQuery in Your Project
To use jQuery, we must connect it to our HTML file.
✅ Method 1: Using CDN (Best Way)
Add this before closing </body>:
<script
src="[Link]
CDN means the file comes from the internet.
✅ Method 2: Download File
1. Download jQuery.
2. Save in project folder.
3. Link like:
<script src="[Link]"></script>
Important Rule
Always write code inside:
$(document).ready(function(){
// your code
});
Why?
Because it waits until the whole page loads.
Example:
$(document).ready(function(){
$("p").hide();
});
5.2 Basic jQuery Operations
5.2.1 Selecting Elements
Selecting means choosing HTML elements.
In jQuery we use:
$(selector)
Select by Tag
$("p")
Selects all paragraphs.
Select by ID
$("#demo")
Selects element with id="demo"
Select by Class
$(".box")
Selects elements with class="box"
Example
<p class="text">Hello</p>
<button id="btn">Click</button>
<script>
$("#btn").click(function(){
$(".text").hide();
});
</script>
When button is clicked → paragraph hides.
5.2.2 Manipulating the DOM
What is DOM?
DOM = Structure of HTML page.
It is like a tree of elements.
We can:
Change text
Change HTML
Change CSS
Change attributes
✅ Change Text
$("#demo").text("New Text");
✅ Change HTML
$("#demo").html("<b>Bold</b>");
Difference:
.text() → plain text
.html() → supports HTML tags
✅ Change CSS
$("#demo").css("color", "red");
✅ Change Attribute
$("img").attr("src", "[Link]");
Example
<p id="demo">Hello</p>
<button id="btn">Change</button>
<script>
$("#btn").click(function(){
$("#demo").text("Welcome");
$("#demo").css("color", "blue");
});
</script>
5.3 Simple Animations
5.3.1 Fading and Sliding
Animations make web pages attractive.
Fade Effects
fadeIn() → shows element slowly
fadeOut() → hides slowly
fadeToggle() → show/hide
Example:
$("#box").fadeOut();
Slide Effects
slideUp() → hide upward
slideDown() → show downward
slideToggle() → toggle
Example:
$("#box").slideToggle();
Complete Example
<div id="box"
style="width:100px;height:100px;background:red;"></div>
<button id="btn">Slide</button>
<script>
$("#btn").click(function(){
$("#box").slideToggle();
});
</script>
5.3.2 Custom Animations
We use:
.animate()
It changes CSS properties gradually.
Example
<div id="box"
style="width:100px;height:100px;background:green;position:rela
tive;"></div>
<button id="btn">Animate</button>
<script>
$("#btn").click(function(){
$("#box").animate({
left: '200px',
height: '150px',
width: '150px',
opacity: 0.5
});
});
</script>
This:
✔ Moves box
✔ Changes size
✔ Changes transparency
5.4 Adding and Removing HTML
5.4.1 Adding Content
We can add new content dynamically.
append()
Adds content at the end.
$("#demo").append(" World");
prepend()
Adds content at the beginning.
$("#demo").prepend("Hi ");
before()
Adds before element.
after()
Adds after element.
Example
<p id="demo">Hello</p>
<button id="btn">Add</button>
<script>
$("#btn").click(function(){
$("#demo").append(" Students");
});
</script>
5.4.2 Removing Elements
remove()
Deletes the whole element.
$("#demo").remove();
empty()
Deletes only inside content.
$("#demo").empty();
Example
<p id="demo">Hello World</p>
<button id="btn">Clear</button>
<script>
$("#btn").click(function(){
$("#demo").empty();
});
</script>
Final Summary
jQuery is a JavaScript library.
It makes coding short and easy.
It helps in:
✔ Selecting elements
✔ Changing content
✔ Animations
✔ Adding & removing HTML
Syntax is simple:
$(selector).action();