التابع .attr() في jQuery
يُستَخدَم التّابع .attr() للحصول على قيمة خاصيّة HTML لأوّل عنصر من مجموعة العناصر المُطابِقة، أو تعيين خاصيّة HTML أو عدة خاصيّات لكل عنصر مُطابِق.
attr( attributeName ).
القيمة المعادة
سلسلة نصيّة على شكل الكائن String.
الوصف
الحصول على قيمة خاصيّة HTML لأوّل عنصر من مجموعة العناصر المُطابِقة.
attr( attributeName ).
أضيفت في الإصدار: 1.0.
attributeName
سلسلة نصيّة من الكائن String، تُمثِّل اسم خاصيّة HTML المطلوب الحصول على قيمتها.
يحصل التّابع .attr() على قيمة خاصيّة HTML لأول عنصر فقط من المجموعة المُطابقة. للحصول على القيمة لكل عنصر على حدة، استخدم بُنية حلقيّة كتوابع jQuery مثل .each() أو .map().
يمتلك استخدام التابع .attr() في jQuery للحصول على قيمة خاصيّة العنصر فائدتين رئيسيتين:
- السّهولة: من الممكن استدعاء هذا التّابع مباشرةً على كائن jQuery وبشكل سلسلة مع توابع jQuery الأخرى.
- التّوافقيّة عبر المتصفّحات: ترد تقارير عن عدم توافقيّة قيم بعض خاصيّات HTML عبر المتصفّحات، وحتى عبر إصدارات المتصفّح ذاته. يُقلِّل التّابع
.attr()من مشاكل عدم التوافقيّة هذه.
ملاحظة: قيم خاصيّات HTML هي سلاسل نصّيّة باستثناء بعض الخاصيّات مثل value وtabindex.
يُعيد التابع .attr() بدءًا من إصدار jQuery 1.6 القيمة undefined (غير مُعرَّف) لأجل خاصيّات HTML غير المُعيَّنة. للحصول على خاصيّات الكائن DOM وتغييرها مثل حالة عناصر الحقل checked، أو selected، أو disabled، فاستخدم التابع .prop().
الفرق بين خاصيات Attributes) HTML) وخاصيات الكائنات (Properties)
يكون الفرق بين خاصيّات HTML وخاصيّات الكائنات مهمًا في بعض الحالات، فقبل الإصدار jQuery 1.6 كان التابع .attr() يأخذ أحيانًا بالحسبان قيم خاصيّات الكائنات عند محاولة الحصول على قيم بعض خاصيّات HTML، ممّا قد يُسبِّب سلوكًا غير متناسق. بدءًا من الإصدار jQuery 1.6 أصبح التّابع .prop() يُزوِّدنا بطريقة للحصول على قيم خاصيّات الكائنات تحديدًا، بينما يعيد التّابعُ .attr() خاصيّات HTML.
على سبيل المثال ينبغي استرجاع خاصيّات الكائنات selectedIndex، و tagName، و nodeName، و nodeType، و ownerDocument، و defaultChecked، و defaultSelected عن طريق التابع .prop(). قبل إصدار jQuery 1.6 كان من الممكن استرجاع خاصيّات الكائنات هذه عبر التّابع .attr()، ولكن لم يكن هذا من ضمن مجال .attr()، فلا تملك خاصيّات الكائنات هذه خاصيّات HTML مُوافِقة لها وهي عبارة عن خاصيّات للكائنات فقط.
فيما يتعلّق بخاصيّات HTML المنطقيّة فلنفترض وجود عنصر DOM مُعرَّف عن طريق عنصر HTML التالي:
<input type="checkbox" checked="checked">
ولنفترض أنّه ضمن متغيّر JavaScript يُدعى elem:
| elem.checked | true (قيمة منطقيّة)، تتغيّر بحسب حالة صندوق التأشير. |
| $( elem ).prop( "checked" ) | true (قيمة منطقيّة)، تتغيّر بحسب حالة صندوق التأشير. |
| elem.getAttribute( "checked" ) | "checked" (سلسلة نصيّة)، الحالة المبدئيّة لصندوق التأشير، لا تتغيّر. |
| $( elem ).attr( "checked" ) (الإصدار 1.6) | "checked" (سلسلة نصيّة)، الحالة المبدئيّة لصندوق التأشير لا تتغيّر. |
| $( elem ).attr( "checked" ) (الإصدار 1.6.1+) | "checked" (سلسلة نصيّة)، تتغيّر بحسب حالة صندوق التأشير. |
| $( elem ).attr( "checked" ) (قبل الإصدار 1.6) | true (قيمة منطقيّة)، تتغيّر بحسب حالة صندوق التأشير. |
وفقًا لمواصفة النماذج في W3C فإنّ خاصيّة HTML checked هي عبارة عن خاصيّة منطقيّة (boolean attribute)، ممّا يعني أنّ خاصيّة الكائن الموافقة لها تكون قيمتها true بمجرّد وجود خاصيّة HTML، حتى ولو لم تكن تملك أي قيمة أو كانت قيمتها سلسلة نصيّة فارغة، أو كانت قيمتها false، وينطبق هذا على جميع خاصيّات HTML المنطقيّة.
على أيّة حال أهم مفهوم يجب تذكره عن خاصيّة HTML checked أنّها لا تتوافق مع خاصيّة الكائن checked، بل في الحقيقة تتوافق مع خاصيّة الكائن defaultChecked ويجب أن تُستخدَم لتعيين القيمة الافتراضيّة لصندوق التأشير فلا تتغيّر خاصيّة HTML checked تبعًا لحالة مربّع الاختيار، بينما تتغيّر خاصيّة الكائن checked بحسب حالته، لذلك فإنّ استخدام خاصيّة الكائن هي الطريقة الأكثر توافقيّة عبر المتصفّحات لتحديد ما إذا كان مربّع الاختيار مُحدَّدًا:
- if ( elem.checked )
- if ( $( elem ).prop( "checked" ) )
- if ( $( elem ).is( ":checked" ) )
وينطبق هذا على خاصيّات HTML المتغيّرة الأخرى مثل selected و value.
ملاحظات إضافية
يؤدّي استخدام التّابع .prop() في متصفّح Internet Explorer قبل الإصدار التاسع من أجل تعيين خاصيّة كائن لعنصر DOM إلى أي شيء بخلاف قيمة أولية بسيطة (مثل عدد، أو سلسلة نصيّة، أو قيمة منطقيّة) إلى تسريب في الذاكرة (memory leak) إن لم تُزال خاصيّة الكائن (باستخدام التّابع .removeProp()) وذلك قبل إزالة عنصر DOM من المستند. ولتعيين قيم كائنات DOM بأمان دون حدوث تسريبات في الذّاكرة استخدم التّابع .data().
أمثلة
عرض خاصيّة HTML checked وخاصيّة الكائن لصندوق التأشير بينما تتغيّر: