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>