Diferença entre .prop() e .attr() no jQuery: por que propriedades e atributos se comportam de forma diferente?

Olá a todos! Sou novo em JavaScript e jQuery, e não consigo entender a diferença entre os métodos `.prop()` e `.attr()`. Li a documentação, mas a confusão continua. Aqui está um exemplo específico que me deixou perplexo. Tenho um checkbox: ```html ``` Quando tento obter seu estado com jQuery, obtenho resultados diferentes: ```javascript // Primeira forma console.log($('#myCheckbox').attr('checked')); // Exibe "checked" // Segunda forma console.log($('#myCheckbox').prop('checked')); // Exibe true ``` Por que isso? Afinal, no HTML o atributo `checked` está explicitamente definido. Eu esperava que ambos os métodos retornassem a mesma coisa. Fiquei ainda mais confuso quando tentei alterar dinamicamente o estado do checkbox via JavaScript: ```javascript $('#myCheckbox').prop('checked', false); console.log($('#myCheckbox').attr('checked')); // Ainda "checked"! ``` Ou seja, mesmo depois de desmarcar programaticamente, `.attr()` ainda retorna...