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

ما هي jQuery ولماذا نستخدمها؟

10 دقيقة الدرس 1 من 30

مرحباً بك في jQuery!

jQuery هي مكتبة JavaScript سريعة وصغيرة الحجم وغنية بالميزات تجعل تطوير الويب أسهل وأكثر كفاءة. أنشأها جون ريسيج في عام 2006، وأصبحت واحدة من أشهر مكتبات JavaScript في العالم.

ما هي jQuery؟

jQuery هي مكتبة JavaScript تبسط:

معالجة DOM - اختيار وتعديل عناصر HTML
معالجة الأحداث - الاستجابة لتفاعلات المستخدم
الرسوم المتحركة - إنشاء تأثيرات بصرية سلسة
AJAX - إجراء طلبات HTTP غير متزامنة
التوافق عبر المتصفحات - كتابة كود يعمل في كل مكان

لماذا نستخدم jQuery؟

💡 الفوائد الرئيسية:

اكتب أقل، أنجز أكثر - شعار jQuery يقول كل شيء! المهام المعقدة في JavaScript تصبح سطراً واحداً بسيطاً.
سهلة التعلم - بناء جملة بديهي وملائم للمبتدئين
دعم عبر المتصفحات - تعمل بشكل متسق عبر جميع المتصفحات
نظام بيئي كبير - آلاف الإضافات والوثائق الشاملة
مجتمع نشط - ملايين المطورين حول العالم

jQuery مقابل JavaScript العادي

لنقارن مهمة بسيطة - إخفاء عنصر:

JavaScript العادي:

document.getElementById('myElement').style.display = 'none';

jQuery:

$('#myElement').hide();

لاحظ كيف أن jQuery أكثر إيجازاً وسهولة في القراءة!

حالات الاستخدام العملية

jQuery مثالية لـ:

إنشاء نماذج تفاعلية مع التحقق من الصحة
بناء قوائم تنقل ديناميكية
تنفيذ عروض الشرائح ومعارض الصور
تحميل المحتوى بدون تحديث الصفحة (AJAX)
إضافة رسوم متحركة وانتقالات سلسة
إنشاء نوافذ منبثقة وتلميحات الأدوات

البدء مع jQuery

لاستخدام jQuery في مشروعك، تحتاج إلى تضمين المكتبة. هناك طريقتان رئيسيتان:

1. استخدام CDN (شبكة توصيل المحتوى):

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. التنزيل والاستضافة محلياً:

<script src="js/jquery-3.7.1.min.js"></script>

📝 ملاحظة: نوصي باستخدام CDN لأوقات تحميل أسرع والتخزين المؤقت التلقائي. ضع وسم script الخاص بـ jQuery قبل ملفات JavaScript المخصصة.

إصدارات jQuery

jQuery لديها إصدارات مختلفة:

3.x - أحدث إصدار بميزات حديثة (موصى به)
2.x - لا يدعم IE 6-8
1.x - إصدار قديم يدعم المتصفحات القديمة

⚠️ مهم: استخدم دائماً أحدث إصدار مستقر (3.7.1 حتى 2024) ما لم تكن بحاجة لدعم متصفحات قديمة جداً.

أول كود jQuery لك

هذا مثال كامل يوضح jQuery في العمل:

<!DOCTYPE html>
<html>
<head>
    <title>أول صفحة jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1 id="heading">مرحباً بالعالم!</h1>
    <button id="changeBtn">اضغط هنا</button>

    <script>
        $('#changeBtn').click(function() {
            $('#heading').text('مرحباً jQuery!');
        });
    </script>
</body>
</html>

هذا الكود يغير نص العنوان عند النقر على الزر. بسيط، أليس كذلك؟

🎯 تمرين سريع:

قم بإنشاء ملف HTML جديد وقم بتضمين jQuery باستخدام طريقة CDN. أنشئ زراً عند النقر عليه يعرض تنبيهاً يقول "jQuery تعمل!". هذا سيؤكد أن إعداد jQuery صحيح.

💡 تلميح الحل

$('#myButton').click(function() {
    alert('jQuery تعمل!');
});

متى لا نستخدم jQuery؟

بينما jQuery قوية، فإن JavaScript الحديثة (ES6+) جعلت بعض ميزات jQuery أقل ضرورة:

اختيار DOM البسيط (querySelector مدعوم على نطاق واسع الآن)
AJAX الأساسي (Fetch API أصبح معياراً الآن)
أطر العمل الحديثة مثل React أو Vue أو Angular (لديها معالجة DOM خاصة بها)

💡 نصيحة محترف: تعلم jQuery لا يزال قيماً لأن:

ملايين المواقع لا تزال تستخدمها
العديد من المشاريع القديمة تتطلب معرفة jQuery
تعلم مفاهيم JavaScript المهمة
لا تزال أسرع طريقة للنماذج الأولية السريعة

الملخص

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

jQuery هي مكتبة JavaScript تبسط تطوير الويب
تجعل معالجة DOM والأحداث وAJAX أسهل
كود jQuery أكثر إيجازاً من JavaScript العادي
يمكنك تضمين jQuery عبر CDN أو التنزيل المحلي
jQuery مثالية للتطوير السريع والتوافق عبر المتصفحات

في الدرس التالي، سنتعمق في بناء جملة jQuery ودالة "document ready" الشهيرة!