هذا المقال هو جزء من سلسلة (جافا سكربت)، يمكنكم الإطلاع على أجزائها الأخرى لاستكمال الفهم عبر الروابط التالية: ما هي Vue.js و JavaScript ES6 و مكتبة Node.JS ، ما هو Angular JS؟ .
jQuery عبارة عن مكتبة تحوي مجموعة توابع سريعة وصغيرة وخاصة بالـ javaScript، ومهمة هذه المكتبة جعل استخدام الـ javaScript أسهل ضمن موقعك الالكتروني. بُنيت jQuery بحيث تختصر العمليات التي تحتاج عدداً كبيراً من الأسطر البرمجية إلى مجموعة توابع تُستدعى بسطر برمجي واحد.
قبل البدء بدراسة jQuery ينبغي أن تكون على علم باللغات البرمجية التالية: HTML ،CSS ،JavaScript. تعتمد الـ jQuery على مبدأ "اكتب أقل وافعل أكثر"، وقد سهّلت الكثير من العمليات المعقدة ضمن JavaScript.
وتتمتّع ـِjQuery بمجموعة الميزات التالية
- معالجة HTML/DOM [1].
- معالجة CSS [2].
- التعامل مع أحداث HTML.
- التأثيرات والحركة.
- [3] Ajax.
- تقدم برامج خدمات
يوجد العديد من المكتبات الأخرى الداعمة للغة javaScript إلا أنّ jQuery تعتبر الأشهر والأكثر مرونة وقابلية للتوسع، واستخدمت من قِبل الكثير من الشركات الكبرى مثل:
- Microsoft
- IBM
- Netflix
ولكن هل تعمل مكتبة jQuery ضمن جميع متصفحات الويب؟
يمتلك فريق jQuery خبرة عالية بكل ما يتعلق بقضية التوافقية مع المتصفحات المتعددة، ولذلك قاموا ببناء هذه المكتبة بحيث تعمل بنفس الكفاءة ضمن جميع المتصفحات الرئيسية بما فيها Internet Explorer 6.
كيف يمكننا استخدام الـ jQuery؟
يوجد العديد من الطرق للبدء باستخدام jQuery ضمن موقعك الالكتروني حيث يمكنك:
- تحميل مكتبة jQuery من موقعها الرسمي jQuery.com.
- تضمينها من CDN (شبكة توصيل المحتوى Content Delivery Network)، مثل Google CDN أو Microsoft CDN.
لاستخدام jQuery من غوغل
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
لاستخدام jQuery من مايكروسوفت:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
ولكن يجب الانتباه عند تحميل مكتبة الـ jQuery إلى أن اسمها يحوي رقم الاصدار ويجب تعديله ليصبح jquery.js أو الانتباه إلى كتابة اسم الملف بشكل صحيح عند كتابة التعليمة الخاصة بتضمينها.
وهنا بعض الأمثلة البسيطة على استخدام الـ jQuery
- أولاً لبناء صفحة HTML
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>Demo</title>
</head>
<body>
<ahref="http://jquery.com/">jQuery</a>
<scriptsrc="jquery.js"></script>
<script>
// Your code goes here.
</script>
</body>
</html>
للتأكد من أن الكود يعمل بعد انتهاء المتصفح من تحميل المستند، غالباً يلجأ المبرمجون إلى تابع الحدث onload:
window.onload = function() {
alert( "welcome" );
};
إلّا أنّ الكود لا يعمل إلا عند تحميل كافة الصور بالإضافة إلى إعلانات العنوان. ولتنفيذ الكود عندما يكون المستند جاهزاً، تستخدم الـjQuery التعليمة التالية التي تعرف بأنها حدث الجاهزية ready:
$( document ).ready(function() {
// Your code here.
});
وكمثال على الرسوم المتحركة animation باستخدام jQuery هو Fading effects، وهو تابع يقوم بعمل تأثير اخفاء أو اظهار لجزء معين من صفحة الويب وله أربعة أنواع وهي: ()fadeIn() ،fadeOut() ،fadeToggle() ،fadeTo.
فيما يلي مثال على استخدام fadeIn() حيث يُحدد متغير السرعة الاختياري مدة التأثير. ويمكن أن يأخذ القيم التالية: "بطي slow"، "سريع fast"، أو بالميلي ثانية.
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
ملاحظات
[1] HTML/DOM: هي لغة تحدد الكائنات والخصائص لجميع عناصر الصفحة وطرق الوصول إليها. أي أنها المعيار القياسي في التعامل والتعديل على صفحات HTML.
[2] Cascading Style Sheet او اختصاراً CSSh وهي تعني صفحات الأنماط التسلسلية، وتستخدم هذه التقنية في تصميم صفحات الويب بحيث يتم من خلالها التحكم في شكل الموقع بالكامل من حيث نوع الخط المستخدم أو لونه أو حجمه و ذلك دون الحاجة لكتابة تلك الأكواد أو تكرارها في كل صفحة داخل الموقع.
[3] Asynchronous JavaScript and XML او اختصاراً Ajax: ما يمكن ترجمته بالجافا سكربت و الـ XML غير تزامنية، وهي تقنية تُمكّن من اجراء التعديلات على صفحة الإنترنت دون الحاجة إلى إعادة التحميل من جديد بل يتم إعادة تحميل الجزء المراد التعديل عليه في نفس الصفحة وهي في حالة اتصال بخادم الشبكة وذلك عن طريق اتصال جانبي. تستفيد المواقع التي يزورها عدد كبير من الزوار من هذه التقنيات مما يقلل من الجهد الحاصل على خادم الشبكة والزمن اللازم لاستجابة الموقع لدى المتصفح.
