.prop() مقابل .attr() في jQuery: تحليل خطوة بخطوة مع أمثلة

مقدمة: لماذا هذا الموضوع مهم جدًا؟

إذا كنت قد كتبت يومًا كود jQuery للحصول على قيمة سمة من عنصر HTML أو تعيينها، فمن المحتمل أنك واجهت طريقتين: .prop() و .attr(). للوهلة الأولى، تبدو أنهما تفعلان الشيء نفسه. لكن في الممارسة العملية، الفرق بينهما هو مصدر مئات الأخطاء وآلاف الأسئلة على Stack Overflow.

في هذا البرنامج التعليمي خطوة بخطوة، سنفهم مرة واحدة وإلى الأبد الفرق بين .prop() و .attr() في jQuery، ومتى نستخدم أيهما، وكيف نتجنب الوقوع في الفخ. سنكتب كودًا حيًا، ونراقب السلوك الفعلي للمتصفح، ونتذكر قاعدة بسيطة.

هذه المقالة ليست وثائق جافة. إنها دليلك الشخصي حول أحد أكثر الموضوعات إرباكًا في jQuery.

باختصار: السمات مقابل الخصائص

قبل الغوص في الكود، دعنا نفهم النظرية. في DOM (نموذج كائن المستند)، هناك مفهومان:

\n
• السمة (attribute) — ما هو مكتوب في كود HTML. على سبيل المثال، <input type="checkbox" checked="checked">. السمات دائمًا نصوص.
\n
• الخاصية (property) — ما يتم تخزينه في كائن عنصر DOM بعد أن يقرأ المتصفح HTML. يمكن أن تكون الخصائص من أي نوع بيانات: نص، قيمة منطقية، رقم، كائن.
\n

الطريقة .attr() تعمل مع السمات. الطريقة .prop() تعمل مع الخصائص. يبدو الأمر بسيطًا؟ نعم، لكن هناك تفاصيل دقيقة.

الفخ الرئيسي: السمات المنطقية

المثال الأكثر شيوعًا الذي يحير المبتدئين هو مربعات الاختيار، وأزرار الراديو، والعناصر الأخرى ذات السمات المنطقية (checked، disabled، selected، readonly).

تخيل أن لديك HTML التالي:

<input type="checkbox" id="myCheckbox" checked>

تريد التحقق مما إذا كان مربع الاختيار محددًا. من المنطقي كتابة ما يلي:

console.log( $('#myCheckbox').attr('checked') ); // "checked" (نص!)\nconsole.log( $('#myCheckbox').prop('checked') ); // true (قيمة منطقية!)

هذا هو الفرق! .attr() يُرجع النص "checked" إذا كانت السمة موجودة في HTML، و undefined إذا لم تكن موجودة. بينما .prop() يُرجع true أو false، اعتمادًا على الحالة الحالية للعنصر في DOM.

الآن الجزء المثير للاهتمام: ماذا يحدث إذا قام المستخدم بإلغاء التحديد؟

// بعد أن قام المستخدم بإلغاء التحديد:\nconsole.log( $('#myCheckbox').attr('checked') ); // "checked"! (HTML لم يتغير)\nconsole.log( $('#myCheckbox').prop('checked') ); // false (تغيرت الحالة)

لهذا السبب فإن استخدام .attr() للتحقق من حالة مربع الاختيار هو خطأ. تبقى السمة checked في HTML كما هي، بينما تتغير الخاصية checked في DOM ديناميكيًا. .prop() يعطي دائمًا الإجابة الصحيحة.

قاعدة الإبهام

هناك قاعدة بسيطة ستساعدك على تجنب الأخطاء:

\n
• استخدم .prop() عندما تحتاج إلى الحصول على أو تغيير الحالة الديناميكية للعنصر (على سبيل المثال، checked، disabled، selected، value في input).
\n
• استخدم .attr() عندما تحتاج إلى قراءة أو تغيير السمة الثابتة من HTML (على سبيل المثال، href، src، data-*، id، class).
\n

تذكر: .prop() — للخصائص التي تتغير أثناء العمل. .attr() — للسمات المحددة في الترميز.

مثال خطوة بخطوة: العمل مع disabled

دعنا نحلل حالة كلاسيكية أخرى — زر بسمة disabled.

<button id="myButton" disabled>اضغط علي</button>