ما هي jQuery

الناشر :كيرلس فرج -

 

jQuery

 عبارة عن مكتبة تحوي مجموعة توابع سريعة وصغيرة وخاصة بالـ javaScript، ومهمة هذه المكتبة جعل استخدام الـ javaScript أسهل ضمن موقعك الالكتروني. بُنيت jQuery بحيث تختصر العمليات التي تحتاج عدداً كبيراً من الأسطر البرمجية إلى مجموعة توابع تُستدعى بسطر برمجي واحد.


قبل البدء بدراسة jQuery ينبغي أن تكون على علم باللغات البرمجية التالية: HTML ،CSS ،JavaScript. تعتمد الـ jQuery على مبدأ "اكتب أقل وافعل أكثر"، وقد سهّلت الكثير من العمليات المعقدة ضمن JavaScript.


يوجد العديد من الطرق للبدء باستخدام jQuery ضمن موقعك الالكتروني حيث يمكنك: تحميل مكتبة jQuery من موقعها الرسمي jQuery.com.

 تضمينها من CDN (شبكة توصيل المحتوى Content Delivery Network)، مثل Google CDN أو Microsoft CDN.   لاستخدام jQuery من غوغل   لاستخدام jQuery من مايكروسوفت:


لاستخدام 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); });



وكمثال على الرسوم المتحركة animation باستخدام jQuery هو animate

في هذا المثال يوضح ان من الممكن استخدام خصاص css كما تره:



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


ملاحظات

 [1] HTML/DOM: هي لغة تحدد الكائنات والخصائص لجميع عناصر الصفحة وطرق الوصول إليها. أي أنها المعيار القياسي في التعامل والتعديل على صفحات HTML.  

 [2]  Cascading Style Sheet او اختصاراً CSSh وهي تعني صفحات الأنماط التسلسلية، وتستخدم هذه التقنية في تصميم صفحات الويب بحيث يتم من خلالها التحكم في شكل الموقع بالكامل من حيث نوع الخط المستخدم أو لونه أو حجمه و ذلك دون الحاجة لكتابة تلك الأكواد أو تكرارها في كل صفحة داخل الموقع.  

 [3] Asynchronous JavaScript and XML او اختصاراً Ajax: ما يمكن ترجمته بالجافا سكربت و الـ XML غير تزامنية، وهي تقنية تُمكّن من اجراء التعديلات على صفحة الإنترنت دون الحاجة إلى إعادة التحميل من جديد بل يتم إعادة تحميل الجزء المراد التعديل عليه في نفس الصفحة وهي في حالة اتصال بخادم الشبكة وذلك عن طريق اتصال جانبي. تستفيد المواقع التي يزورها عدد كبير من الزوار من هذه التقنيات مما يقلل من الجهد الحاصل على خادم الشبكة والزمن اللازم لاستجابة الموقع لدى المتصفح.


المصادر








التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال