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

تشرح هذه المقالة كيفية استخدام جي كويري في بيئة تطوير الويب بالإضافة إلى فوائده وميزاته الأساسية. سنقدم أيضًا قائمة بالبرامج التعليمية القصيرة التي ستظهر كيفية استخدام جي كويري لمساعدتك على فهم كيفية عمله.

ما هي الـ جي كويري؟

جي كويري (بالإنجليزية: jQuery)‏، هي مكتبة جافا سكريبت مصغرة مفتوحة المصدر تم إنشاؤها لعمليات جافا سكريبت مبسطة. يمكنك استخدام جي كويري لتشفير مجموعة من الأوامر المختلفة بسرعة والتي قد تستغرق وقتًا أطول بكثير إذا كنت تستخدم تعليمات HTML البرمجية.

ما هي مكتبة جافا سكريبت؟ كيف يتم استخدامه في تطوير الويب؟

تتكون مكتبة جافا سكريبت (بالإنجليزية: JavaScript Library) من ملفات جافا سكريبت ذات وظائف مختلفة. يمكن للكثير من مكتبات JS، مثل React، أن تخدم غرضًا محددًا، سواء كان ذلك من جانب العميل أو الخادم.

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

أفضل ما في الأمر هو أن جي كويري متوافق مع مكتبات جافا سكريبت الأخرى ويحتوي على الكثير من الاضافات الإضافية للمساعدة في توسيع نطاق وظائفه. ومع ذلك، فهو لا يعمل مع أي لغات برمجة أخرى.

مزايا وعيوب الجي كويري

إذا كنت لا تزال تفكر فيما إذا كان من المفيد تعلم جي كويري أم لا، فإليك مزايا وعيوب استخدام مكتبة JS هذه لتطوير الويب.

مزايا جي كويري

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

يعد تعديل عناصر HTML أيضًا أسهل من خلال ميزة معالجة نموذج كائن المستند (DOM). تتيح لك واجهة متصفح الويب سهلة الاستخدام إضافة عناصر الويب وتحريرها وحذفها باستخدام أساليب الأحداث المختلفة.

تجعل طريقة AJAX، على وجه الخصوص، jQuery مثالية لتطوير موقع ويب المتجاوب باستخدام وظائف AJAX. تعمل هذه الميزة على تحسين تجربة المستخدم من خلال تبسيط عمليات طلب HTTP دون إعادة تحميل صفحة الويب.

علاوة على ذلك، يأتي جي كويري مع الكثير من تأثيرات الرسوم المتحركة المضمنة. حتى أنه يتيح لك إنشاء رسوم متحركة مخصصة تتكون من خصائص CSS التي اخترتها.

علاوة على ذلك، يأتي جي كويري مزودًا بدعم عبر المتصفحات، مما يجعله متوافقًا مع متصفحات الويب الشائعة. وهو يعمل مع محددات CSS3 وبناء جملة لغة مسار XML (XPath) أيضًا.

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

عيوب جي كويري

على الرغم من كونها خفيفة الوزن، إلا أن مكتبة جي كويري ضخمة. مع استمرار نمو قاعدة التعليمات البرمجية، يستغرق فتح ملف JS وقتًا أطول، مما يضع ضغطًا إضافيًا على جهاز الكمبيوتر الخاص بالمستخدم.

تجعل jQuery أيضًا تعلم واستخدام JavaScript أكثر صعوبة بسبب تجريدها. على الرغم من أنه يبسط عملية إنشاء الحدث للمبتدئين، إلا أن القيام بمهام معقدة مثل معالجة DOM سيتطلب فهمًا أكبر لجافا سكريبت للحصول على النتيجة المرجوة.

أكبر عيب هو حقيقة أن جي كويري لا يسمح بالتوافق مع الإصدارات السابقة. نظرًا لأن جي كويري لديها الكثير من الإصدارات المنشورة، فيجب عليك استضافة المكتبة بنفسك وتحديثها بشكل دوري.

ميزات جي كويري الهامة

إذا كنت تريد معرفة كيف يمكن لـ جي كويري أن يفيدك، فلنلقِ نظرة على أمثلة الوظائف الأساسية.

1. وظيفة ()hide

تعمل وظيفة ()hide على إخفاء عناصر HTML، مما يجعلها لا تؤثر على صفحة HTML. إنه بمثابة طريقة للرسوم المتحركة إذا تم إقرانها مع معلمات المدة والتخفيف بالإضافة إلى وظيفة رد الاتصال.

2. وظيفة ()show

تعرض الدالة ()show عناصر HTML. إنه يعمل فقط على العناصر المخفية بواسطة وظيفة ()hide. بالإضافة إلى ذلك، فإنها تصبح دالة أسلوب رسوم متحركة إذا أعطيت معلمة، تمامًا مثل ()hide.

3. وظيفة ()toggle

تعمل دالة ()toggle على تعديل رؤية عناصر HTML استنادًا إلى خاصية عرض CSS الخاصة بها باستخدام حدث النقر. إذا كان العنصر مرئيًا، فستقوم هذه الوظيفة بإخفائه. والعكس سيحدث إذا كان مخفيا. غالبًا ما يستخدم مطورو الويب هذه الوظيفة لتحويل العديد من الرسوم المتحركة إلى تسلسل.

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

4. وظيفة ()fadeIn

تعمل الدالة ()fadeIn على تعديل عتامة عناصر HTML لجعلها تظهر تدريجيًا على صفحة HTML. قم بإقرانها بوظيفة السرعة أو رد الاتصال لضبط سرعة الرسوم المتحركة وتشغيل الحدث التالي بمجرد ظهور العناصر المطابقة بالكامل.

5. وظيفة ()fadeOut

تعمل وظيفة jQuery هذه عكس وظيفة ()fadeIn. على غرار ()hide و ()show، تصبح ()fadeIn و ()fadeOut أساليب الرسوم المتحركة إذا تم إعطاء معلمة.

6. وظيفة ()fadeToggle

تعمل الدالة ()fadeToggle بشكل مشابه للدالة ()toggle. يتيح للمستخدم عرض أو إخفاء عناصر معينة تدريجياً.

7. وظيفة ()slideUp

تعمل الدالة ()slideUp على إخفاء العناصر ذات الرسوم المتحركة المنزلقة. قم بإقرانها مع معلمات المدة والتخفيف لضبط مدة الرسوم المتحركة.

8. وظيفة ()slideDown

تعرض الدالة ()slideDown العناصر ذات الرسوم المتحركة المنزلقة. وبالمثل، فهو يقبل معلمات المدة والتخفيف.

9. وظيفة ()slideToggle

تتيح لك وظيفة ()slideToggle التبديل بين وظيفتي ()slideUp و ()slideDown لعرض العناصر أو إخفائها.

10. وظيفة ()animate

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

ضع في اعتبارك أن الدالة ()animate لا يمكنها عرض العناصر المخفية مثل ()slideDown و()fadeIn.

أمثلة جي كويري

يوضح لك المثال التالي كيفية استخدام وظائف ()slideDown و ()slideUp و ()slideToggle :

$("#flip").click(function(){
  $("#panel").slideDown();
});

فيما يلي مثال لكيفية استخدام الدالتين ()hide و ()show:

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

يوضح هذا المثال كتلة التعليمات البرمجية لوظيفة ()animate:

$("button").click(function(){
  $("div").animate({
      left: '250px',
      height: '+=150px',
      width: '+=150px'
  });
});

فيما يلي مثال على معالجة CSS:

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

خاتمة

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

يتيح لك استخدام مكتبة جي كويري كتابة تعليمات جافا سكريبت أقل مع الاستمرار في الحصول على وظائفها الكاملة. يتيح لك ذلك العمل بكفاءة أكبر والتركيز على أجزاء أخرى من المشروع.

نأمل أن يمنحك هذا البرنامج التعليمي لـ جي كويري فهمًا أفضل لماهية مكتبة جي كويري وكيفية البدء. إذا كان لديك أي أسئلة أخرى، تأكد من ترك تعليق أدناه.