هل هذا الكود يبحث جاهزية المستند ؟ كيف ذلك لم افهم

عند كتابة $(...) وتمرير دالة إليه، تفهم jQuery أنك تريد تنفيذ هذا الكود بمجرد أن يصبح المستند جاهزًا. إذ أنه يُستخدم للتحقق من جاهزية المستند (Document Ready)، مما يعني أن الكود الموجود بداخله لن يتم تنفيذه إلا بعد أن يتم تحميل DOM بشكل كامل.

هذا يضمن أن جميع العناصر التي يحتاج الكود للتفاعل معها تكون جاهزة وموجودة في الصفحة، مما يمنع حدوث أخطاء عند محاولة الوصول إلى عناصر لم يتم تحميلها بعد.

ويتم الأمر ببساطة من خلال:

• حقن Callback إلى الكائن الباني لـ jQuery أو $
• يحتوي هذا الـ Callback على جميع الوظائف المؤجل استدعاءها إلى ما بعد تحديث الصفحة
• بعد تحميل المستند، يتم تنفيذ الشيفرة الموجودة داخل هذه الدالة لضمان أن كل العناصر المطلوبة أصبحت جاهزة للاستخدام.

هنالك تعبير آخر يستخدم أحيانا:

$(document).ready(function() { 
      // jQuery methods go here... 
});

وظيفة هذا الكود هي التأكد من أن كل عناصر صفحة الـ HTML (مثل النصوص، الصور، العناصر التفاعلية) قد تم تحميلها وتجهيزها قبل أن يبدأ تنفيذ أي كود jQuery بداخل هذا التابع.

$: هذا اختصار في jQuery لاختيار عناصر DOM (مثل $('div') لاختيار كل عناصر <div>).

function(){ ... }: هو الوظيفة التي يتم تمريرها إلى jQuery ليتم تنفيذها عندما تصبح الصفحة جاهزة.

الـ DOM جاهز: يعني أن جميع عناصر الصفحة قد تم تحميلها

مثال:

$(function(){
    $('div').text('The page is ready!');
});

سيتم تغيير محتوى جميع العناصر <div> إلى النص "The page is ready!" عندما يكون المستند جاهزًا بالكامل.

• في بعض الأحيان نحتاج إلى التفاعل مع عناصر في الصفحة (مثل تغيير النص، أو إخفاء عناصر، أو إضافة أحداث)، لكن إذا حاولنا تنفيذ الكود قبل أن يتم تحميل الصفحة بالكامل، فسيحدث مشاكل لأن العناصر ليست موجودة بعد.
• هذا الكود يحل هذه المشكلة لأنه يقوم بتأجيل تنفيذ الأوامر حتى تكون الصفحة جاهزة.

نعم بالفعل هذا الكود الذي أرفقته  يضمن أن الشيفرة التي بداخل الدالة سيتم تنفيذها فقط بعد تحميل المستند بالكامل.

وهذه من خاصية إطار العمل jQuery حيث هذه طريقة مختصرة (shorthand ) لكتابة الكود التالي :

$(document).ready(function() {
  // jQuery methods go here...
})

يعني أنه عندما يكون DOM (كائن المستند) جاهزًا، سيتم تنفيذ الدالة التي تحتوي على الكود بداخلها.

وهذا هي الطريقة الصحيحة لتفادي أى مشاكل حيث يجب الإنتظار حتى يتم تحميل جميع العناصر في الصفحة قبل تنفيذ الكود .

ويمكنك قراءة الرابط التالي للتوثيق الرسمى حيث يظهر لك أن الكود المرفق هو إختصار لدالة ready كما وضحت لك :

صحيح، لكن لا حاجة إلى ذلك فجافاسكريبت حاليًا توفر لك نفس الأمر وذلك من خلال الاستماع إلى حدث DOMContentLoaded كالتالي:

document.addEventListener("DOMContentLoaded", function() {
  
});

هنا سيتم تنفيذ الكود فور تحميل الـ DOM أي كود HTML.

لكن لو أردت الإنتظار لحين إنتهاء تحميل ملفات CSS والصور والسكريبتات الأخرى، فنستمع إلى حدث load:

window.addEventListener("load", function() {

});