Set attribute and property jQuery value

Follow @lookkleweb

We will check how attributes and properties work in JQuery.

In the web we can see an input with id example and an element a with id my_link with a link.

We select the id my_link and save in a url variable the value of the attribute. Then we display it.
We select the id my_link and set the attribute target="_blank" so that the link is returned in a new page.
The input with id example we apply the attributes type text and value Mike. We show the value of its attribute and property, and the existing type with attr and prop.
To the input with id example we change the attribute value to John and we show its result with attr and prop.
To the input with id example we change its value to Nothing and we show its result with attr and prop.

<html>
  <body>
    <input id="example"><br>
    <a href="https://www.lookkle.com" id="my_link">Link</a>
    <br><br>
    <!--Script jQuery-->
    <script>
       $(document).ready(function(){
         //Saving in a url variable the value of the attribute
         var url = $("#my_link").attr("href");
		console.log('My link is '+url);
         //Set the a attribute to target="_blank"
         $("#my_link").attr("target","_blank");
		 //Apply for id example the attributes type text and value Mike
         $("#example").attr({
           type:"text",
           value:"Mike"
          });
         console.log('Attribute value is');
         console.log($("#example").attr("value"));
         console.log('Property value is');
         console.log($("#example").prop("value"));
         console.log('Attribute type is');
         console.log($("#example").attr("type"));
         console.log('Property type is');
         console.log($("#example").prop("type"));
         //Changing the attribute value to John
         $("#example").attr('value',"John");
         console.log('Changed Attribute is ');
         console.log($("#example").attr("value"));
         console.log('Changed property is');
         console.log($("#example").prop("value"));
         //Changing its value to Nothing with val()
         $("#example").val("Nothing");
         console.log('Changed Attribute with val() is ');
         console.log($("#example").attr("value"));
         console.log('Changed property with val() is');
         console.log($("#example").prop("value"));
       });
    </script>
    <!--JQuery Library-->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  </body>
</html>

xxxxxxxxxx
 
<html>
  <body>
    <input id="example"><br>
    <a href="https://www.lookkle.com" id="my_link">Link</a>
    <br><br>
    <!--Script jQuery-->
    <script>
       $(document).ready(function(){
         //Saving in a url variable the value of the attribute
         var url = $("#my_link").attr("href");
        console.log('My link is '+url);
         //Set the a attribute to target="_blank"
         $("#my_link").attr("target","_blank");
         //Apply for id example the attributes type text and value Mike
         $("#example").attr({
           type:"text",
           value:"Mike"
          });
         console.log('Attribute value is');
         console.log($("#example").attr("value"));
         console.log('Property value is');
         console.log($("#example").prop("value"));
         console.log('Attribute type is');
         console.log($("#example").attr("type"));
         console.log('Property type is');
         console.log($("#example").prop("type"));
         //Changing the attribute value to John
         $("#example").attr('value',"John");
         console.log('Changed Attribute is ');
         console.log($("#example").attr("value"));
         console.log('Changed property is');
         console.log($("#example").prop("value"));
         //Changing its value to Nothing with val()
         $("#example").val("Nothing");
         console.log('Changed Attribute with val() is ');
         console.log($("#example").attr("value"));
         console.log('Changed property with val() is');
         console.log($("#example").prop("value"));
       });
    </script>
    <!--JQuery Library-->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  </body>