Set 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>Set Methods jQuery</title>
    <style>
        body {
            font-family: arial
        }

        #box {
            background: pink;
            padding: 10px;
            border: 1px solid #000;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <!-- Set Methods : text(), html(), attr(), val() -->
    <h1>jQuery Set Methods</h1>

    <div id="box" class="test">
        <h2>Test Box</h2>
        <p>Lorem ipsum <span>dolor, sit amet</span> consectetur adipisicing elit. Atque voluptatibus soluta deserunt
            ipsa veniam quasi natus. Nam doloribus at, dignissimos asperiores repellat accusantium accusamus veniam
            maxime dolorem, voluptas corrupti quisquam.</p>
        <p id="param">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, doloribus. Deleniti aperiam, ut
            reprehenderit animi hic consequuntur laborum quaerat quo! Quaerat mollitia soluta ducimus cum facere quidem,
            maxime nisi minus?</p>
    </div>
    <br>
    <button id="clickbutton">Set Value</button>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#clickbutton").click(function () {
                $("#box h2").text("Hello World, How are you ?");

                $("#box p").text("Hello this is new text which is placed in place of this text");

                $("#box #param").html("Hello brother, <b>this is bold text</b>");

                $("#box h2").attr("class", "red");
            });
        });
    </script>
</body>

</html>







Set-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 Set Method : val()</h1>
    <form action="" id="sform">
        <label for="">Name</label>
        <input type="test" id="sname"><br><br>

        <label for="">Class</label>
        <input type="test" id="sclass"><br><br>

        <input type="submit">
    </form>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#sname").val("Pratik Patel");    //Set the value of Name
            $("#sclass").val("BTech");  //Set the value of Class
        });
    </script>
</body>

</html>







Comments

Post a Comment

Popular posts from this blog

Basic Syntax in jQuery

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "css/style.css" > </ head > < body >     < h1 > jQuery Syntax </ h1 >     < div id = "test1" >         < h2 > Test Box 1 </ h2 >         < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel aliquid molestias cum maiores perferendis             accusantium odit tempora doloribus aperiam, deserunt aliquam, magnam porro nihil quas qui dolorum placeat,             delectus aspernatur. </ p >     </ div >     < div id = "test2" >         < h2 > Test Box 2 </ h2 >  ...
Read more

Event "Target" Property in jQuery

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < link rel = "stylesheet" href = "css/Event_Target_Property.css" >     < title > Event Target Property </ title > </ head > < body >     < h1 > jQuery Event.target Property </ h1 >     < div id = "box" >         < h2 > Test Box </ h2 >         < p > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, expedita rem maiores doloribus veritatis,             magnam, vitae placeat officiis laboriosam itaque velit autem! Impedit eos, adipisci numquam corrupti hic             r...
Read more