مكتبة جكويري jQuery
مكتبة jQuery هي مكتبة مجانية و مفتوحة المصدر مكتوبة بلغة جافاسكربت تسمَح لمطور مواقع الويب. بالقيام بما كان يتطلب كتابة مئات الأسطر البرمجية بأسطر معدودة.
و قد كتبها المبرمج الكبير John Resig في البداية بعام 2006 ثم طورَّها فريق من المبرمجين بالتعاون. معه و الهدف من كتابتها تغيير الطريقة. التي يكتب بها المبرمجون شيفرات JavaScript على حد قول مبدعها.
و قد نالت مكتبة جكويري خلال فترة قصيرة شُهرة واسعة اكسبتها ثقة مواقع أكبر الشركات. في العالم مثل جوجل, موزيلا, وورد برس, و ديل, و الكثير من المواقع الكبرى التي كان آخرها. موقع شركة مايكروسوفت التي تبنَّت المكتبة و ضمنتها بشكل إفتراضي مع مشاريع لغة. البرمجة ASP.NET 4 التي تكتب بإستخدام بيئة Visual Studio 2010, الكتاب هذا للكاتب مختار سيد صالح.
مكتبة jQuery هي مكتبة JavaScript شهيرة وشائعة الاستخدام في تطوير الويب. تهدف jQuery إلى تبسيط عمليات التلاعب بعناصر HTML وتنفيذ الأحداث واستدعاء طلبات AJAX وإنشاء تأثيرات مرئية وغيرها من المهام المتعلقة بالجانب العميل لتطبيقات الويب.
توفر jQuery واجهة برمجة التطبيقات (API) التي تجعل من السهل تحديد والتعامل مع عناصر HTML في صفحة الويب. يمكن استخدام jQuery لتحقيق العديد من الوظائف المشتركة مثل تحديد العناصر بواسطة العنصر الأب، أو الكلاس، أو الهوية، وتغيير الخصائص الأساسية للعناصر مثل النص، أو الألوان، أو الأبعاد.
علاوة على ذلك، توفر jQuery مجموعة واسعة من الوظائف والميثودز (الطرق) التي تسهل التعامل مع الأحداث مثل النقر، أو التحميل، أو تغيير قيمة حقل الإدخال، وغيرها الكثير. توفر أيضًا دعمًا قويًا للعمليات الغير متزامنة باستخدام تقنية AJAX، مما يسمح بتحميل المحتوى ديناميكيًا من الخوادم بدون إعادة تحميل الصفحة بأكملها.
يمكن تضمين jQuery في صفحة الويب من خلال تضمين ملف JavaScript الخاص بها، ويمكن الحصول على هذا الملف من موقع مكتبة jQuery الرسمي أو عبر خدمات التسليم المحتوى المشهورة مثل CDNjs أو Google Hosted Libraries.
للاستفادة من jQuery، يمكنك استخدام وثائق jQuery الرسمية والتعلم من الأمثلة والتوجيهات المتاحة بها.
تثبیت jQuery و تضمينها في صفحتك
قبل أن تبدأ معي في الولوج إلى عالم المكتبة jQuery عبر دقائق هذا الكتاب يجب أن تقوم بتحميلها أولا من خلال الدخول إلى موقعها الرسمي www.jquery.com و النقر على Download.
بعد تحميل المكتبة بشكل صحيح يفترض أن يكون بحوزتك ملف بالاسم jquery.js و هي النسخة الكاملة من المكتبة و الملف ملف آخر آخر هو jquery-min.js و هي نسخة خفيفة من المكتبة تمتلك کامل ميزات النسخة الكاملة مع اختلاف بسيط في الحجم إذ أن النسخة الخفيفة ذات حجم أقل ، قم بنسخ أحد الملفين إلى المجلد الذي يحتوي مشروع الـ Web الخاص بك و أضف التعليمة التالية إلى رأس الصفحات التي ترغب باستعمال المكتبة فيها بين وسمي <head> و </head>.
<script src=”jQuery.js” type=”text/javascript”> </script>
و التعليمة السابقة هي تعليمة بسيطة كما تعلم تقوم بتضمين ملف java script معين في صفحتك لتستخدم إمكانياته و وظائفه لاحقاً.
يتم تحديد هذا الملف عبر الواصفة src التي تحمل قيمة تعبر عن مسار هذا الملف بشكل مطلق أو بشكل نسبي و في السطر السابق فإن القيمة jQuery.js تعني مساراً نسبياً يشير إلى الملف ذو الاسم jQuery.js الموجود في نفس المجلد الذي يحتوي مستند ال Web الخاص بنا ، و هكذا نكون قد نجحنا في تضمين المكتبة ضمن الصفحة و بالتالي أصبحنا جاهزين للبدء في قراءة الدقائق التالية.
أساسيات jQuery
تتكون مكتبة jQuery بشكل رئيسي من خمسة أقسام هي :
- المحددات Selectors.
- الدوال Functions.
- الأحداث Events.
- الحركات Animations.
- الإضافات Plugins.
و كما قلت في المقدمة فإن هذه المكتبة تسعى لتبسيط الأمور عند الحديث عن كتابة شيفرة Java Script لمنح تطبيقك مزيداً من التفاعلية. إذ أن المكتبة jQuery تقوم بتغليف مجموعة كبيرة من الأسطر البرمجية ضمن تابع بسيط جدا مما يسمح لك كمطور لتطبيقات الـ Web بالتركيز على وظيفة التطبيق فقط .
و كما قلت في المقدمة فإن هذه المكتبة تسعى لتبسيط الأمور عند الحديث عن كتابة شيفرة Java Script لمنح تطبيقك مزيداً من التفاعلية إذ أن. المكتبة jQuery تقوم بتغليف مجموعة كبيرة من الأسطر البرمجية ضمن تابع بسيط جداً مما يسمح لك كمطور. لتطبيقات الـ Web بالتركيز على وظيفة التطبيق فقط . تتمحور الفكرة الرئيسية لمكتبة jQuery حول تطبيق تعديل أو حركة أو دالة ما على قسم محدد من صفحة الـ Web عند. تفجير حدث معين ، و يتم تحديد القسم المراد إجراء التعديل علیه باستخدام المحددات ، و بالطبع سنقسّم الدقائق المتبقية لمناقشة كل من أقسام المكتبة بشكل مفصل و واضح بإذن الله.
دوال التعامل مع عناصر النماذج FORM ELEMENTS
تعتبر النماذج Forms من أهم العناصر في صفحات الـ Web لما لها من قيمة في تفاعل المستخدم مع تطبيق الـ Web الخاص بك. و لكن هذه الأهمية تأتي على حساب صعوبة في التعامل معها برمجياً من طرف العميل و يتجلى ذلك بوضوح من خلال عدة سيناريوهات. و لعل هذا ما دفع الهيئة العالمية W3C لدعوة مبرمجي java script إلى الحذر أثناء التعامل معها و لهذا و ذاك. تؤمن مكتبة jQuery مجموعة خاصة من الدوال للتعامل مع عناصر النماذج و تفادي أغلب المشاكل الشائعة. بأسهل الطرق و هنا نستهل حديثنا عن هذه الدوال بالحديث عن الدالة val التي تستخدم لقراءة القيم من عناصر النماذج و لها الشكل التالي :
$(‟selector‟).val();
تعيد هذه الدالة قيمة وحيدة في حال كان المحدد selector يعيد عنصراً وحيداً هي قيمة ذلك العنصر ، أما في حال كون المحدد selector يعيد أكثر من عنصر فإن الدالة val تعيد قيمة أول عنصر من هذه العناصر .
ملحوظة : يقصد بقيمة العنصر هنا القيمة التي تعرفها الواصفة value لذلك العنصر و من | الجدير بالذكر هنا أن الدالة val في حالة استدعائها. على عنصر تحديد يسمح باختيار أكثر من خيار في وقت واحد Multi-select element فإن الدالة val تعيد مصفوفة تمثل الخيارات المنتقاة من قبل المستخدم .
استخدام jQuery لإنشاء تأثيرات مرئية متقدمة
يمكنك استخدام jQuery لإنشاء تأثيرات مرئية متقدمة في تطبيقات الويب. توفر jQuery مجموعة من الوظائف والمؤثرات المدمجة التي يمكن استخدامها لإضافة حركة وتأثيرات جمالية إلى عناصر HTML الخاصة بك.
فيما يلي بعض الأمثلة على تأثيرات مرئية يمكن إنشاؤها باستخدام jQuery:
- التلاشي (Fade): يمكنك استخدام وظيفة fadeIn() لتلاشي عنصر بلطف إلى الظهور، أو استخدام fadeOut() لتلاشيه ببطء حتى يختفي.
- الانزلاق (Slide): يمكنك استخدام وظيفة slideUp() لإخفاء عنصر عن طريق انزلاقه للأعلى، أو استخدام slideDown() لإظهاره عن طريق انزلاقه للأسفل.
- التحريك (Animate): يمكنك استخدام وظيفة animate() لتحريك عنصر بطرق مختلفة، مثل التحرك من اليمين إلى اليسار أو من الأعلى إلى الأسفل. يمكنك أيضًا تحديد مدة الحركة وتأخيرها واستخدام الدوال التربيعية لتعديل الحركة.
- التبديل (Toggle): يمكنك استخدام وظيفة toggle() لتبديل العرض أو الإخفاء لعنصر معين بنقرة واحدة. على سبيل المثال، يمكنك إظهار أو إخفاء قسم من الصفحة بنقرة زر.
هذه أمثلة بسيطة من العديد من التأثيرات المرئية التي يمكنك إنشاؤها باستخدام jQuery. يمكنك أيضًا استكشاف المؤثرات الأخرى المتاحة في jQuery، مثل التلاشي المتدرج (fadeTo) والتحجيم (resize) والتدوير (rotate) والتحرك بالتعاقب (chaining) وغيرها الكثير. يمكنك العثور على مزيد من المعلومات والأمثلة في وثائق jQuery الرسمية.
استخدام jQuery لإجراء طلبات AJAX
في الواقع، أحد أبرز ميزات jQuery هو دعمها القوي للعمليات الغير متزامنة باستخدام تقنية AJAX (Asynchronous JavaScript and XML).
لإجراء طلب AJAX باستخدام jQuery، يمكنك استخدام وظيفة $.ajax() أو وظائف مختصرة مثل $.get() و $.post() و $.getJSON() والتي تسهل عملية إرسال طلبات GET و POST واسترداد البيانات بتنسيق JSON على التوالي.
فيما يلي مثال بسيط يستخدم وظيفة $.get() لإجراء طلب GET باستخدام AJAX:
$.get('url', function(data) {
// يتم تنفيذ هذا الكود عند استلام الاستجابة بنجاح
console.log(data);
})
.done(function() {
// يتم تنفيذ هذا الكود بعد الانتهاء بنجاح
})
.fail(function() {
// يتم تنفيذ هذا الكود في حالة حدوث خطأ
})
.always(function() {
// يتم تنفيذ هذا الكود في كل الأحوال
});
يمكنك استخدام وظائف أخرى مثل $.post() لإجراء طلبات POST، و $.ajax() للتحكم الكامل في إعدادات الطلب ومعالجة الاستجابة.
باستخدام jQuery، يمكنك أيضًا تنفيذ إجراءات متعددة بعد الانتهاء من الطلب بنجاح أو في حالة حدوث خطأ، مما يوفر مرونة وقوة أكبر في إدارة الطلبات والاستجابات.
يرجى ملاحظة أنه اعتبارًا من مايو 2021، تم الإعلان عن توقف تطوير jQuery دون إصدارات جديدة. ومع ذلك، لا تزال jQuery متاحة للاستخدام وتحظى بشعبية كبيرة في مجال تطوير الويب.
استخدام jQuery لتغيير الألوان والأبعاد لعناصر HTML
لتغيير الألوان، يمكنك استخدام وظيفة css() في jQuery لتعيين خاصية CSS color لعنصر HTML. على سبيل المثال، يمكنك تغيير لون نص عنصر ما كالتالي:
$('#elementId').css('color', 'red');
يمكنك استخدام قيم أخرى للألوان مثل الرمز الهيكلي (hex code) #RRGGBB أو الأسماء المعروفة للألوان مثل 'red' أو 'blue'.
أما بالنسبة لتغيير الأبعاد، يمكنك استخدام وظائف width() و height() في jQuery لتعيين عرض وارتفاع العنصر على التوالي. على سبيل المثال:
$('#elementId').width(300);
$('#elementId').height(200);
يمكنك استخدام وحدات القياس المختلفة مثل بكسل (px) أو نسبة (percentage) لتعيين الأبعاد.
بالإضافة إلى ذلك، يمكنك استخدام وظائف jQuery الأخرى مثل addClass() و removeClass() لتغيير الكلاسات المرتبطة بعنصر HTML وبالتالي تغيير الأنماط المرتبطة به.
يمكنك استخدام مجموعة واسعة من الوظائف والمؤثرات في jQuery لتعديل الألوان والأبعاد والأنماط لعناصر HTML بطرق متنوعة ومرنة.
استخدام jQuery لتغيير الخلفية والحواف لعناصر HTML
لتغيير الخلفية (background) لعنصر HTML، يمكنك استخدام وظيفة css() في jQuery لتعيين خاصية CSS background-color أو background-image للعنصر. على سبيل المثال، لتغيير لون خلفية عنصر ما:
$('#elementId').css('background-color', 'red');وإذا كنت ترغب في تعيين صورة كخلفية، يمكنك استخدام الخاصية background-image وتحديد رابط الصورة كقيمة. مثال:
$('#elementId').css('background-image', 'url(path/to/image.jpg)');أما بالنسبة لتغيير الحواف، يمكنك استخدام وظيفة css() أو الوظائف الأخرى في jQuery لتعيين خاصية CSS border للعنصر. يمكنك تحديد سمك الحافة، نوع الخط (مثل الخط المتقطع أو الخط الصلب) ولون الحافة. مثال:
$('#elementId').css('border', '2px solid red');بالإضافة إلى ذلك، يمكنك استخدام وظائف jQuery الأخرى مثل addClass() و removeClass() لتعديل الكلاسات المرتبطة بعنصر HTML وبالتالي تغيير الأنماط المرتبطة به، بما في ذلك الخلفية والحواف.
باستخدام jQuery، يمكنك بسهولة تغيير الخلفية والحواف لعناصر HTML وتحقيق التأثيرات المرئية التي ترغب فيها.