1.Access value by ID
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Get the textbox value using ID</h1>
<input id="txt1" type="text" value="179">
<input type="button" value="check Value" onclick="chk_val();">
<script src="js/jquery-2.2.0.min.js"></script>
<script>
function chk_val()
{
var ans = $("#txt1").val();
alert(ans);
}
</script>
</body>
</html>
2.ACCESS VALUE BY CLASS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Get the textbox value using Class</h1>
<input class="clsname" type="text" value="256">
<input type="button" value="check Value" onclick="chk_val();">
<script src="js/jquery-2.2.0.min.js"></script>
<script>
function chk_val()
{
var ans = $(".clsname").val();
alert(ans);
}
</script>
</body>
</html>
3.SIMPLE ADDITION
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Two Number Addition</h1>
<input id="txt1" type="text" value="5">
<input id="txt2" type="text" value="6">
<input type="button" value="check Answer" onclick="chk_ans();">
<script src="js/jquery-2.2.0.min.js"></script>
<script>
function chk_ans()
{
/parseInt is used convert to Integer value, text box is return string value/
var txt1 = parseInt($("#txt1").val());
var txt2 = parseInt($("#txt2").val());
var ans = txt1 + txt2;
alert(ans);
}
</script>
</body>
</html>
4.LOAD AND READY
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Load and Ready</h1>
<p>ready function execute first and load function execute second</p>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
alert("Document Ready Executed");
});
$(window).load(function()
{
alert("Window Load Executed");
});
</script>
</body>
</html>
5.jQuery click function
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>jQuery Click function</h1>
<input type="button" id="btn" value="Click Me">
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#btn").click(function()
{
alert("Clicked");
});
});
</script>
</body>
</html>
6.HIDE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hide</h1>
<input type="button" id="hdbtn" value="Hide">
<div id="d1">This is the Div</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#hdbtn").click(function()
{
$("#d1").hide();
});
});
</script>
</body>
</html>
Comments