JQuery3
DOM Manipulation
------------------------------------------------
Get/Set HTML
---------------------
<html>
<head>
<title>DOM Manipulation</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
alert($("p").html());
//alert($("label:first").html());
//alert($("label:eq(1)").html());
//$("label").html("<b>Changed Name:</b>");
//$("label").html("Changed Name:");
//$("label:eq(0)").html($("label:eq(1)").html());
});
});
</script>
</head>
<body>
<h3>Personal Details</h3>
<label for="fname"><b>First Name:</b></label><input type="text" id="fname" value="John"/><br />
<label for="lname"><b>Last Name:</b></label><input type="text" id="lname" /><br />
<p>My Paragraph!!!</p>
<div id="result">The Result!!!</div>
<input type="button" id="btnClick" value="Click" /><br />
</body>
</html>
---------------------------------------------
Get/Set Text
--------------------
<html>
<head>
<title>DOM Manipulation</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
console.log($("p").text());
//console.log($("label:first").text());
//$("p").text("My new paragraph!!!");
//$("p").text("<b>My new paragraph!!!</b>");
//$("p").html("<b>My new paragraph!!!</b>");
});
});
</script>
</head>
<body>
<h3>Personal Details</h3>
<label for="fname"><b>First Name:</b></label><input type="text" id="fname" value="John"/><br />
<label for="lname"><b>Last Name:</b></label><input type="text" id="lname" /><br />
<p>My Paragraph!!!</p>
<div id="result">The Result!!!</div>
<input type="button" id="btnClick" value="Click" /><br />
</body>
</html>
----------------------------------------------------
Get /Set values of form elements
-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
console.log($("input:eq(0)").val());
//console.log($("select").val());
//console.log($("label:first").val());
/*$("input:first").val("John");
$("input:eq(1)").val($("input:first").val() + " Smith");*/
//$("select").val("Rose");
//$("select").val(["Rose", "Jasmine"]);
});
});
</script>
</head>
<body>
<h3>Personal Details</h3>
<label for="fname"><b>First Name:</b></label><input type="text" id="fname" /><br />
<label for="lname"><b>Last Name:</b></label><input type="text" id="lname" /><br />
<label for="flower"><b>Your Favorite Flower:</b></label><br />
<select id="flower" multiple>
<option>Rose</option>
<option>Tulips</option>
<option>Jasmine</option>
</select><br />
<input type="button" id="btnClick" value="Click" /><br />
</body>
</html>
-------------------------------------------------------
Get/Set Attributes & Properties
-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
console.log("The attribute value is " + $("input:first").attr("value")); // = John
//console.log("The property value is " + $("input:first").prop("value")); // input textbox value = Ann
//console.log("The attribute value is " + $("input:first").attr("id"));
//console.log("The property value is " + $("input:first").prop("id"));
//$("option:first").attr("id", "rose");
//console.log("The id of first option is " + $("option:first").attr("id"));
});
});
</script>
</head>
<body>
<h3>Personal Details</h3>
<label for="fname"><b>First Name:</b></label><input type="text" id="fname" value="John"/><br />
<label for="lname"><b>Last Name:</b></label><input type="text" id="lname" /><br />
<label for="flower"><b>Your Favorite Flower:</b></label><br />
<select id="flower" multiple>
<option>Rose</option>
<option selected>Tulips</option>
<option>Jasmine</option>
</select><br />
<input type="button" id="btnClick" value="Click" /><br />
</body>
</html>
--------------------------------------------------
Add Content or element
------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<!-- Add reference to latest jQuery file -->
<style>
.parent
{
border:3px solid black;
width:150px;
height:100px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("p").append(" Good Morning!!!");
//$(".parent").append("<div>Fourth Item</div>");
//$("p").after(" Good Morning!!!");
//$(".parent").after("<div>Fourth Item</div>");
//$("p").prepend(" Good Morning!!!");
//$(".parent").prepend("<div>Fourth Item</div>");
//$("p").before(" Good Morning!!!");
//$(".parent").before("<div>Fourth Item</div>");
});
});
</script>
</head>
<body>
<p>John Smith</p>
<div class="parent">
<div>First Item</div>
<div>Second Item</div>
<div>Third Item</div>
</div><br />
<input type="button" id="btnClick" value="Click" /><br />
</body>
</html>
------------------------------------------------------
#55. move existing element
---------------------------
-------------------------------------------------------
Remove Element
---------------------------
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<!-- Add reference to latest jQuery file -->
<style>
.parent
{
border:3px solid black;
width:150px;
height:100px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$(".parent").remove();
//$(".parent").empty();
//$("div").remove(".child");
//$(".child").remove();
});
});
</script>
</head>
<body>
<div class="parent">
<div>First Item</div>
<div class="child">Second Item</div>
<div>Third Item</div>
<div>Fourth Item</div>
</div><br />
<input type="button" id="btnClick" value="Click" /><br />
</body>
</html>
------------------------------------------------------------
Remove boxes
----------------------------
<!doctype html>
<html>
<head>
<title>Remove Elements</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.box{
width:150px;
height: 150px;
border:1px solid black;
margin:5px;
position:absolute;
}
#red
{
background: red;
left:5px;
}
#green
{
background: green;
left:175px;
}
#blue
{
background: blue;
left:345px;
}
#container{
position:absolute;
top:175px;
}
button{
font-size: 24px;
margin:7px;
border-radius: 10px;
background: gray;
border: gray;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
var id = $(this).attr("id");
$("." + id).remove();
});
});
</script>
</head>
<body>
<div id="red" class="box 1"></div>
<div id="green" class="box 2"></div>
<div id="blue" class="box 3"></div>
<div id="container">
<button id="1">Delete Red</button>
<button id="2">Delete Green</button>
<button id="3">Delete Blue</button>
</div>
</body>
</html>
--------------------------------------------------------------
Modify Content
-----------------------------------
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<!-- Add reference to latest jQuery file -->
<style>
.parent
{
border:3px solid black;
width:150px;
height:100px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("#child1").replaceWith("Another Item");
$("<b>New Item</b>").replaceAll("#child2");
});
});
</script>
</head>
<body>
<div class="parent">
<div>First Item</div>
<div id="child1">Second Item</div>
<div>Third Item</div>
<div id="child2">Fourth Item</div>
</div><br />
<input type="button" id="btnClick" value="Click" /><br />
</body>
</html>
--------------------------------------------------------------
Modify Style
-------------------------
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<style>
.coloring
{
color:red;
}
.sizing
{
font-size:30px;
background-color:green;
}
</style>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("h1, h2").css("color", "green");
//$("h1, h2").css({"color":"green", "background-color":"pink"});
$("#btnAdd").click(function(){
//alert($("h1").css("font-size"));
//$("h1, p:last").addClass("coloring");
//$("h1, p:last").addClass("coloring sizing");
//$("h1, p:last").addClass("coloring");
//$("p:first").addClass("sizing");
});
$("#btnRemove").click(function(){
//$("p:first").removeClass("sizing");
//$("p").toggleClass("sizing");
});
});
</script>
</head>
<body>
<h1>Main Heading</h1>
<!-- <h1 style="font-size:50px;">Main Heading</h1> -->
<p>This is the main content</p>
<h2>Sub Heading</h2>
<p>This is a new paragraph</p>
<button id="btnAdd">Add</button>
<button id="btnRemove">Remove</button>
</body>
</html>