Learn jQuery Events

 Learn jQuery Event Methods

jQuery Home

 

coding-zon-jquery-event-methods
An event in jQuery is an activity performed by the user that can be identified to the Web Application and run a piece of code(a function) in response.

For example, the user clicks the button  to hide the paragraph. So, clicking on the button is a user's act, which triggers a click event and run a  function for that click event on the page.
 

coding-zon-jquery-event-methods

 Some events are as follows 

  • Page loading
  • Choosing option in dropdown, 
  • Selecting checkbox or radio button
  • Clicking button
  • Mouse hovering on an image 
  • Submitting form
  • Pressing key
  • Closing document
  • Resizing a window etc. 

 Below table shows you a list of  DOM events

 

TOP Menu

e-trainings-jquery-event-methods

 

Goto TOP Menu

ready() :

When the complete web page is loaded, the ready event occurs. This example show how ready even is performed. When the full document is loaded, ready event is fired and run the function(), which displays a hello message.

 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
alert("Hello");
});
</script>
</head>
<body>
 
<p>This is  a paragraph.</p>
<p>Click me away!</p>
<p>Click me too!</p> 
 
</body> 
</html>
 
 Goto Menu
click() 
 
The function is executed when the user clicks on the HTML element. 
In the below example HTML document, There are   3 paragraph elements. 
When the user clicks on any paragraph, a click event is fired and runs one  anonymous(no name)function.
This anonymous  function will perform a hide action on a paragraph element.
 
 
Clickevent.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>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p> 
 
 </body> </html>
 
 
 Move to Menu
 
dblclick()                    
dblclick.html
 
<html>
<head>
<script src="js/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>
<img src="https://loremflickr.com/300/300"> 
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html> 
 
mouseenter(): 
 
Mouseenter_event.html
 
<html>
<head>
<script src="js/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> 
 
 ↑Menu
 
 
mouseleave():
 
Mouseleave_event.html
 
 
<html>
<head>
<style>
#div1
{
background-image:url("https://loremflickr.com/300/300");

} 
 
 
</style> 
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").mouseleave(function(){
alert("Leave the box!");
});
});
</script>
</head>
<body>
<div id="div1">This is a Box.</div> 
<img src="https://loremflickr.com/100/100"> 

</body> </html> 

 
mousedown() 
 
mousedown.html
 
 <html>
<head>
 
  
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("img").mousedown(function(){
alert("Mouse down over img!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p> 
<img src="https://loremflickr.com/200/200" ></img> 
</body> </html> 
 
Move to Top Menu
 
Mouseup(): 
 
Mouseup.html
 
 
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("img").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p> 

<img src="https://placekitten.com/200/160" ></img>  
</body> 
 </html> 
 
 
 
Go Top
 
Hover():
 
Hover.html
 
 
 <html>
<head>
 
<style> 
 #div1{
background: yellow;
height:100px;
width:100px; 
}   </style>  
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("img").hover(function(){
alert("You entered img!");
},
function(){
alert("Bye! You now leave img!");
});
});
</script>
</head>
<body> 
<img src="https://placekitten.com/200/160" ></img>  
</body> 
</html>
 
 
Menu
 
Focus, Blur: 
 
Focus.html
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body> 
 
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
 
</body> 
</html>
 
   Goto Topics

jQuery Home



































Comments











Post a Comment



















Popular posts from this blog









Using javascript pass form variables to iframe src 














Image







      Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal  view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" >     <head>         <title>Bootstrap Model with PDF Example - coding-zon</title>         <meta charset= "utf-8" >         <meta name= "viewport"  content= "width=device-width, initial-scale=1" >         <link rel= "stylesheet"  href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" >         <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.








Read more










 Creating a new PDF by Merging PDF documents using TCPDF














Image







Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF  stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs?  You can merge several documents into one. In PHP, you  have a library called TCPDF which allows you to combine one or more PDF  documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the  PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the  PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide








Read more










Import excel file into mysql in PHP 














Image







  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library  - extract it, rename the folder to library . Create index.php  file with given code in a server. Create  excelUpload.php  with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls  file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:    5.5.11 Folder Structure       Query: CREATE  TABLE  IF NOT  EXISTS  `tbl_products` (   `id` int ( 11 ) NOT  NULL  AUTO_INCREMENT,   `productname` varchar ( 100 ) DEFAULT  NULL ,   `description` varchar ( 100 ) DEFAULT  NULL ,   PRIMARY  KEY  (`id`) )     Top index.php <!DOCTYPE html>  <html>  <head>  <title> coding-zon Demo - Upload Excel to MySQL in PHP </title>  <lin








Read more