الفرق بين .prop() و .attr() في jQuery: لماذا تتصرف الخصائص والسمات بشكل مختلف؟

مرحباً بالجميع! أنا مبتدئ في JavaScript و jQuery، ولا أستطيع فهم الفرق بين طريقتي `.prop()` و `.attr()`. قرأت الوثائق، لكن الارتباك لا يزال قائماً. إليك مثال محدد حيرني. لدي checkbox: ```html ``` عندما أحاول الحصول على حالته باستخدام jQuery، أحصل على نتائج مختلفة: ```javascript // الطريقة الأولى console.log($('#myCheckbox').attr('checked')); // يطبع "checked" // الطريقة الثانية console.log($('#myCheckbox').prop('checked')); // يطبع true ``` لماذا يحدث هذا؟ ففي HTML السمة `checked` محددة بوضوح. كنت أتوقع أن تعيد كلتا الطريقتين نفس الشيء. وزاد ارتباكي أكثر عندما حاولت تغيير حالة checkbox ديناميكياً عبر JavaScript: ```javascript $('#myCheckbox').prop('checked', false); console.log($('#myCheckbox').attr('checked')); // ما زالت "checked"! ``` أي أنه حتى بعد إزالة العلامة برمجياً، لا يزال `.attr()` يعيد