Jquery Tutorials
- What is JQuery
- DOM Document Object Model
- JQuery Syntax
- Jquery Selector
- Get & Set Form value
- jQuery - Attributes
- Attribute Methods
- jQuery - DOM Manipulation
- JQuery Events
- JQuery Effects
- JQuery Html/Css
- jQuery Insert Content
- Auto Hide Div
- JQuery noConflict()
- JQuery Form Validation
- Form Validation
- Login Form Validation
- Jquery Fadeout message
- Modal popup
- Jquery Ajax Forms
- Dependent Dropdown
- Autocomplete Country jquery ajax
- Dynamic Content Load using jQuery AJAX
- Dynamic star rating jQuery AJAX
- Drag and Drop Image Upload
- show Hide Elements By click on checkbox
- How to Add class in jQuery
- calculate discount in jQuery
- Calculate GST by input value in text box
- check Password strength in jQuery
- Count Remaining Character
- onClick Checkbox check all
- password match or not
- DataTable
- Date Picker
- Multiselect Dropdown with Checkbox
- Add Dynamic Input Field (Add More Input Field)
- submit button disable after one click
- Show hide password in Password textbox using checkbox
- Put value in the text field
- Set Data and Attributes
Customer Say
jQuery Events
What are Events
Events are often triggered by the user's interaction with the web page, such as when a link or button is clicked, text is entered into an input box or textarea, selection is made in a select box, key is pressed on the keyboard, the mouse pointer is moved etc. In some cases, the Browser itself can trigger the events, such as the page load and unload events. jQuery enhances the basic event-handling mechanisms by offering the events methods for most native browser events, some of these methods are ready(), click(), keypress(), focus(), blur(), change(), etc. For example, to execute some JavaScript code when the DOM is ready, you can use the jQuery ready() method, like this:
File name : index.php
$("button").click(function(){
// do something when user click the button
});
$("form").submit(function(){
// do something when user submits a form
});
$("#myDiv").hover(function(){
// do something when user hover an HTML element
});
$("#myTextbox").keyup(function(){
// do something when user types on a textbox with ID myTextbox
});
Example
File name : index.php
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<style>
p {
color: red;
margin: 5px;
cursor: pointer;
}
p:hover {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<script>
$( "p" ).click(function() {
$( this ).slideUp();
});
</script>
</body>
</html>
Animation Effects with jQuery.
slide or toggle animation with a <p> tag. you can change 'slow' to 'fast' or any number in milliseconds
$("p").slideToggle("slow");
$("p").slideToggle(1000, function() {
// do something when slide up or down animation is done
});
// hide the matched elements with a sliding motion.
$( "#book" ).slideUp( "slow", function(){
// animation complete
});
// display or hide the matched elements by animating their opacity.
$( "#book" ).fadeToggle( "fast", function(){
//animation complete
});
Example :-
File name : index.php
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" /></head>
<body>
<input type="text" id="myDatepicker" placeholder="Click to pick date" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$( "#myDatepicker" ).datepicker();
</script>
</body>
</html>
What are Events?
All the different visitor's 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
- A mouse click
- A web page loading
- Submitting an HTML form
- A keystroke on your keyboard
Binding event handlers:
The full syntax of the bind() command is as follows: selector.bind( eventType[, eventData], handler) Following is the description of the parameters:
- eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
- eventData: This is optional parameter is a map of data that will be passed to the event handler.
- handler: A function to execute each time the event is triggered.
Example:-
$('div').bind('click', function( event ){ alert('Hi there!'); });
jQuery provides the unbind() command to remove an exiting event handler. The syntax of unbind() is as follows:
selector.unbind(eventType, handler) or selector.unbind(eventType)
Following is the description of the parameters:
- eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
- eventData: This is optional parameter is a map of data that will be passed to the event handler.
- handler: If provided, identifies the specific listener that.s to be removed.
jQuery Syntax For Event Methods
Click :-
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!!});
$(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.
The following example says: When a click event fires on a <p> element; hide the current <p> element:
Example
$("p").click(function(){
$(this).hide();
});
Example :-
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
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:
Example
$("p").dblclick(function(){
$(this).hide();
});
Example :-
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</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>
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:
Example
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
Example :-
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
The click() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Click Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
p{
padding: 20px;
font: 20px sans-serif;
background: khaki;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>
</head>
<body>
<p>Click on me and I'll disappear.</p>
<p>Click on me and I'll disappear.</p>
<p>Click on me and I'll disappear.</p>
</body>
</html>
The hover() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Hover Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
p{
padding: 20px;
font: 20px sans-serif;
background: #f2f2f2;
}
p.highlight{
background: yellow;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>
</head>
<body>
<p>Place mouse pointer on me.</p>
<p>Place mouse pointer on me.</p>
<p>Place mouse pointer on me.</p>
</body>
</html>
The mouseenter() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Mouseenter Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
p{
padding: 20px;
font: 20px sans-serif;
background: #f2f2f2;
}
p.highlight{
background: yellow;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>
</head>
<body>
<p>Place mouse pointer on me.</p>
<p>Place mouse pointer on me.</p>
<p>Place mouse pointer on me.</p>
</body>
</html>
The mouseleave() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Mouseleave Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
p{
padding: 20px;
font: 20px sans-serif;
background: #f2f2f2;
}
p.highlight{
background: yellow;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>
</head>
<body>
<p>Place mouse pointer on me.</p>
<p>Place mouse pointer on me.</p>
<p>Place mouse pointer on me.</p>
</body>
</html>
The keypress() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Keypress Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
p{
padding: 10px;
background: lightgreen;
display: none;
}
div{
margin: 20px 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
</head>
<body>
<input type="text">
<div>Keypress: <span>0</span></div>
<div><strong>Note:</strong> Enter something inside the input box and see the result.</div>
<p>Keypress is triggered.</p>
</body>
</html>
The keydown() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Keydown Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
p{
padding: 10px;
background: lightgreen;
display: none;
}
div{
margin: 20px 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
</head>
<body>
<input type="text">
<div>Keydown: <span>0</span></div>
<div><strong>Note:</strong> Enter something inside the input box and see the result.</div>
<p>Keydown is triggered.</p>
</body>
</html>
The change() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Change Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>
</head>
<body>
<form>
<label>City:</label>
<select>
<option>London</option>
<option>Paris</option>
<option>New York</option>
</select>
</form>
<p><strong>Note:</strong> Select any value from the dropdown select and see the result.</p>
</body>
</html>
The focus() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Focus Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
label{
display: block;
margin: 5px 0;
}
label span{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
</head>
<body>
<form>
<label>Email: <input type="text"> <span>focus fire</span></label>
<label>Password: <input type="password"> <span>focus fire</span></label>
<label><input type="submit" value="Sign In"> <span>focus fire</span></label>
</form>
<p><strong>Note:</strong> Click on the form control or press the "Tab" key to set focus.</p>
</body>
</html>
The blur() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Blur Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
label{
display: block;
margin: 5px 0;
}
label span{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
</head>
<body>
<form>
<label>Email: <input type="text"> <span>blur fire</span></label>
<label>Password: <input type="password"> <span>blur fire</span></label>
<label><input type="submit" value="Sign In"> <span>blur fire</span></label>
</form>
<p><strong>Note:</strong> Click away from the form control or press the "Tab" key to remove focus.</p>
</body>
</html>
The blur() Method
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").blur(function(){
var result=$("input").val();
alert("Enter value is value is:"+result);
});
});
</script>
</head>
<body>
Enter title: <input type="text">
</body>
</html>
The submit() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Form Submit Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.error{
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>
</head>
<body>
<p><strong>Note:</strong> If try to submit any invalid value. It will produce an error.</p>
<form action="/examples/html/action.php" method="post" id="users">
<label for="firstName">First Name:</label>
<input type="text" name="first-name" id="firstName">
<input type="submit" value="Submit">
<div id="result"></div>
</form>
</body>
</html>
The scroll() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Scroll Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
p{
width: 100%;
padding: 50px 0;
text-align: center;
font: bold 34px sans-serif;
background: #f0e68c;
position: fixed;
top: 50px;
display: none;
}
.dummy-content{
height: 600px;
font: 34px sans-serif;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>
</head>
<body>
<p>Scroll Happened!</p>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
</body>
</html>
keyup() Method
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
var data=$("input").val();
$("#message").html(data);
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p id="message"></p>
</body>
</html>
change() Method
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
count = 0;
$(document).ready(function(){
$("select").change(function(){
var data=$("select option:selected").val();
if(data!=""){
$("#message").text(data);
}
else{
$("#message").text("Nothing");
}
});
});
</script>
</head>
<body>
<select>
<option value="">Select</option>
<option value="mahtab">mahtab</option>
<option value="habib">Habib</option>
<option value="sana">Sana</option>
</select>
<p>You Select: <span id="message"></span></p>
</body>
</html>
File name : index.php