Diferencia entre .prop() y .attr() en jQuery: ¿por qué propiedades y atributos se comportan de manera diferente?

¡Hola a todos! Soy nuevo en JavaScript y jQuery, y no puedo entender la diferencia entre los métodos `.prop()` y `.attr()`. Leí la documentación, pero la confusión persiste. Aquí hay un ejemplo concreto que me dejó perplejo. Tengo un checkbox: ```html ``` Cuando intento obtener su estado con jQuery, obtengo resultados diferentes: ```javascript // Primera forma console.log($('#myCheckbox').attr('checked')); // Devuelve "checked" // Segunda forma console.log($('#myCheckbox').prop('checked')); // Devuelve true ``` ¿Por qué sucede esto? En el HTML el attribute `checked` está explícitamente indicado. Esperaba que ambos métodos devolvieran lo mismo. Me confundí aún más cuando intenté cambiar dinámicamente el estado del checkbox mediante JavaScript: ```javascript $('#myCheckbox').prop('checked', false); console.log($('#myCheckbox').attr('checked')); // ¡Sigue siendo "checked"! ``` Es decir, incluso después de desmarcar la casilla programáticamente, `.attr()` todavía...