prop attr jquery difference

In the following example we will check the basic difference between attributes and properties in JQuery.
In the page we can see an input with id example and an element a with id my_link that will allow us to create a link:

We select the input with id example and get the value of the attribute and property value.
We select the input with id example and with the function val we set another value for the input. With attr and prop we obtain the value of the attribute and value property.
We select the link creator with id my_link and get the value of the attribute and property href.
We select the link creator with id my_link and get the value of the attribute and property target.

<html>
  <body>
    <input id="example" type="text" value="John">
    <a href="#" target="_blank" id="my_link">Link</a>
    <br><br>
    <!--Script jQuery-->
    <script>
       $(document).ready(function(){
         console.log($("#example").attr("value"));//Attributes refer to the original value
         console.log($("#example").prop("value"));//Properties refer to the current value
         console.log('Changing the input value to Mike:');
         $('#example').val('Mike');
         console.log($("#example").attr("value"));
         console.log($("#example").prop("value"));
         
         console.log($("#my_link").attr("href"));
         console.log($("#my_link").prop("href"));
         
         console.log($("#my_link").attr("target"));
         console.log($("#my_link").prop("target"));
       });
    </script>
    <!--JQuery Library-->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  </body>
</html>