Overview of the Presentation
Introduction to jQuery
Prerequisites
Difference between JavaScript & jQuery
What is jQuery
How to add jQuery to webpage
jQuery Syntax
Document ready event
Example application
Introduction to jQuery
Introduction to jQuery:
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
The purpose of jQuery is to make it much easier to use JavaScript on your
website.
Introduction to jQuery
Prerequisites:
HTML
CSS
JavaScript
Introduction to jQuery
Difference between JavaScript and jQuery:
JavaScript jQuery
JavaScript uses JIT[Just in Time Compiler] While jQuery Uses the resources that are
which is a combination of interpreter and provided by JavaScript to make things
Compile and is written in C. It’s a easier. It is a lightweight JavaScript library.
combination of ECMA script and DOM It has only the DOM.
(Document Object Model).
JavaScript uses long lines of code as an With jQuery, one has to write fewer lines of
individual has to write the code own-self. code than JavaScript.
JavaScript is a language, obviously, it would While jQuery is a library, derived from
be heavier than JQuery. JavaScript hence, it is lightweight.
JavaScript is a programming language. jQuery is an Application Programming
Interface (API).
Introduction to jQuery
What is jQuery:
jQuery is a lightweight, "write less, do more", JavaScript library.
jQuery takes a lot of common tasks that require many lines of JavaScript
code to accomplish, and wraps them into methods that you can call with a
single line of code.
Introduction to jQuery
The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
Utilities
Introduction to jQuery
How to add jQuery to webpage:
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com
Include jQuery from a CDN(Content Delivery Network, like Google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
Introduction to jQuery
jQuery Syntax:
The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Introduction to jQuery
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Introduction to jQuery
Document ready event:
$(document).ready(function(){ $(function(){
// jQuery methods go here... (or) // jQuery methods go here...
}); });
This is to prevent any jQuery code from running before the document is finished
loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before
working with it.
Introduction to jQuery
EX: <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
}); });
</script>
</head>
Introduction to jQuery
Output:
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
jQuery Event Models-Event Handlers
By
G.Sowmya
Assistant Professor
CSE-AIML Dept
MLR Institute of Technology
Overview of the Presentation
Event Handlers
jQuery Syntax for event methods
Commonly used jQuery methods
Example Applications
jQuery Event Models- Event Handlers
Event Handlers:
All the different visitors' actions that a web page can respond to are called
events.
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
jQuery Event Models- Event Handlers
Here are some common DOM events:
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
jQuery Event Models- Event Handlers
jQuery Syntax for Event Methods:
In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
The next step is to define what should happen when the event fires. You must
pass a function to the event:
$("p").click(function(){
// action goes here!!
});
jQuery Event Models- Event Handlers
Commonly used jQuery Event Methods:
$(document).ready():
The $(document).ready() method allows us to execute a function when
the document is fully loaded.
click():
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
Ex: <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
jQuery Event Models- Event Handlers
Output:
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide(); }); });
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
jQuery Event Models- Event Handlers
dblclick():
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element:
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide(); }); });
jQuery Event Models- Event Handlers
Output:
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
jQuery Event Models- Event Handlers
mouseenter():
The mouseenter() method attaches an event handler function to an HTML
element. The function is executed when the mouse pointer enters the HTML
element.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
jQuery Event Models- Event Handlers
alert("You entered p1!");
Output:
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
jQuery Event Models- Event Handlers
mouseleave():
The mouseleave() method attaches an event handler function to an HTML
element. The function is executed when the mouse pointer leaves the HTML
element.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
jQuery Event Models- Event Handlers
alert("Bye! You now leave p1!"); Output:
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
jQuery Event Models- Event Handlers
mousedown():
The mousedown() method attaches an event handler function to an HTML
element. The function is executed, when the left, middle or right mouse button is
pressed down, while the mouse is over the HTML element.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
jQuery Event Models- Event Handlers
alert("Mouse down over p1!"); Output:
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
jQuery Event Models- Event Handlers
mouseup():
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released,
while the mouse is over the HTML element.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
jQuery Event Models- Event Handlers
alert("Mouse up over p1!"); Output:
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
jQuery Event Models- Event Handlers
hover():
The hover() method takes two functions and is a combination of
the mouseenter() and mouseleave() methods.
focus():
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus
blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus
jQuery Event Models- Event Handlers
Ex: <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/
jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
jQuery Event Models- Event Handlers
Output:
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
jQuery Event Models- Event Handlers
The on() Method:
The on() method attaches one or more event handlers for the selected elements.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery Event Models- Event Handlers
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
}); });
jQuery Event Models- Event Handlers
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
Output:
jQuery Event Models- Event Handlers
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
Output:
jQuery Event Models- Event Handlers
jQuery Event Models- Event Handlers
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com
/ajax/libs/jquery/3.6.0/jquery.m
in.js"></script>
<script>
$(document).keydown(function(){
$("p").text("key is down!");
});
$(document).keyup(function(){
$("p").text("key is up!");
});
jQuery Event Models- Event Handlers
$(document).ready(function(){
$("input").keypress(function(){
$(this).css('backgroundColor','blue')
});
});
</script>
</head>
<body>
<p >This is a paragraph.</p>
<form>
<label>Username</label>
<input type="text">
</form>
</body>
