jQuery والتعامل مع DOM

بناء جملة jQuery ودالة Document Ready

12 دقيقة الدرس 2 من 30

فهم بناء جملة jQuery

jQuery لديها بناء جملة بسيط ومتسق يجعلها سهلة التعلم والاستخدام. في هذا الدرس، سنستكشف أنماط البناء الأساسية ودالة "document ready" الحاسمة.

بناء جملة jQuery الأساسي

جميع عبارات jQuery تتبع هذا النمط:

$(selector).action()

دعنا نحلل هذا:

$ - رمز jQuery (اختصار لـ jQuery)
selector - يجد عناصر HTML (مثل محددات CSS)
action() - الطريقة التي سيتم تنفيذها على العنصر/العناصر

أمثلة واقعية

// إخفاء جميع الفقرات
$('p').hide();

// تغيير نص العنصر بمعرف "title"
$('#title').text('عنوان جديد');

// إضافة فئة لجميع الروابط
$('a').addClass('highlight');

// الحصول على قيمة حقل إدخال
var name = $('#username').val();

💡 نقطة مهمة: علامة الدولار ($) هي مجرد اختصار لـ jQuery. يمكنك استخدام أي منهما:

$('p').hide() (شائع)
jQuery('p').hide() (البناء الكامل)

كلاهما يفعل نفس الشيء تماماً!

دالة Document Ready

واحدة من أهم المفاهيم في jQuery هي انتظار تحميل الصفحة قبل تشغيل الكود الخاص بك. هذا يسمى حدث "document ready".

لماذا نحتاج إليها؟

JavaScript تنفذ بمجرد مواجهتها. إذا حاولت معالجة عنصر قبل أن يوجد في DOM، فسيفشل الكود الخاص بك!

❌ هذا سيفشل إذا لم يكن الزر موجوداً بعد:

<script>
    $('#myButton').click(function() {
        alert('تم النقر!');
    });
</script>

<button id="myButton">اضغط هنا</button>

الحل: Document Ready

دالة document ready تضمن تشغيل الكود الخاص بك فقط بعد تحميل DOM بالكامل:

البناء الكامل:

$(document).ready(function() {
    // كود jQuery الخاص بك هنا
    $('#myButton').click(function() {
        alert('تم النقر!');
    });
});

البناء المختصر (موصى به):

$(function() {
    // كود jQuery الخاص بك هنا
    $('#myButton').click(function() {
        alert('تم النقر!');
    });
});

📝 ملاحظة: الاختصار $(function() {...}) هو الطريقة المفضلة والأكثر شيوعاً لكتابة document ready. إنها أقصر وأنظف!

مثال كامل

<!DOCTYPE html>
<html>
<head>
    <title>مثال Document Ready</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(function() {
            // هذا الكود يعمل عندما يكون DOM جاهزاً

            $('#showBtn').click(function() {
                $('#message').show();
            });

            $('#hideBtn').click(function() {
                $('#message').hide();
            });
        });
    </script>
</head>
<body>
    <button id="showBtn">إظهار الرسالة</button>
    <button id="hideBtn">إخفاء الرسالة</button>
    <p id="message" style="display:none;">مرحباً من jQuery!</p>
</body>
</html>

Document Ready مقابل Window Load

هناك فرق مهم بين document ready وwindow load:

// Document Ready - يطلق عندما يكون DOM جاهزاً
$(function() {
    console.log('DOM جاهز!');
    // الصور قد تكون لا تزال تُحمّل
});

// Window Load - يطلق عندما يتم تحميل كل شيء
$(window).on('load', function() {
    console.log('تم تحميل كل شيء بما في ذلك الصور!');
});

الحدث	متى يطلق	حالة الاستخدام
Document Ready	عندما يتم تحليل DOM	معظم كود jQuery (أسرع)
Window Load	عندما يتم تحميل جميع الأصول	حسابات حجم الصورة

💡 نصيحة محترف: استخدم document ready لـ 99% من كود jQuery الخاص بك. استخدم window load فقط عندما تحتاج على وجه التحديد إلى تحميل جميع الصور والموارد بالكامل.

دوال Document Ready متعددة

يمكنك الحصول على دوال document ready متعددة، وسيتم تنفيذها جميعاً بالترتيب:

$(function() {
    console.log('دالة الجاهزية الأولى');
});

$(function() {
    console.log('دالة الجاهزية الثانية');
});

$(function() {
    console.log('دالة الجاهزية الثالثة');
});

// الناتج:
// دالة الجاهزية الأولى
// دالة الجاهزية الثانية
// دالة الجاهزية الثالثة

هذا مفيد عند العمل مع ملفات JavaScript متعددة أو تنظيم الكود في وحدات.

ملفات JavaScript الخارجية

في الإنتاج، ستكتب jQuery عادةً في ملفات .js منفصلة:

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>صفحتي</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <h1 id="heading">مرحباً</h1>
    <button id="changeBtn">تغيير النص</button>
</body>
</html>

js/main.js:

$(function() {
    $('#changeBtn').click(function() {
        $('#heading').text('تم تغيير النص!');
    });
});

⚠️ الترتيب مهم: حمّل jQuery دائماً قبل ملفات JavaScript المخصصة! إذا حملت السكريبت الخاص بك أولاً، سيكون $ غير معرّف.

تسلسل الطرق

واحدة من أقوى ميزات jQuery هي تسلسل الطرق - استدعاء طرق متعددة على نفس العنصر:

// بدون تسلسل (متكرر)
$('#box').css('color', 'red');
$('#box').fadeIn();
$('#box').addClass('highlight');

// مع التسلسل (أنيق!)
$('#box')
    .css('color', 'red')
    .fadeIn()
    .addClass('highlight');

التسلسل يعمل لأن معظم طرق jQuery ترجع كائن jQuery، مما يسمح لك باستدعاء طريقة أخرى فوراً.

💡 نصيحة للقابلية للقراءة: عند تسلسل طرق متعددة، ضع كل طريقة على سطر جديد لقابلية قراءة أفضل.

معاينة طرق jQuery الشائعة

إليك بعض الطرق التي ستستخدمها بشكل متكرر (سنغطي هذه بالتفصيل لاحقاً):

// معالجة النص وHTML
$('#title').text('نص جديد');
$('#content').html('<strong>نص عريض</strong>');

// معالجة CSS
$('p').css('color', 'blue');
$('div').addClass('active');

// إظهار/إخفاء
$('#menu').show();
$('#popup').hide();

// الأحداث
$('#btn').click(function() { /* ... */ });
$('#input').change(function() { /* ... */ });

// المؤثرات
$('#box').fadeIn();
$('#box').slideUp();

🎯 تمرين عملي:

أنشئ صفحة HTML تحتوي على:

عنوان بمعرف "title"
فقرة بمعرف "description"
ثلاثة أزرار: "إظهار"، "إخفاء"، و"تبديل"

باستخدام document ready وjQuery، اجعل الأزرار تتحكم في ظهور الفقرة. استخدم تسلسل الطرق حيثما أمكن.

💡 الحل

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(function() {
            $('#showBtn').click(function() {
                $('#description').fadeIn();
            });

            $('#hideBtn').click(function() {
                $('#description').fadeOut();
            });

            $('#toggleBtn').click(function() {
                $('#description').fadeToggle();
            });
        });
    </script>
</head>
<body>
    <h1 id="title">ممارسة jQuery</h1>
    <p id="description">هذه فقرة وصف.</p>

    <button id="showBtn">إظهار</button>
    <button id="hideBtn">إخفاء</button>
    <button id="toggleBtn">تبديل</button>
</body>
</html>

نصائح التصحيح

عندما لا يعمل كود jQuery الخاص بك، تحقق من هذه المشاكل الشائعة:

⚠️ الأخطاء الشائعة:

jQuery غير محملة - تحقق من وحدة التحكم في المتصفح بحثاً عن "$ is not defined"
محدد خاطئ - تحقق من أن معرفات العناصر والفئات تتطابق
الكود يعمل مبكراً جداً - استخدم دائماً document ready
أخطاء إملائية - JavaScript حساسة لحالة الأحرف ($("#myButton" مقابل $("#mybutton")
أقواس مفقودة - تذكر: .show() وليس .show

الملخص

في هذا الدرس، تعلمت:

بناء جملة jQuery يتبع النمط: $(selector).action()
$ هو اختصار لـ jQuery
Document ready يضمن تحميل DOM قبل تشغيل الكود
استخدم $(function() {...}) كاختصار لـ document ready
تسلسل الطرق يسمح بإجراءات متعددة على نفس العنصر
حمّل jQuery دائماً قبل السكريبتات المخصصة

في الدرس التالي، سنستكشف محددات jQuery بعمق!