Blur Event in jQuery
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "hotpink"); }); $("input").blur(function(){ $(this).css("background-color", "lightgray"); }); }); |
Click Event in JQuery
|
1 2 3 4 5 |
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); |
Double Click Event in JQuery
|
1 2 3 4 |
$(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); |
Focus Event in jQuery
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "lightblue"); }); $("input").blur(function(){ $(this).css("background-color", "lightgray"); }); }); |
Hover Event in JQuery
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $("#T").hover(function(){ alert("You entered the paragraph"); }, function(){ alert("Bye! You now leave the paragraph"); }); }); |
Mouse Enter Event in JQuery
|
1 2 3 4 5 |
$(document).ready(function(){ $("#T").mouseenter(function(){ alert("You Enter the paragraph"); }); }); |
Mouse Leave Event in JQuery
|
1 2 3 4 5 |
$(document).ready(function(){ $("#T").mouseleave(function(){ alert("Good Bye ! You now leave the paragraph"); }); }); |
on Method Event in JQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function(){ $("p").on({ mouseenter: function(){ $(this).css("background-color", "yellow"); }, mouseleave: function(){ $(this).css("background-color", "red"); }, click: function(){ $(this).css("background-color", "lightgray"); } }); }); |
Video Lecture
