Scribd
Upload
33 views13 pages

JQUERY

Uploaded by

DSEC-MCA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views13 pages

JQUERY

Uploaded by

DSEC-MCA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

INTRODUCTION TO JQUERY

write less, do more


Purpose, Applications, Code Examples, and Exercises
MOTIVATIONAL SECTION

“I have no special talent. I am only


passionately curious”

-Albert Einstein

அருமை உடைத்தென்று அசாவாமை வேண்டும்


பெருமை முயற்சி தரும். ( 611)
WHAT IS
JQUERY?
A. jQuery is a fast, small, and feature-rich JavaScript
library. It simplifies tasks like HTML document
traversal, event handling, animation, and AJAX
(Asynchronous JavaScript and XML)
HOW JQUERY WORKS?
A. jQuery selects elements on a web page using CSS-style
selectors, allowing actions like modifying content, adding
animations, or responding to user interactions.
HISTORY OF JQUERY

A. Created by John Resign in 2006.


B. Aimed to simplify client-side scripting.
C. Has become one of the most popular JavaScript libra

WHY USE JQUERY?


A.Cross-browser Compatibility: Works seamlessly across different bro
B.Simplified Syntax: Easy to write and read.
C.DOM Manipulation: Efficiently manipulate HTML elements.
D.Event Handling: Simplified event management
BASIC SYNTAX
$(selector)
Selector:
Example: $("#myElement") selects an element with ID
"myElement".
Method: $(selector).action()
Example: $("#myElement").hide(); hides the
selected element.
COMMONLY USED JQUERY
FUNCTIONS
.hide() / .show(): Toggle visibility of
elements.
.fadeIn() / .fadeOut(): Fade effects for
elements.
.css(): Change CSS properties.
USAGE AND REAL-TIME
APPLICATIONS
1. Simplified DOM Manipulation
2. Cross-Browser Compatibility
3. AJAX Calls
4. Animations
• Form Validation
• Dynamic Content Updates
• Creating Sliders
• Interactive Ui Elements
• Filtering/Search IN
E-COMMERCE
BASIC LEVEL PROGRAM
(CHANGE TEXT AND COLOR)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text and Color</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#text {
font-size: 24px;
margin: 20px;
}
</style>
</head>
<body>

<div id="text">Best Education Institute in India <marquee>LIVEWIRE</marquee></div>


<button id="changeButton">Change Text and Color</button>

<script>
$(document).ready(function() {
$("#changeButton").click(function() {
$("#text").text("Best Education Institute in India LIVEWIRE").css("color", "blue");
});
});
</script>

</body>
INTERMEDIATE LEVEL
PROGRAM (FADE EFFECT FOR
IMAGES)
#fadeButton {
<!DOCTYPE html> padding: 10px 20px;
<html lang="en"> font-size: 16px;
<head> cursor: pointer;
<meta charset="UTF-8"> }
<meta name="viewport" content="width=device-width, initial- </style>
scale=1.0"> </head>
<title>Image Fade Effect</title> <body>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="fadeButton">Fade In Images</button>
<style> <img id="RED" src="https://via.placeholder.com/300x200/FF5733/
body { FFFFFF?text=RED+PRIMARY" alt="RED">
display: flex; <img id="GREEN" src="https://via.placeholder.com/300x200/33FF57/
flex-direction: column; FFFFFF?text=GREEN+OPTION" alt="GREEN">
align-items: center; <img id="BLUE" src="https://via.placeholder.com/300x200/3357FF/
justify-content: center; FFFFFF?text=BLUE+NIETHER" alt="BLUE">
height: 100vh;
background-color: #f0f0f0; <script>
} $(document).ready(function() {
img { $("#fadeButton").click(function() {
width: 300px; $("img").each(function(index) {
height: auto; $(this).delay(index * 1000).fadeIn(1000);
margin: 10px; });
display: none; /* Initially hidden */ });
} });
EXPERT LEVEL PROGRAM

ARTICLE MANAGEMENT
EXERCISE FOR STUDENTS
(TO-DO LIST)
Objective:
Create an interactive to-do list using jQuery.
Instructions:
1. Create a list where users can add tasks.
2. Each task item should appear with a delete button.
3. Style and add animations as you wish.
THANK
YOU

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy