- Page request:
- Start:
- Page Initialization:
- Page load:
- Validation:
- Postback event handling:
- Rendering:
- Unload:
.hover()
hover mouse event triggers to the element when user take mouse over the perticular element.
<div> id="hoverDiv">Change Color </div>
$(document).ready(function()
{
$("hoverDiv").hover(
function () {
$(this).css("backgroundcolor", 'blue');
}
);
});
.mousedown()
mousedown() mouse event triggers when user clicks on the the perticular element.
<div> id="hoverDiv">Change Color</div>
$(document).ready(function()
{
$("hoverDiv").mousedown(
function () {
alert('Mouse Down event fired for div')
}
);
});
.mouseenter()
mouseenter() mouse event triggers when user enter to the area of perticular element. This is different from .hover in the way the event bubbling happens. If we have element inside element and mouse enters to inside element the mouseenter event will not fire for ouside element. But in case of .mouseover() mouse event it will fire for both inner and outter element. For more info: http://api.jquery.com/mouseenter/
<div> class="out enter">
<p>move your mouse</p>
<p>0</p>
</div>
var i = 0;
$("div.enter").mouseenter(function(){
$("p:first",this).text("mouse enter");
$("p:last",this).text(++i);
});
.mouseleave()
mouseleave() mouse event triggers when user leaves the area of perticular element. This is different from .hover in the way the event bubbling happens. If we have element inside element and mouse leaves from inside element the mouseleave event will not fire for ouside element. But in case of .mouseout() mouse event it will fire for both inner and outter element. For more info: http://api.jquery.com/mouseenter/
<div> class="out leave">
<p>move your mouse</p>
<p>0</p>
</div>
var i = 0;
$("div.leave").mouseleave(function(){
$("p:first",this).text("mouse leave");
$("p:last",this).text(++i);
});
In this post we will look how jQuery mouse events works. jQuery library provides mouse events like click, double click, mouseup, mousedown, toggle..etc. Using this jQuery events one can easily perform the required operations or actions. We will look jQuery events samples in this post.
.click()
click event get triggered to an element when mouse button is pressed and released on that element. Any HTML element can trigger this event.
<a id="mouseclick" href="mouseclickdemo.aspx">Click here</a>
$(document).ready(function()
{
$("#mouseclick").click(function(){
alert("This is jQuery Mouse Click event.")
});
});
.dblclick()
dblclick event get triggered to an element when mouse button is pressed and released twice on that element. Any HTML element can trigger this event.
<div id="mousedblclick"> Click here</div>
$(document).ready(function()
{
$("#mousedblclick".dblclick(function(){
alert("This is jQuery mouse dblClick event.")
});
});
.mousedown()
mousedown event get triggered to an element when mouse button is moved over the element and mouse button is pressed . Any HTML element can trigger this event.
<span id="mousedown">Click here</span>
$(document).ready(function()
{
$("#mousedown").mousedown(function(){
alert("jQuery mousedown event.")
});
});
.mouseup()
mouseup event get triggered to an element when mouse button is pressed and then released. Any HTML element can trigger this event.
<div id="mouseup"> Click here</ div>
$(document).ready(function()
{
$("#mouseup").mouseup(function(){
alert("jQuery mouseup event.")
});
});
When mouse button is released then jQuery mouse event will get triggered and it will show alert message “jQuery mouseup event.”
.toggle()
toggle event used to do the alternate actions for perticular operation. Which is used in association with click.
<div id="toogleDiv"> Change Color </div>
$(document).ready(function()
{
$("toogleDiv").toggle(
function() {
$(this).css("backgroundcolor", 'blue');
},
function () {
$(this).css("backgroundcolor",'green');
});
});
jQuery toggle event used to change the state of object from one state to other. for example we can show or hide div element using toggle event. Toggle event works in association with click event. In above code sample when we click on div element it will change color from blue to green and if it already green then changes it to blue.
jQuery basically have following type of events:
Indicates that DOM is fully loaded that mean all controls and it's hierarchy is fully loaded .This is the best place to do all event handling and jacascript/jQuery code manipulations.
$(document).ready(function()
{
// Handler for .ready() called.
});
.load()
.load event executes code when page is rendered or a perticular element is rendered. Use this event when code is relies on loaded assests like images.
$(window).load(function()
{
// Add code here
);
<img src="something.png" id="imageDemo"/>
$("#imageDemo").load()(function(){
// Add code here.
});
.unload()
Use this event when user navigates away from the page or window.
Below example shows how .unload() works in jQuery:
$(window).unload(function(){
alert('I am unloading.');
});
.keydown()
Event on element get triggered when user presses any key on keyboard. If you want keydown event get fired when user start typing in some text box.
Below example shows how .keydown() works in jQuery:
For textbox you can write it like
<input id="keyDownDemo" type="text" value="Hello"/>
$("#keyDownDemo").keydown(function(){
alert(Hello jQuery KeyDown Happened.');
});
In this post we will see very basic of jQuery.How to start with jQuery?jQuery, is a Javascript library with cross-browser support and open source which simplify the client side scripting in web/html.
It supports
Get Started using jQuery:
jQuery needs to add library in html or web page which is a .js file that contains Ajax funcions, effects, DOM, events ...etc. You can download jQuery library from http://docs.jquery.com/Downloading_jQuery
After downloading jQuery library add it to page like below:
Sample to start with jQuery:
<!DOCTYPE html >
< html>
<head>
<title>jQuery Demo</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form id="Form1" method="post" runat="server">
</form>
</body>
</html>