Embedded Files
JQuery events
---------------------------------------------
Mouse events
----------------
$("#box").click(function(){
$(this).css("background-color", "pink");
});
/*$("#box").dblclick(function(){
$(this).css("background-color", "pink");
});*/
/*$("#box").mouseenter(function(){
$(this).css("background-color", "pink");
});*/
/*$("#box").mouseleave(function(){
$(this).css("background-color", "purple");
});*/
/*$("#box").hover(function(){
$(this).css("background-color", "pink");
}, function(){
$(this).css("background-color", "purple");
});*/
/*$("#box").mousedown(function(){
$(this).css("background-color", "pink");
});
$("#box").mouseup(function(){
$(this).css("background-color", "green");
});*/
<script type="text/javascript">
$(document).ready(function(){
$("p").on("click", function(){
$(this).css("background-color", "pink");
});
$("p:first").click(function(){
$("p:last").trigger("click");
});
});
</script>
<body>
<div>
<p>this is first Paragraph</p>
</div>
<div>
<p>this is second Paragraph</p>
</div>
<div>
<p>this is third Paragraph</p>
</div>
</body>
-----------------------------------------------------
Keyboard events
-----------------------
<script type="text/javascript">
$(document).ready(function(){
$("#txtName").keydown(function(){
$(this).css("color", "blue");
});
$("#txtName").keyup(function(){
$(this).css("color", "black");
});
});
</script>
-------------------------------------------
Mouse focusin focusout // form events - 1
------------------------------
<html>
<head>
<title>Events</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$(":text").focus(function(){
$(this).css("background-color", "gray");
});
$(":text").blur(function(){
$(this).css("background-color", "white");
});
// $("fieldset").focusin(function(){
// $(this).css("background-color", "gray");
// });
// $("fieldset").focusout(function(){
// $(this).css("background-color", "orange");
// });
// $("fieldset").focus(function(){
// $(this).css("background-color", "gray");
// });
// $("fieldset").blur(function(){
// $(this).css("background-color", "green");
// });
});
</script>
</head>
<body>
<fieldset style="width:200px;">
<legend><b>Personal</b></legend>
<input type="text" id="firstName" placeholder="First Name" /><br />
<input type="text" id="lastName" placeholder="Last Name" /><br />
<input type="submit" id="btnSubmit" value="Submit" />
</fieldset>
</body>
</html>
---------------------------------------------------
form events -2
---------------------
<!DOCTYPE html>
<html>
<head>
<title>Events</title>
<style>
div{
color: blue;
font-size: 20px;
}
</style>
<!-- Add reference to latest jQuery file -->
<script src="/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $("select").change(function(){
// $("#result").text($(this).val()).show().fadeOut(3000);
// });
// $(":text").change(function(){
// $("#result").text($(this).val()).show().fadeOut(3000);
// });
// $(":text").select(function(){
// $("#result").text($(this).val()).show().fadeOut(3000);
// });
$("form").submit(function(){
$("#result").text($("#salutation").val() + ". " + $("[name=FirstName]").val() + " " + $("[name=LastName]").val() );
return false;
});
});
</script>
</head>
<body>
<form>
<fieldset style="width:400px">
<legend><b>Personal</b></legend>
Salutation:
<select id="salutation">
<option value="Mr">Mr.</option>
<option value="Miss">Miss.</option>
<option value="Ms">Ms.</option>
<option value="Mrs">Mrs.</option>
</select><br />
First Name: <input type="text" name="FirstName"/><br />
Last Name: <input type="text" name="LastName"/><br />
<input type="submit" id="btnSubmit" value="Submit"/><br />
<div id="result"></div>
</fieldset>
</form>
</body>
</html>
--------------------------------------------------
Browser events
-----------------------
<!DOCTYPE html>
<html>
<head>
<title>Events</title>
<!-- Add reference to latest jQuery file -->
<script src="/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function(){
$("#size").text("Width: " + $(window).width() + " Height: " + $(window).height());
});
/* // Also uncomment the <p> tag in the HTML section
var i = 1;
$(window).scroll(function(){
$("div").text("Scroll: " + i);
i++;
});*/
$(window).scroll(function(){
var left = window.pageXOffset;
var top = window.pageYOffset;
$("#scroll").text("Scroll X= " + left +" , Y= "+ top);
$("#scrollbottom").text("Scroll X= " + left +" , Y= "+ top);
});
});
</script>
</head>
<body>
<div id="scroll"></div>
<br/>
<div id="size"></div>
<p>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
My Paragraph. My Paragraph.<br/>
</p>
<br/>
<div id="scrollbottom"></div>
</body>
</html>
----------------------------------------------------------
Attach Event Handler
--------------------
<html>
<head>
<title>Events</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("p").on("click", function(){
$(this).css("fontSize", "20px");
});
/*$("button").click(function(){
$("p").off("click");
});*/
/*$("p").on({click:function(){
$(this).css("fontSize", "20px");
},
dblclick:function(){
$(this).css("color", "red");
}});*/
/*var i = 1;
$("#btnClick").one("click", function(){
$("div").text(i);
i++;
});
$("#btnClick").on("click", function(){
$("div").text(i);
i++;
});*/
/* $("p").on("click", function(){
$(this).css("background-color", "pink");
});
$("p:first").click(function(){
$("p:last").trigger("click");
});*/
});
</script>
</head>
<body>
<div></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<button id="btnClick">Click</button>
</body>
</html>
--------------------------------------------------------
Method Chaining
---------------
<html>
<head>
<title>Method Chaining</title>
<style>
#box
{
width:100px;
height:100px;
border:2px solid black;
background-color:pink;
}
</style>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("#box").text("This is cool!!!").slideUp(5000).slideDown(5000);
});
});
</script>
</head>
<body>
<div id="box"></div><br />
<button id="btnClick">Click!!!</button>
</body>
</html>
Page updated
Google Sites
Report abuse