التلاعب بـ DOM
لقد رأيت سابقًا أن أطر عمل JavaScript تسهل الحصول على عناصر محددة باستخدام المحددات واجتياز DOM . ومع ذلك، من أجل تغيير محتوى ومظهر عناصر معينة على صفحة ويب، تحتاج إلى التعامل مع DOM وتطبيق التغييرات. قد يتطلب استخدام JavaScript خالصًا الكثير من العمل، ولكن لحسن الحظ، توفر معظم أطر عمل JavaScript وظائف مفيدة تجعل القيام بذلك أمرًا سهلاً.
لنفترض أن لديك صندوقًا يحمل معرف الصندوق.
<div id="the-box">تظهر الرسالة هنا</div>
استخدم jQuery لتغيير نصه إلى "يتم إرسال الرسالة هنا"، والذي يمكن استخدامه بسهولة على النحو التالي:
$('#the-box').html('هذه هي الرسالة الجديدة!');
في الواقع، يمكنك استخدام تعليمات HTML البرمجية في الوظائف وسيتم تحليلها بواسطة المتصفح، على سبيل المثال:
$('#the-box').html('هذه هي الرسالة <strong>الجديدة</strong>!');
في هذا المثال، يبدو المحتوى الموجود داخل عنصر DIV كما يلي:
<div id="the-box">هذه هي الرسالة <strong>الجديدة</strong>!'</div>
بالطبع، في المثال، تحتاج إلى استخدام أحرف خاصة مثل أكبر من أو أقل من، بدلاً من تحديد رموز كيان HTML خاصة. يمكنك استخدام وظيفة النص في jQuery بدلاً من ذلك:
$('#the-box').text('300 >200');
الكود بعد تحديث عنصر div هو كما يلي:
<div id="the-box">300 > 200</div>
في المثال أعلاه، يتم استبدال المحتوى الموجود بمحتوى جديد. ماذا لو كنت تريد فقط إلحاق بعض المعلومات بالنص؟ ولحسن الحظ، يوفر jQuery وظيفة الإلحاق لهذا الغرض.
$('#the-box').append(', هنا تظهر الرسالة');
بعد إجراء العمليات المذكورة أعلاه على div الأصلي، يبدو المحتوى الموجود في عنصر div كما يلي:
<div id="the-box">تظهر الرسالة هنا، وهنا تظهر الرسالة</div>
بدلاً من الإلحاق، يمكنك إضافة المحتوى مسبقًا، وإدراجه قبل المحتوى الموجود بدلاً من إضافته بعده. بالإضافة إلى ذلك، يوفر jQuery وظائف لإدراج المحتوى داخل عنصر معين، إما قبله أو بعده. هناك أيضًا وظائف لاستبدال المحتوى ومسح المحتوى وإزالة العناصر واستنساخ العناصر والمزيد.
بالإضافة إلى وظائف معالجة DOM، تحتوي أطر عمل JavaScript عادةً على عدة وظائف لمعالجة أنماط وفئات العناصر. على سبيل المثال، لديك جدول يقوم بتمييز صف عند مرور الماوس فوقه. يمكنك إنشاء فئة خاصة باسم hover والتي يمكنك إضافتها ديناميكيًا إلى الصف. باستخدام YUI، يمكنك استخدام التعليمات البرمجية التالية لتحديد ما إذا كان الصف يحتوي على اسم فئة التمرير. إذا كان الأمر كذلك، فسيتم تجاهله وإذا لم يكن الأمر كذلك، فسيتم إضافته.
if(row.hasClass('hover'))row.removeClass('hover'); else Row.addClass('hover');
وبالمثل، تحتوي معظم أطر عمل JavaScript على وظائف مدمجة لمعالجة CSS.