Events
All the action done on a web page according to which a web page respond is called an event.
Examples
$("p").click(); Here we have selected element <p> on the click of which something should happen. Now we will define that what should happen to on the click event.
$("p").click(function(){
$(this).hide();
});
We have added an action on the event "click", the action is hide the current/selected element in <p> tag.
Working code of this is as follows :
All the action done on a web page according to which a web page respond is called an event.
Examples
- Clicking on a button
- loading of a web page
- Key press
$("p").click(); Here we have selected element <p> on the click of which something should happen. Now we will define that what should happen to on the click event.
$("p").click(function(){
$(this).hide();
});
We have added an action on the event "click", the action is hide the current/selected element in <p> tag.
Working code of this is as follows :
<html> <head> <title>First jquery example</title> <!-- This line will load the bootstrap css file --> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <!-- This file will load jquery file so that we can use its function --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> </head> <body> <div class="panel panel-primary"> <h3 class="text-primary" align="center"> First jquery example</h3> <div class="panel panel-primary"> <p align="center">Click on the this text and it will be hidden</p><br> <!-- <p align="center">This is the second text to hide</p> --> </div> </div> </body> <script type="text/javascript"> /*$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); });*/ /*The code above this line also works same as the code below. The code shown below is an alternative code for the above code*/ $(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </html>
The above is just an example of click event, similar to click event we can have more events which are classified as follows
Mouse Events
- click
- dblcick
- mouseenter
- mouseleave
- keypress
- keydown
- keyup
- submit
- change
- focus
- blur
- load
- resize
- scroll
- unload
0 comments:
Post a Comment