Difference between .prop() and .attr() in jQuery: why do properties and attributes behave differently?

Hello everyone! I'm a beginner in JavaScript and jQuery, and I can't understand the difference between the `.prop()` and `.attr()` methods. I've read the documentation, but the confusion remains. Here's a specific example that puzzled me. I have a checkbox: ```html ``` When I try to get its state using jQuery, I get different results: ```javascript // First method console.log($('#myCheckbox').attr('checked')); // Outputs "checked" // Second method console.log($('#myCheckbox').prop('checked')); // Outputs true ``` Why is that? After all, the `checked` attribute is explicitly specified in the HTML. I expected both methods to return the same thing. I got even more confused when I tried to dynamically change the checkbox state via JavaScript: