Get Methods in jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Methods jQuery</title>
<style>
body {
font-family: arial
}
#box {
background: pink;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- Get Methods : text(), html(), attr(), val() -->
<h1>Get Methods in jQuery</h1>
<div id="box" class="test abc">
<h2>Test Box</h2>
<p>Lorem ipsum <span>dolor sit amet</span> consectetur adipisicing elit. At neque voluptates id dolorem porro
quae ratione?
Nihil placeat sit saepe culpa impedit! Atque a, voluptas odio porro architecto numquam laboriosam?</p>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
//There is a difference between "html()" and "text()" is that "text()" will
//give only text(except html Tags) and "html()" will give text as well as html Tags also.
var a = $("#box").html();
console.log(a);
var b = $("body").html();
console.log(b);
var c = $("#box p").html();
console.log(c);
var d = $("#box h2").html();
console.log(d);
var e = $("#box p").text();
console.log(e);
var f = $("#box").text();
console.log(f);
var g = $("#box").attr("class");
console.log(g);
});
</script>
</body>
</html>
Get-Form-val.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Events</title>
</head>
<body>
<h1>jQuery Get Methods</h1>
<form action="" id="sform">
<label for="">Name</label><input type="text" id="sname"><br><br>
<label for="">Class</label><input type="text" id="sclass"><br><br>
<label for="">Country</label>
<select id="scountry">
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Sri Lanka">Sri Lanka</option>
</select><br><br>
<input type="submit">
</form>
<div id="test" style="border:1px solid red;margin-top:20px;"></div>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#sform").submit(function () {
var name = $("#sname").val();
console.log(name);
alert("Hello " + name);
var className = $("#sclass").val();
console.log(className);
alert("Your class is : " + className);
var country = $("#scountry").val();
console.log(country);
alert("Your Country is : " + country);
alert("Hello " + name + ", " + "Your class is : " + className + ", " + "Your Country is : " + country);
});
});
</script>
</body>
</html>
.png)
Comments
Post a Comment